Input Group
A composition pattern for attaching text, icons, and actions to an input.
Features
- Composed from primitives
- Text, icons, or buttons
- Flexible inline layouts
- Native input semantics
Examples
Composition patterns for Input.Root, TextArea.Root, and Button.Root: search chrome, prefix text, textarea footers, segmented buttons, and a busy state row.
Decorative icons use aria-hidden. Styling follows semantic tokens (border-border, bg-muted, text-muted-foreground, lucide-react) aligned with the legacy doc scenarios.
Search input
Leading search icon, controlled-looking layout, and a decorative keyboard hint. Icons use aria-hidden.
No preview output yet.
Prefix input
Static prefix text beside the field and a trailing decorative check icon.
No preview output yet.
Textarea with footer
Tall text area with a footer row for metadata and a primary action.
No preview output yet.
Button group
Input visually joined to a button segment and a trailing icon slot.
No preview output yet.
Processing state
Non-interactive row with spinner and label; use aria-busy on the container when wiring real async work.
No preview output yet.
Keyboard
| Shortcut | Action |
|---|---|
| Tab | Move focus to the next focusable control in the group. |
| Shift+Tab | Move focus to the previous focusable control in the group. |
| Character keys | Edit the focused input or textarea using native browser behavior. |
| Backspace/Delete | Remove text around the caret in the focused input or textarea. |
| Enter | Submit the nearest form from a single-line input, or activate a focused button. |
| Space | Insert a space in text fields, or activate a focused button. |
| Shortcut badges | Presentational only; wire real shortcuts with application handlers. |
Accessibility
- Always associate the input or textarea with a
<label>usinghtmlForandid. - Mark decorative icons and visual keyboard badges with
aria-hidden="true". - Link helper text, counts, and validation messages with
aria-describedby. - Use
aria-liveonly for counts or status text that updates after input.