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









.00


@example.com








Copied to clipboard

Props

InputGroup Props

The InputGroup component accepts the following props.

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

InputGroupText Props

The InputGroupText component accepts the following props.

NameTypeRequiredDefaultDescription
classNamestring''Additional classes added to the input group text.
childrennodeContent rendered inside the input group text.
componentcustom'span'Component that wraps the input group text.