Skip to content
PatternFly logo

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


With multiple group siblings



.00

Props

InputGroup

*required
NameTypeDefaultDescription
childrenrequiredReact.ReactNodeContent rendered inside the input group.
classNamestring''Additional classes added to the input group.

InputGroupText

*required
NameTypeDefaultDescription
childrenrequiredReact.ReactNodeContent rendered inside the input group text.
classNamestring''Additional classes added to the input group text.
componentReact.ReactNode'span'Component that wraps the input group text.
variantInputGroupTextVariant | 'default' | 'plain'InputGroupTextVariant.defaultInput group text variant

View source on GitHub