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>

Visual variants

Themes

primary
$
USD
secondary
$
USD
tertiary
$
USD
quaternary
$
USD

States

success
$
USD
warning
$
USD
error
$
USD
info
$
USD

Variants

solid
$
USD
outline
$
USD
glass
$
USD

Rounding

none
$
USD
medium
$
USD
large
$
USD

Shadows

none
$
USD
light
$
USD
strong
$
USD
visual-variants.tsx
// Themes
<InputGroup theme="primary" label="Budget" prefix="$" suffix="USD">
    <TextInput placeholder="2500" aria-label="Budget amount" />
  </InputGroup>
<InputGroup theme="secondary" label="Budget" prefix="$" suffix="USD">
    <TextInput placeholder="2500" aria-label="Budget amount" />
  </InputGroup>
<InputGroup theme="tertiary" label="Budget" prefix="$" suffix="USD">
    <TextInput placeholder="2500" aria-label="Budget amount" />
  </InputGroup>
<InputGroup theme="quaternary" label="Budget" prefix="$" suffix="USD">
    <TextInput placeholder="2500" aria-label="Budget amount" />
  </InputGroup>

// States
<InputGroup state="success" label="Budget" prefix="$" suffix="USD">
    <TextInput placeholder="2500" aria-label="Budget amount" />
  </InputGroup>
<InputGroup state="warning" label="Budget" prefix="$" suffix="USD">
    <TextInput placeholder="2500" aria-label="Budget amount" />
  </InputGroup>
<InputGroup state="error" label="Budget" prefix="$" suffix="USD">
    <TextInput placeholder="2500" aria-label="Budget amount" />
  </InputGroup>
<InputGroup state="info" label="Budget" prefix="$" suffix="USD">
    <TextInput placeholder="2500" aria-label="Budget amount" />
  </InputGroup>

// Variants
<InputGroup variant="solid" label="Budget" prefix="$" suffix="USD">
    <TextInput placeholder="2500" aria-label="Budget amount" />
  </InputGroup>
<InputGroup variant="outline" label="Budget" prefix="$" suffix="USD">
    <TextInput placeholder="2500" aria-label="Budget amount" />
  </InputGroup>
<InputGroup variant="glass" label="Budget" prefix="$" suffix="USD">
    <TextInput placeholder="2500" aria-label="Budget amount" />
  </InputGroup>

// Rounding
<InputGroup rounding="none" label="Budget" prefix="$" suffix="USD">
    <TextInput placeholder="2500" aria-label="Budget amount" />
  </InputGroup>
<InputGroup rounding="medium" label="Budget" prefix="$" suffix="USD">
    <TextInput placeholder="2500" aria-label="Budget amount" />
  </InputGroup>
<InputGroup rounding="large" label="Budget" prefix="$" suffix="USD">
    <TextInput placeholder="2500" aria-label="Budget amount" />
  </InputGroup>

// Shadows
<InputGroup shadow="none" label="Budget" prefix="$" suffix="USD">
    <TextInput placeholder="2500" aria-label="Budget amount" />
  </InputGroup>
<InputGroup shadow="light" label="Budget" prefix="$" suffix="USD">
    <TextInput placeholder="2500" aria-label="Budget amount" />
  </InputGroup>
<InputGroup shadow="strong" label="Budget" prefix="$" suffix="USD">
    <TextInput placeholder="2500" aria-label="Budget amount" />
  </InputGroup>

Interaction states

Disabled
$
USD
Loading
$
USD
Loading
Full width
$
USD
interaction-states.tsx
// Disabled
<InputGroup disabled label="Budget" prefix="$" suffix="USD">
    <TextInput placeholder="2500" aria-label="Budget amount" />
  </InputGroup>
// Loading
<InputGroup loading label="Budget" prefix="$" suffix="USD">
    <TextInput placeholder="2500" aria-label="Budget amount" />
  </InputGroup>
// Full width
<InputGroup fullWidth 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.