React

Input group

Use an input group when you want to group multiple input types, e.g., a text input and a button, into one control. Related design guidelines: Data input

ExamplesProps

Examples

Simple input group

Buttons and TextArea

Copied to clipboard

Props

InputGroup Props

The InputGroup component accepts the following props.

NameTypeRequiredDefaultDescription
classNamestring''Additional classes added to the input group.
childrenReact.ReactNodeContent rendered inside the input group.

InputGroupText Props

The InputGroupText component accepts the following props.

NameTypeRequiredDefaultDescription
classNamestring''Additional classes added to the input group text.
childrenReact.ReactNodeContent rendered inside the input group text.
componentReact.ReactNode'span'Component that wraps the input group text.