InputGroup
Markdown for agentsComposite input shell with flush left/right addons (icons, units, buttons) behind one outer outline; the nested field sheds its own border so the group reads as a single control.
npx slipstream-ui@latest add input-groupURL field with muted affixes
https://
.com
Search with icon and action (interactive)
query: —
Numeric input with currency (interactive)
PLN
total: 120 PLN / year
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| side | 'left' | 'right' | 'left' | Edge the addon hugs (flush against the group outline). |
| variant | 'ghost' | 'muted' | 'ghost' | Addon surface: ghost keeps the group background, muted paints a light gray. |
| children | ReactNode | — | Nested field (Input/Textarea/Select) plus any InputGroupAddon slots. |
Accessibility
- The group is focusable chrome only — the nested input keeps focus, its label association, and keyboard behavior.
- Mark decorative addons aria-hidden; include meaningful units in the field’s accessible name (aria-label="Amount in PLN").
- Disable addon buttons yourself when the field is disabled.
Browser support
| Browser | Tested versions |
|---|---|
| Chrome | 111+ (Mar 2023) |
| Edge | 111+ (Mar 2023) |
| Firefox | 121+ (Dec 2023) |
| Safari | 17.2+ — macOS & iOS (Dec 2023) |
Slipstream components rely only on CSS custom properties, Flexbox/Grid, and ARIA — the everyday baseline of the last two years of evergreen releases. Anything newer is progressive enhancement: unsupported browsers keep full functionality with static behavior instead of animations.