InputGroup

Groups multiple inputs into a single visually connected row.

Examples

Default

Website

https://

.com

(args: InputGroupProps) => {
  const [value, setValue] = useState('');
  return (
    <InputGroup {...args}>
      <InputGroupText>https://</InputGroupText>
      <TextInput
        isLabelHidden
        label="URL"
        onChange={setValue}
        placeholder="example"
        value={value}
      />
      <InputGroupText>.com</InputGroupText>
    </InputGroup>
  );
}

Currency

Price

$

Clear Amount

USD

(args: InputGroupProps) => {
  const [value, setValue] = useState<number | null>(24);
  return (
    <InputGroup {...args}>
      <InputGroupText>$</InputGroupText>
      <NumberInput
        hasClear
        isLabelHidden
        label="Amount"
        min={0}
        onChange={setValue}
        value={value}
      />
      <InputGroupText>USD</InputGroupText>
    </InputGroup>
  );
}

Phone Number

Phone number

+1

(args: InputGroupProps) => {
  const [value, setValue] = useState('');
  return (
    <InputGroup {...args}>
      <InputGroupText>+1</InputGroupText>
      <TextInput
        autoComplete="tel"
        isLabelHidden
        label="Phone number"
        onChange={setValue}
        placeholder="(555) 123-4567"
        type="tel"
        value={value}
      />
    </InputGroup>
  );
}

With Select

Price

USD

(args: InputGroupProps) => {
  const [amount, setAmount] = useState<number | null>(24);
  const [currency, setCurrency] = useState<string | null>('USD');
  return (
    <InputGroup {...args}>
      <NumberInput
        isLabelHidden
        label="Amount"
        min={0}
        onChange={setAmount}
        value={amount}
      />
      <Select
        isLabelHidden
        label="Currency"
        onChange={setCurrency}
        options={['USD', 'EUR', 'GBP']}
        value={currency}
      />
    </InputGroup>
  );
}

With Multi Select

Columns

Show

1 selected

(args: InputGroupProps) => {
  const [value, setValue] = useState<string[]>(['Name']);
  return (
    <InputGroup {...args}>
      <InputGroupText>Show</InputGroupText>
      <MultiSelect
        isLabelHidden
        label="Columns"
        onChange={setValue}
        options={['Name', 'Email', 'Role']}
        value={value}
      />
    </InputGroup>
  );
}

With Autocomplete Input

Assignee

@

(args: InputGroupProps) => {
  const [value, setValue] = useState<SearchableItem | null>(null);
  return (
    <InputGroup {...args}>
      <InputGroupText>@</InputGroupText>
      <AutocompleteInput
        isLabelHidden
        label="Person"
        onChange={setValue}
        placeholder="Search people"
        searchSource={createStaticSearchSource(PEOPLE)}
        value={value}
      />
    </InputGroup>
  );
}

With Tags Input

Recipients

To

Ada Lovelace

(args: InputGroupProps) => {
  const [value, setValue] = useState<SearchableItem[]>([PEOPLE[0]]);
  return (
    <InputGroup {...args}>
      <InputGroupText>To</InputGroupText>
      <TagsInput
        isLabelHidden
        label="People"
        onChange={setValue}
        placeholder="Add people"
        searchSource={createStaticSearchSource(PEOPLE)}
        value={value}
      />
    </InputGroup>
  );
}

With Status

WebsiteEnter a complete website host name.

https://

Website is required

(args: InputGroupProps) => {
  const [value, setValue] = useState('');
  return (
    <InputGroup {...args}>
      <InputGroupText>https://</InputGroupText>
      <TextInput
        isLabelHidden
        label="URL"
        onChange={setValue}
        value={value}
      />
    </InputGroup>
  );
}

With Detached Status

Website

https://

Website is required

(args: InputGroupProps) => {
  const [value, setValue] = useState('');
  return (
    <InputGroup {...args}>
      <InputGroupText>https://</InputGroupText>
      <TextInput
        isLabelHidden
        label="URL"
        onChange={setValue}
        value={value}
      />
    </InputGroup>
  );
}

Disabled

Website

https://

.com

<InputGroup {...args}>
  <InputGroupText>https://</InputGroupText>
  <TextInput
    isLabelHidden
    label="URL"
    onChange={() => {}}
    value="example"
  />
  <InputGroupText>.com</InputGroupText>
</InputGroup>

Sizes

Size sm

https://

.com

Size md

https://

.com

Size lg

https://

.com

<div style={{display: 'flex', flexDirection: 'column', gap: 16}}>
  {(['sm', 'md', 'lg'] as const).map(size => (
    <InputGroup key={size} label={`Size ${size}`} size={size}>
      <InputGroupText>https://</InputGroupText>
      <TextInput
        isLabelHidden
        label="URL"
        onChange={() => {}}
        placeholder="example"
        value=""
      />
      <InputGroupText>.com</InputGroupText>
    </InputGroup>
  ))}
</div>

Required

Website · Required

https://

(args: InputGroupProps) => {
  const [value, setValue] = useState('');
  return (
    <InputGroup {...args}>
      <InputGroupText>https://</InputGroupText>
      <TextInput
        isLabelHidden
        label="URL"
        onChange={setValue}
        placeholder="example"
        value={value}
      />
    </InputGroup>
  );
}

Optional

Website · Optional

https://

(args: InputGroupProps) => {
  const [value, setValue] = useState('');
  return (
    <InputGroup {...args}>
      <InputGroupText>https://</InputGroupText>
      <TextInput
        isLabelHidden
        label="URL"
        onChange={setValue}
        placeholder="example"
        value={value}
      />
    </InputGroup>
  );
}

Hidden Label

Website

