Components / Form & Input / Input Group

Input Group stable

An input with its addons attached: a prefix, a suffix, or a button sharing the same outline.

Preview
https:// .dev
¥

Uses: Button, Input — include its CSS alongside this one.

<div style="display:flex;flex-direction:column;gap:14px">
  <div class="k-igroup">
    <span class="k-ig-addon">https://</span>
    <input class="input" type="text" value="northwind.example" aria-label="Site address">
    <span class="k-ig-addon">.dev</span>
  </div>
  <div class="k-igroup">
    <span class="k-ig-addon">¥</span>
    <input class="input" type="text" inputmode="numeric" value="12,000" aria-label="Amount in yen">
    <button class="btn btn-pri btn-md" type="button">Charge</button>
  </div>
</div>
/* KATA Input Group — addons sharing the input's outline. */
.k-igroup{display:flex;align-items:stretch;font-family:var(--k-font);max-width:340px}
.k-igroup .input{border-radius:0;margin-inline-start:-1px;position:relative}
.k-igroup .input:first-child{border-start-start-radius:var(--k-radius);border-end-start-radius:var(--k-radius);margin-inline-start:0}
.k-igroup .input:last-child{border-start-end-radius:var(--k-radius);border-end-end-radius:var(--k-radius)}
.k-igroup .input:focus{z-index:1}
.k-ig-addon{display:flex;align-items:center;padding:0 11px;background:var(--k-bg-soft);border:1px solid var(--k-line);color:var(--k-ink-2);font-size:13px;margin-inline-start:-1px;white-space:nowrap}
.k-ig-addon:first-child{border-start-start-radius:var(--k-radius);border-end-start-radius:var(--k-radius);margin-inline-start:0}
.k-ig-addon:last-child{border-start-end-radius:var(--k-radius);border-end-end-radius:var(--k-radius)}
.k-igroup .btn{border-radius:0;margin-inline-start:-1px;position:relative}
.k-igroup .btn:last-child{border-start-end-radius:var(--k-radius);border-end-end-radius:var(--k-radius)}
.k-igroup .btn:first-child{border-start-start-radius:var(--k-radius);border-end-start-radius:var(--k-radius);margin-inline-start:0}

Installation

CLI

node kata-ui.mjs add input-group

Writes the part’s CSS into your project. Dependencies are resolved and written with it. New to the CLI? See the CLI doc.

Manual

  1. Load tokens.css once, before any part.
  2. Copy the CSS tab into your stylesheet.
  3. Copy the HTML where it belongs.

Examples

Search with an attached button

<div class="k-igroup" style="max-width:380px">
  <input class="input" type="search" placeholder="Search the catalog" aria-label="Search the catalog">
  <button class="btn btn-sec btn-md" type="button"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="square" stroke-linejoin="bevel" aria-hidden="true"><circle cx="11" cy="11" r="7"/><path d="m21 21-4.5-4.5"/></svg> Search</button>
</div>

Unit on the right

min 
<div class="k-igroup">
  <input class="input" type="text" inputmode="decimal" value="240" aria-label="Duration in minutes">
  <span class="k-ig-addon">min</span>
</div>

Usage

One outline for the whole row: the group draws the seams, the Input part keeps its own focus ring. Text addons are for units and fixed prefixes (¥, https://); anything clickable should be a real button at the end.

Accessibility

The addon is decoration for the eye — the label and the placeholder must carry the unit on their own ("Amount in yen", not just "Amount"). Attached buttons are ordinary buttons with ordinary names.

Anatomy

The public surface of this part, read from its own source. Class names are the API — the CSS tab above is the full contract.

.k-igroupclass
.inputclass
.k-ig-addonclass
.btnclass
aria-labelARIA

Related parts

Button stable

Black leads; lines and ghosts support. Hover, disabled and loading states included.

actionctasubmit

Button Group stable

Buttons joined into one piece: shared edges, one radius, no gaps. For toolbars, paging and split actions.

buttonstoolbarsplitjoined

Calendar stable

One month, standing on its own: a grid of real day buttons with today marked and a selection you can move.

datemonthgridpicker

Cascader beta

A select that walks a tree: pick a branch, then a branch of the branch, until the leaf is the answer.

selecttreenestedlevels
Previous
Input