Components

Input Group

Composes an input with leading or trailing addons — icons, text labels, units, or buttons — inside a single bordered control that shares one focus ring.

Basic usage

Wrap an InputGroupInput with one or more InputGroupAddon slots. Clicking an addon focuses the input.

⌘K

Addon alignment

Use align="inline-start" for a leading prefix and align="inline-end" for a trailing suffix such as a unit.

USD

With a button

Place an InputGroupButton inside a trailing addon for an inline submit or action. It inherits all Button variants.

Props

PropTypeDefaultDescription
InputGroupdiv—The container. Wraps the control and addons, owns the border, height, and focus ring.
InputGroupInputinput—A borderless input that fills the remaining space. Forwards all native input props.
InputGroupTextareatextarea—A borderless textarea variant; switches the group to a vertical layout.
InputGroupAddon.align'inline-start' | 'inline-end' | 'block-start' | 'block-end''inline-start'Where the addon sits relative to the control. Inline aligns horizontally; block stacks above or below.
InputGroupTextspan—Muted, non-interactive text or icon label for use inside an addon (units, prefixes, hints).
InputGroupButton.variantButton variant'ghost'Inherits all Button variants for an interactive addon (search, submit, clear).
InputGroupButton.size'xs' | 'sm' | 'icon-xs' | 'icon-sm''xs'Compact sizes tuned to sit flush inside the group.
classNamestring—Additional Tailwind classes to merge on any part.

Accessibility

  • The control is a native <input>, so keyboard focus, typing, and form submission work without extra wiring.
  • The group exposes a shared focus-visible ring driven by the inner control — the entire field lights up on keyboard focus using the brand gold ring token.
  • Clicking anywhere in an addon focuses the input, giving icons and labels a larger, more forgiving hit target.
  • Set aria-invalid on the input to switch the whole group to its destructive error styling, and always pair the input with a visible <label> or aria-label.
  • Give icon-only InputGroupButton actions an aria-label so their purpose is announced.