https://

.com

(args: InputGroupProps) => {
  const [value, setValue] = useState('');
  return (
    <InputGroup {...args}>
      <InputGroupText>https://</InputGroupText>
      <TextInput
        isLabelHidden
        label="URL"
        onChange={setValue}
        placeholder="example"
        value={value}
      />
      <InputGroupText>.com</InputGroupText>
    </InputGroup>
  );
}

With Label Tooltip

Website

The full URL where your site is hosted.

https://

(args: InputGroupProps) => {
  const [value, setValue] = useState('');
  return (
    <InputGroup {...args}>
      <InputGroupText>https://</InputGroupText>
      <TextInput
        isLabelHidden
        label="URL"
        onChange={setValue}
        placeholder="example"
        value={value}
      />
    </InputGroup>
  );
}

Multiple Inputs

Date range

to

(args: InputGroupProps) => {
  const [start, setStart] = useState('');
  const [end, setEnd] = useState('');
  return (
    <InputGroup {...args}>
      <TextInput
        isLabelHidden
        label="Start date"
        onChange={setStart}
        placeholder="Start"
        value={start}
      />
      <InputGroupText>to</InputGroupText>
      <TextInput
        isLabelHidden
        label="End date"
        onChange={setEnd}
        placeholder="End"
        value={end}
      />
    </InputGroup>
  );
}

Read Only

Website

https://

<InputGroup {...args}>
  <InputGroupText>https://</InputGroupText>
  <TextInput
    isLabelHidden
    label="URL"
    onChange={() => {}}
    value="example.com"
  />
</InputGroup>

API

InputGroup

Groups multiple inputs into a single visually connected row.

When isOptional: false, isRequired: false

Prop	Type	Default	Description
children*	ReactNode	—	Grouped input children to render side-by-side.
className	string	—	Additional CSS class names applied to the group wrapper.
data-testid	string	—	Test ID applied to the group wrapper.
description	ReactNode	—	Supporting text displayed below the label.
isDisabled	boolean	false	Whether all grouped inputs are disabled.
isReadOnly	boolean	false	Whether all grouped inputs are read-only.
isLabelHidden	boolean	false	Whether to visually hide the label.
label*	string	—	Label text for the input group.
labelEnd	ReactNode	—	Content shown at the end of the label row, such as a link. It renders outside the label, so it does not focus the control or change its accessible name. It stays visible when isLabelHidden is true.
labelTooltip	ReactNode	—	Tooltip content shown next to the label.
ref	Ref<HTMLDivElement>	—	Ref forwarded to the group wrapper.
size	"sm" | "md" | "lg"	The enclosing Toolbar size, otherwise 'md'	Visual size applied to the group and its children.
status	InputStatus	—	Validation status displayed below the group.
statusVariant	"attached" | "detached"	'attached'	How the status message is positioned.
style	CSSProperties	—	Inline styles applied to the group wrapper.
isOptional	false	—
isRequired	false	—

When isOptional: true, isRequired: false

Prop	Type	Default	Description
children*	ReactNode	—	Grouped input children to render side-by-side.
className	string	—	Additional CSS class names applied to the group wrapper.
data-testid	string	—	Test ID applied to the group wrapper.
description	ReactNode	—	Supporting text displayed below the label.
isDisabled	boolean	false	Whether all grouped inputs are disabled.
isReadOnly	boolean	false	Whether all grouped inputs are read-only.
isLabelHidden	boolean	false	Whether to visually hide the label.
label*	string	—	Label text for the input group.
labelEnd	ReactNode	—	Content shown at the end of the label row, such as a link. It renders outside the label, so it does not focus the control or change its accessible name. It stays visible when isLabelHidden is true.
labelTooltip	ReactNode	—	Tooltip content shown next to the label.
ref	Ref<HTMLDivElement>	—	Ref forwarded to the group wrapper.
size	"sm" | "md" | "lg"	The enclosing Toolbar size, otherwise 'md'	Visual size applied to the group and its children.
status	InputStatus	—	Validation status displayed below the group.
statusVariant	"attached" | "detached"	'attached'	How the status message is positioned.
style	CSSProperties	—	Inline styles applied to the group wrapper.
isOptional*	true	—
isRequired	false	—

When isOptional: false, isRequired: true

Prop	Type	Default	Description
children*	ReactNode	—	Grouped input children to render side-by-side.
className	string	—	Additional CSS class names applied to the group wrapper.
data-testid	string	—	Test ID applied to the group wrapper.
description	ReactNode	—	Supporting text displayed below the label.
isDisabled	boolean	false	Whether all grouped inputs are disabled.
isReadOnly	boolean	false	Whether all grouped inputs are read-only.
isLabelHidden	boolean	false	Whether to visually hide the label.
label*	string	—	Label text for the input group.
labelEnd	ReactNode	—	Content shown at the end of the label row, such as a link. It renders outside the label, so it does not focus the control or change its accessible name. It stays visible when isLabelHidden is true.
labelTooltip	ReactNode	—	Tooltip content shown next to the label.
ref	Ref<HTMLDivElement>	—	Ref forwarded to the group wrapper.
size	"sm" | "md" | "lg"	The enclosing Toolbar size, otherwise 'md'	Visual size applied to the group and its children.
status	InputStatus	—	Validation status displayed below the group.
statusVariant	"attached" | "detached"	'attached'	How the status message is positioned.
style	CSSProperties	—	Inline styles applied to the group wrapper.
isOptional	false	—
isRequired*	true	—

InputGroupText

Prop	Type	Default	Description
children*	ReactNode	—
className	string	—
data-testid	string	—
ref	Ref<HTMLDivElement>	—
style	CSSProperties	—