We use cookies on our websites to deliver our online services. Details about how we use cookies and how you may disable them are set out in our Privacy Statement. By using this website you agree to our use of cookies.

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

QUICKLINKS

CONTRIBUTE

STAY IN TOUCH

PatternFly is an open source design system built to drive consistency and unify teams. From documentation and components to code examples and tutorials, PatternFly is a place where design and development can thrive. We’re on a mission to help teams build consistent, accessible, and scalable enterprise product experiences—the open source way.

Red Hat logo
Copyright © 2022 Red Hat, Inc.
Privacy statementTerms of useAll policies and guidelines