InputGroup

Groups multiple inputs into a single visually connected row.

Examples

Default

Website

https://

.com

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

Currency

Price

$

Clear Amount

USD

<InputGroup {...args}>
  <InputGroupText>$</InputGroupText>
  <NumberInput
    hasClear
    isLabelHidden
    label="Amount"
    min={0}
    onChange={setValue}
    value={value}
  />
  <InputGroupText>USD</InputGroupText>
</InputGroup>

With Status

WebsiteEnter a complete website host name.

https://

Website is required

<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://

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

Optional

Website · Optional

https://

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

Hidden Label

Website

https://

.com

<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://

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

Multiple Inputs

Date range

to

<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>

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.
isLabelHidden	boolean	false	Whether to visually hide the label.
label*	string	—	Label text for the input group.
labelTooltip	ReactNode	—	Tooltip content shown next to the label.
ref	Ref<HTMLDivElement>	—	Ref forwarded to the group wrapper.
size	"sm" | "md" | "lg"	'md'	Visual size applied to the group.
status	InputStatus	—	Validation status displayed below the group.
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.
isLabelHidden	boolean	false	Whether to visually hide the label.
label*	string	—	Label text for the input group.
labelTooltip	ReactNode	—	Tooltip content shown next to the label.
ref	Ref<HTMLDivElement>	—	Ref forwarded to the group wrapper.
size	"sm" | "md" | "lg"	'md'	Visual size applied to the group.
status	InputStatus	—	Validation status displayed below the group.
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.
isLabelHidden	boolean	false	Whether to visually hide the label.
label*	string	—	Label text for the input group.
labelTooltip	ReactNode	—	Tooltip content shown next to the label.
ref	Ref<HTMLDivElement>	—	Ref forwarded to the group wrapper.
size	"sm" | "md" | "lg"	'md'	Visual size applied to the group.
status	InputStatus	—	Validation status displayed below the group.
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	—