InputGroup primitives
Lower-level parts for composing a text input with content at either end.
Use these primitives to build a custom text control. Reach for them when you need the styled input
without label, description, or error slots. For most application forms, use
TextField.
Anatomy
InputGroup owns the border, background, shadow, and rounding. Its parts are transparent flex
children, so position follows document order. Put InputGroupPrefix before InputGroupInput and
InputGroupSuffix after it.
<InputGroup>
<InputGroupPrefix>$</InputGroupPrefix>
<InputGroupInput aria-label="Amount" inputMode="decimal" />
<InputGroupSuffix>USD</InputGroupSuffix>
</InputGroup>A prefix or suffix accepts any React node, including an interactive one such as a button. Give an interactive part an accessible name, keyboard behaviour, and a considered focus order.
Size
Set size on InputGroup and the parts inherit it. medium is the default. Use small when the
input belongs in a compact control group. Match the size of nearby fields and actions. An individual
part can override the inherited size.
The group also sets the icon size for everything inside it, so an Icon in a prefix or suffix
scales with the control without a size of its own.
Validation
InputGroup reads its invalid state from the enclosing React Aria field, or from an explicit
isInvalid. While invalid it renders an error icon after the input value and before any
InputGroupSuffix.
The icon is decorative and hidden from assistive technology, so it marks a problem but does not describe it. Always give an invalid composition an error message. See Validation.
Styling and composition
className on InputGroup applies to the group element, and className on InputGroupInput
applies to the input. Use these hooks when you compose the primitive with other controls. Give a
standalone InputGroupInput an accessible name with aria-label or a connected label.
API
InputGroupProps
InputGroupProps also accepts compatible DOM and ARIA attributes and event handlers for its rendered element.
Prop
Type
InputGroupInputProps
InputGroupInputProps also accepts compatible DOM and ARIA attributes and event handlers for its rendered element.
Prop
Type
InputGroupPrefixProps
InputGroupPrefixProps also accepts compatible DOM and ARIA attributes and event handlers for its rendered element.
Prop
Type
InputGroupSuffixProps
InputGroupSuffixProps also accepts compatible DOM and ARIA attributes and event handlers for its rendered element.
Prop
Type