Skip to Content
Patternfly Logo

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

Basic

@example.com


With textarea

With dropdown

With datepicker

With popover

With multiple group siblings



.00

Props

InputGroup properties
NameTypeRequiredDefaultDescription
classNamestringNo''Additional classes added to the input group.
childrenReact.ReactNodeYesContent rendered inside the input group.
InputGroupText properties
NameTypeRequiredDefaultDescription
classNamestringNo''Additional classes added to the input group text.
childrenReact.ReactNodeYesContent rendered inside the input group text.
componentReact.ReactNodeNo'span'Component that wraps the input group text.