Components

Input Group

Inputs with prefix/suffix addons: icons, text, keys, buttons.

<InputGroup>
  <InputGroupAddon>
    <SearchIcon />
  </InputGroupAddon>
  <InputGroupInput placeholder="Search docs…" />
  <InputGroupAddon align="inline-end">
    <Kbd>⌘K</Kbd>
  </InputGroupAddon>
</InputGroup>

Prefix and suffix content belongs in InputGroupAddon; the input itself is InputGroupInput, never a raw Input. The search-input and clearable-input patterns are built from this.

<InputGroup>
  <InputGroupAddon align="block-start">
    <InputGroupText>Release notes</InputGroupText>
  </InputGroupAddon>
  <InputGroupTextarea placeholder="What changed?" />
  <InputGroupAddon align="block-end">
    <InputGroupText>mrkdwn</InputGroupText>
    <InputGroupButton size="sm" className="ml-auto">Save</InputGroupButton>
  </InputGroupAddon>
</InputGroup>

align="block-start" and align="block-end" stack the addon above or below the control instead of inline — the group switches to a column automatically.

Actions go in an addon as an InputGroupButton; a Spinner in the addon signals an inline async state. Give the button a DropdownMenuTrigger render={...} to turn it into a menu (see menu). Any control tagged data-slot="input-group-control" — not just InputGroupInput — participates in the group's focus and invalid styling, so custom inputs drop in unchanged.

Markdown for agents: /design/input-group.md · spec: /design.md