InputGroup

Role and semantics

InputGroup renders a native <input> or <textarea> inside Base UI Field. The label is bound to the control with <label for>. Addon text is plain text and is not part of the control’s name.

Keyboard

Key	Behaviour
Tab	Moves focus to the control, then to a button in an addon.
Enter, Space	Runs a button in an addon.

Focus

While the control has focus, the ring is drawn on the whole box (focus-within). A button in an addon shows its own focus ring.

Screen reader output

Example	Output
Group with a prefix and a suffix	“Field label, edit text”; the addon texts are read separately in order
Clear button	“Clear, button”

If a prefix changes the meaning of the value, state it in the help text too; screen readers read the addon apart from the control.

Contrast

Addon text in color-text-subtle has at least 4.5:1 contrast on the background. The box border has 3:1 contrast.

WCAG 2.2

Criterion	How InputGroup meets it	What the product team does
1.3.1 Info and relationships	<label for> and aria-describedby.	Give every group a label.
1.3.2 Meaningful sequence	Addons are read in DOM order.	Write addons in reading order.
2.4.7 Focus visible	The ring is on the whole box.	Do not change the box border with className.
4.1.2 Name, role, value	A button in an addon is an IconButton with a name.	Give the addon action a label.