Inputs · §5.3
Input group
One field with icons, units and buttons inside the border.
Code
<InputGroup><InputGroupAddon><SearchIcon /></InputGroupAddon><InputGroupInput aria-label="Search" /></InputGroup>Accessibility
- Addons are decorative or labelled buttons; the field keeps its label.
Usage
Do
- Units as text addons; actions as buttons.
Don't
- Don't hide units in placeholders.
Platforms
- Web
- apps/web/components/ui/input-group.tsx
- iOS
- TextField with an HStack
- Android
- OutlinedTextField with leading/trailing icons