Components

Input group

Composed input shell for inline icons, text, and button slots around an Input or Textarea.

Install

npx shadcn@latest add @alix/inputGroup

Preview

Usage

<InputGroup>
  <InputGroupAddon>
    <SearchIcon />
  </InputGroupAddon>
  <InputGroupInput type="search" placeholder="Search open roles" />
<InputGroupAddon align="inline-end">
  <InputGroupButton>Search</InputGroupButton>
</InputGroupAddon>
</InputGroup>

Examples

Inline text add-ons

Use text add-ons for units, commercial terms, or prefixes that belong inside the same control shell.

per month

<InputGroup className="rounded-none">
  <InputGroupAddon>
    <InputGroupText>$</InputGroupText>
  </InputGroupAddon>
  <InputGroupInput inputMode="decimal" defaultValue="425000" aria-label="Monthly advisory fee" />
  <InputGroupAddon align="inline-end">
    <InputGroupText>per month</InputGroupText>
  </InputGroupAddon>
</InputGroup>

Textarea with footer action

Block-end add-ons let a note field keep its metadata and action inside the same bordered shell.

Steering note

0 of 400 characters

<InputGroup className="rounded-none">
  <InputGroupAddon align="block-start" className="border-b">
    <FileTextIcon />
    <InputGroupText>Steering note</InputGroupText>
  </InputGroupAddon>
  <InputGroupTextarea rows={4} placeholder="Summarise the decision needed from the client." />
  <InputGroupAddon align="block-end" className="border-t">
    <InputGroupText>0 of 400 characters</InputGroupText>
    <InputGroupButton>Attach</InputGroupButton>
  </InputGroupAddon>
</InputGroup>

Search command

The group button slot keeps a compact command attached to the search input without shadowing Button props.

<InputGroup className="rounded-none">
  <InputGroupAddon>
    <SearchIcon />
  </InputGroupAddon>
  <InputGroupInput type="search" placeholder="Search capabilities" aria-label="Search capabilities" />
  <InputGroupAddon align="inline-end">
    <InputGroupButton rightIcon={<ArrowRightIcon />}>Search</InputGroupButton>
  </InputGroupAddon>
</InputGroup>

When to use it

Use it for

Search boxes, fee inputs, and note fields where an icon, unit, or inline command is part of the control.
Textarea shells with block-start or block-end metadata that should travel with the input.
Compact group buttons that need the full Button API while staying visually attached to the field.

Reach for something else

Plain single-line fields with no add-ons — use Input instead.
Label, help, required, and error text — wrap the actual control in Field instead.
Dropdown actions or option lists attached to a trigger — use Menu or Select instead.

Props

Prop	Type	Default	Description
InputGroupAddon.align	"inline-start" \| "inline-end" \| "block-start" \| "block-end"	"inline-start"	Places addon content before, after, above, or below the control.
InputGroupButton.size	"xs" \| "sm" \| "icon-xs" \| "icon-sm"	"xs"	Button size tuned for the input shell.
InputGroupInput / InputGroupTextarea	native control props	—	Control slots that inherit the group focus, invalid, and disabled treatment.