Input group

shadcn/ui input-group on DESIGN.md tokens. The group owns the field chrome and the control inside is borderless, so an icon, a unit, a shortcut hint or a button sits inside the same 4px edge and the focus ring wraps all of it. Sizes follow Input: 32 / 40 / 48. Clicking an addon focuses the control.

<InputGroup size="sm">
  <InputGroupInput placeholder="Search lots" />
  <InputGroupAddon><SearchIcon /></InputGroupAddon>
  <InputGroupAddon align="inline-end"><KbdGroup><Kbd role="img" aria-label="Command">⌘</Kbd><Kbd>K</Kbd></KbdGroup></InputGroupAddon>
</InputGroup>

Icons, units, hints

Leading icon with a shortcut, a currency prefix and unit suffix, a URL with its scheme fixed.

⌘K
€
EUR
https://

Buttons

A clear icon button and a quiet ghost text action, both flat: nothing lifts inside a field.

Textarea with a footer

Block-end addon: a live character count on the left, the send action on the right.

0 / 500

Sizes

sm 32 · default 40 · lg 48, matching Input and Button.

States

Disabled fades the whole group; aria-invalid on the control paints the group edge and ring in warning, with the FieldError 12px below, as on Input.

€
https://