Input group

An input group combines multiple related controls or inputs to appear as a single control.

Examples

Basic

@example.com


%

With textarea

With dropdown

With popover

using appendTo with ref to the InputGroup for the Popover so that the popover width will depend on the whole input group


With multiple group siblings



.00

Props

InputGroup

*required
NameTypeDefaultDescription
childrenrequiredReact.ReactNodeContent rendered inside the input group.
classNamestringAdditional classes added to the input group.

InputGroupItem

*required
NameTypeDefaultDescription
childrenrequiredReact.ReactNodeContent rendered inside the input group item.
classNamestringAdditional classes added to the input group item.
isBoxbooleanfalseEnables box styling to the input group item
isDisabledbooleanFlag to indicate if the input group item is disabled.
isFillbooleanfalseFlag to indicate if the input group item should fill the available horizontal space
isPlainbooleanFlag to indicate if the input group item is plain.

InputGroupText

*required
NameTypeDefaultDescription
childrenrequiredReact.ReactNodeContent rendered inside the input group text.
classNamestringAdditional classes added to the input group text.
componentReact.ReactNode'span'Component that wraps the input group text.
isDisabledbooleanFlag to indicate if the input group text is disabled.
isPlainbooleanFlag to to indicate if the input group item is plain.