Input group
Prefix and suffix cells around an input, sharing one focus ring.
Examples
Input group
https://
.app
With icon
⌘K
Anatomy
.input-group | Filled row. Draws the focus ring when anything inside has focus. |
> .input | The control. Takes the remaining width and drops its own fill and ring. |
> span | Any other child is a prefix or suffix cell: small, muted, centred, never wrapping. Text, an icon or a <kbd>. |
Accessibility
- The prefix and suffix are not part of the input's name. Label the input itself, and reference a meaningful affix (a unit, a domain) with
aria-describedby. - Icon cells are decorative; the search icon does not replace a label.