Input Group
Prefixes, suffixes and actions aligned with the field, without breaking its semantics.
Base UI reference ↗Installation
Run it from the root of a project already set up with zunoui init.
npx zunoui@latest add input-groupDependencies
What add input-group installs alongside the component. The CLI skips any you already have in a compatible version.
ZUNO registry
@zuno/utils@zuno/button
npm
@base-ui/[email protected]
Examples
4 examples · 1 componentPrefix and suffix
Text addons on both sides; the suffix is linked as a description.
Icon and actions
A search icon, a shortcut hint and a copy button inside the field.
Textarea with a toolbar
A block-end addon holds the character count and the send button.
Enter an amount greater than zero.
Invalid
aria-invalid on the control turns the frame destructive; the error is linked text.
API reference
Keeps the props, events and refs of the matching Base UI primitive, plus ZUNO's styles.
| Prop | Type | Default |
|---|---|---|
InputGrouprole="group"; the bordered frame. Its ring follows the text control, and aria-invalid or a Field error on the control turns it destructive. | div | — |
InputGroupInputBorderless Base UI Input; works inside Field like Input. | input | — |
InputGroupTextareaBorderless textarea for block layouts; resizes vertically. | textarea | rows = 3 |
InputGroupAddonalign: "inline-start" | "inline-end" | "block-start" | "block-end". Place it in the DOM where it appears; clicking its text or icon focuses the control. | div | "inline-start" |
InputGroupTextMuted prefix or suffix such as https:// or USD. | span | — |
InputGroupButtonCompact Button that fits the field height; all Button variants and size="icon" work. | Button | variant = "ghost", size = "sm" |
States
The states that apply to this component and their visual treatment.
| State | Treatment |
|---|---|
| Rest | Input border around the control and its addons. |
| Focus visible | Ring on the whole frame while the text control has focus; a focused button inside shows its own ring instead. |
| Invalid | aria-invalid (or a Field error) on the control turns the frame destructive. |
| Disabled | A disabled control dims the whole group. |
Accessibility
Label the control, not the group: a visible Label with htmlFor, or aria-label on the input.
Prefix and suffix text is not read as part of the name. When it carries meaning (a unit, a currency, a domain), point aria-describedby at it or put it in the label.
Addons sit in the DOM where they appear, so screen readers and Tab follow the visual order; buttons keep their own Tab stop and focus ring.
Icon-only buttons need an aria-label; decorative icons are aria-hidden.
Invalid state is the destructive border plus a text error linked with aria-describedby, never color alone.