InputGroup
Prefix/suffix addon wrapper for Input; InputGroupAddon renders inline icons/units inside the field border; ButtonGroup collapses adjacent button borders
Category: inputs · WCAG 2.2-AA · form, input, addon, group, layout
Props
| Prop | Type | Default | Description |
|---|---|---|---|
prefix | ReactNode | — | Content rendered before the input (leading adornment). |
suffix | ReactNode | — | Content rendered after the input (trailing adornment). |
children | ReactNode | — | Content rendered inside the component. |
Design tokens
--cascivo-color-bg-subtle--cascivo-color-border--cascivo-color-text-subtle--cascivo-radius-input
When to use
- Attaching a prefix/suffix addon (protocol, currency, unit) to an Input so it reads as one field
- Placing a leading or trailing inline icon/unit inside the field border via InputGroupAddon
- Grouping adjacent buttons with collapsed shared borders via ButtonGroup
When not to use
- A standalone field with no adornment — use Input directly
- Conveying meaning that the user must read via an addon — decorative addons are aria-hidden
How to build an accessible InputGroup in React →
Examples
With prefix
<InputGroup prefix="https://"><Input placeholder="example.com" /></InputGroup>With leading icon addon
<InputGroup><InputGroupAddon><svg viewBox="0 0 16 16" width="16" height="16"><circle cx="6" cy="6" r="4" fill="none" stroke="currentColor" strokeWidth="1.5"/><path d="M10 10l3 3" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"/></svg></InputGroupAddon><Input placeholder="Search…" aria-label="Search" /></InputGroup>With trailing unit addon
<InputGroup><Input placeholder="0.00" aria-label="Weight" /><InputGroupAddon align="inline-end">kg</InputGroupAddon></InputGroup>ButtonGroup
<ButtonGroup><Button>Left</Button><Button>Right</Button></ButtonGroup>