PatternFly

Input group

An input group groups multiple related controls or inputs together so they appear as one 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.

View source on GitHub