Home
Previous componentNext component

Input group

Open in fibo's StorybookOpen in Figma

An input group sets an icon, text, a key or a button beside an input and draws them as one field. The group owns the border, focus ring and invalid state, so they wrap the addons too, and pressing an addon focuses the input. The input is Base UI's Input, so a Field around the group labels, describes and validates it.

Input groupPress the icon. Focus goes to the input.

Examples

Smallsize sm matches a small Button or Select, as in a toolbar. Inside a FieldGroup it takes the group's size.
Esc

Recent commands show here.

Ghost, in a menuNo border or background: the popup is the field. Command menu and Filter menu draw their searches this way.
With a buttonAn end addon with an icon button clears the search. Name the button.

Letters, numbers and dashes.

In a fieldThe Field's label, description and invalid state reach the input inside the group.

Anatomy

A group that draws the field, with an addon on either side of a borderless input.

  1. Addon
  2. Input
  3. Group
The fieldA search with a leading icon.

Guidelines

  • 01One addon on each side at most. More reads as a toolbar, not a field.
  • 02Use a leading icon only when it says what the field is for, such as search or a handle's @.
  • 03Use the ghost variant only where the surface around it marks the field, such as a popup's header.

Best practices

DoDraw the icon inside the group, so the ring wraps it.
Don'tDon't set an icon outside the field it belongs to.

Accessibility

  • 01The group has the group role; the input needs its own name, from a FieldLabel or aria-label.
  • 02Hide decorative icons in addons with aria-hidden.
  • 03Pressing an addon moves focus to the input without blurring it first, so the caret stays put. Buttons in an addon work as usual.