Input Group

The InputGroup component combines addons, prefixes, suffixes, and a form control into one framed input row.

Usage & Examples

Amount Field

$
USD
amount-field.tsx
<InputGroup label="Budget" prefix="$" suffix="USD">
    <TextInput placeholder="2500" aria-label="Budget amount" />
  </InputGroup>

Props API

37 props
Columns
Input Group props API
Default
Description
childrenReactNodeNoprops—Main form control rendered inside the group.
classNamestringNostyling—Additional class name for the component root.
containerClassNamestringNoprops—Additional class name for the outer label/component container.
contentClassNamestringNoprops—Additional class name for the content/control area.
data-testidstringNotesting—Backward-compatible alias for test ID attributes.
descriptionClassNamestringNoprops—Additional class name for the description text.
disabledbooleanNopropsfalseWhether the grouped control is disabled.
endAddonReactNodeNoprops—Addon content rendered after the shared input frame.
endAddonClassNamestringNoprops—Additional class name for the end addon.
errorClassNamestringNoprops—Additional class name for error text.
errorMessageReactNodeNoprops—Error message rendered after the control and announced to assistive technologies.
frameClassNamestringNoprops—Additional class name for the input frame.