How to build an accessible InputGroup in React
Inline addons are marked aria-hidden because they are purely decorative units/icons, so the wrapped Input keeps its own accessible name; ButtonGroup uses role="group" to convey that its buttons form a related set.
When to use a InputGroup
- 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 it
- A standalone field with no adornment — use Input directly
- Conveying meaning that the user must read via an addon — decorative addons are aria-hidden
Accessibility
Role generic, verified at WCAG 2.2-AA.
Common mistakes
Avoid: <InputGroupAddon>Required</InputGroupAddon> to convey field status
Prefer: Use the Input error/hint props for meaningful text
InputGroupAddon is aria-hidden and decorative, so screen readers never announce it
Example
<InputGroup prefix="https://"><Input placeholder="example.com" /></InputGroup>