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

Text input group

A text input group is a more flexible composable version of a text input. It enables consumers of PatternFly to build custom inputs for filtering and similar use cases by placing elements like icons, chips groups and buttons within a text input.

Info alert:Beta feature

This Beta component is currently under review and is still open for further evolution. It is available for use in product. Beta components are considered for promotion on a quarterly basis. Please join in and give us your feedback or submit any questions on the PatternFly forum or via Slack. To learn more go to our Beta components page on GitHub.

Examples

Basic

Disabled

Utilities and icon

Filters

  • chip one
  • chip two
  • chip three

Props

TextInputGroup

*required
NameTypeDefaultDescription
childrenReact.ReactNodeContent rendered inside the text input group
classNamestringAdditional classes applied to the text input group container
isDisabledbooleanAdds disabled styling and a disabled context value which text input group main hooks into for the input itself
isPlainbooleanFlag to indicate the toggle has no border or background

TextInputGroupMain

*required
NameTypeDefaultDescription
aria-labelstring'Type to filter'Accessibility label for the input
childrenReact.ReactNodeContent rendered inside the text input group main div
classNamestringAdditional classes applied to the text input group main container
hintstringSuggestion that will show up like a placeholder even with text in the input
iconReact.ReactNodeIcon to be shown on the left side of the text input group main container
innerRefReact.RefObject<any>A reference object to attach to the input box
onBlur(event?: any) => voidCallback for when focus is lost on the input field
onChange(value: string, event: React.FormEvent<HTMLInputElement>) => void(): any => undefinedCallback for when there is a change in the input field
onFocus(event?: any) => voidCallback for when the input field is focused
placeholderstringPlaceholder value for the input
type'text' | 'date' | 'datetime-local' | 'email' | 'month' | 'number' | 'password' | 'search' | 'tel' | 'time' | 'url''text'Type that the input accepts.
valuestring | numberValue for the input

TextInputGroupUtilities

*required
NameTypeDefaultDescription
childrenReact.ReactNodeContent rendered inside the text input group utilities div
classNamestringAdditional classes applied to the text input group utilities container

CSS variables

.pf-c-text-input-group--pf-c-text-input-group--BackgroundColor
#fff
.pf-c-text-input-group--pf-c-text-input-group__text--before--BorderWidth
1px
.pf-c-text-input-group--pf-c-text-input-group__text--before--BorderColor
#f0f0f0
.pf-c-text-input-group--pf-c-text-input-group__text--after--BorderBottomWidth
1px
.pf-c-text-input-group--pf-c-text-input-group__text--after--BorderBottomColor
#8a8d90
.pf-c-text-input-group--pf-c-text-input-group--hover__text--after--BorderBottomColor
#06c
.pf-c-text-input-group--pf-c-text-input-group__text--focus-within--after--BorderBottomWidth
2px
.pf-c-text-input-group--pf-c-text-input-group__text--focus-within--after--BorderBottomColor
#06c
.pf-c-text-input-group--pf-c-text-input-group__main--first-child--not--text-input--MarginLeft
0.5rem
.pf-c-text-input-group--pf-c-text-input-group__main--m-icon__text-input--PaddingLeft
2rem
.pf-c-text-input-group--pf-c-text-input-group__text-input--PaddingTop
0.375rem
.pf-c-text-input-group--pf-c-text-input-group__text-input--PaddingRight
0.5rem
.pf-c-text-input-group--pf-c-text-input-group__text-input--PaddingBottom
0.375rem
.pf-c-text-input-group--pf-c-text-input-group__text-input--PaddingLeft
0.5rem
.pf-c-text-input-group--pf-c-text-input-group__text-input--MinWidth
12ch
.pf-c-text-input-group--pf-c-text-input-group__text-input--m-hint--Color
#6a6e73
.pf-c-text-input-group--pf-c-text-input-group--placeholder--Color
#6a6e73
.pf-c-text-input-group--pf-c-text-input-group__icon--Left
0.5rem
.pf-c-text-input-group--pf-c-text-input-group__icon--Color
#6a6e73
.pf-c-text-input-group--pf-c-text-input-group__text--hover__icon--Color
#151515
.pf-c-text-input-group--pf-c-text-input-group__icon--TranslateY
-50%
.pf-c-text-input-group--pf-c-text-input-group__utilities--MarginRight
0.5rem
.pf-c-text-input-group--pf-c-text-input-group__utilities--MarginLeft
0.25rem
.pf-c-text-input-group--pf-c-text-input-group__utilities--child--MarginLeft
0.25rem
.pf-c-text-input-group--pf-c-text-input-group__utilities--c-button--PaddingRight
0.25rem
.pf-c-text-input-group--pf-c-text-input-group__utilities--c-button--PaddingLeft
0.25rem
.pf-c-text-input-group--pf-c-text-input-group--m-disabled--Color
#6a6e73
.pf-c-text-input-group--pf-c-text-input-group--m-disabled--BackgroundColor
#f0f0f0
.pf-c-text-input-group:hover--pf-c-text-input-group__text--after--BorderBottomColor
#06c
.pf-c-text-input-group.pf-m-disabled--pf-c-text-input-group__text--before--BorderWidth
0
.pf-c-text-input-group.pf-m-disabled--pf-c-text-input-group__text--after--BorderBottomWidth
0
.pf-c-text-input-group.pf-m-disabled--pf-c-text-input-group--Color
#6a6e73
.pf-c-text-input-group.pf-m-disabled--pf-c-text-input-group__icon--Color
#6a6e73
.pf-c-text-input-group.pf-m-disabled--pf-c-text-input-group--BackgroundColor
#f0f0f0
.pf-c-text-input-group.pf-m-plain--pf-c-text-input-group--BackgroundColor
transparent
.pf-c-text-input-group__main.pf-m-icon--pf-c-text-input-group__text-input--PaddingLeft
2rem
.pf-c-text-input-group__text:hover--pf-c-text-input-group__icon--Color
#151515
.pf-c-text-input-group__text:focus-within--pf-c-text-input-group__text--after--BorderBottomWidth
2px
.pf-c-text-input-group__text:focus-within--pf-c-text-input-group__text--after--BorderBottomColor
#06c
.pf-c-text-input-group__utilities .pf-c-button--pf-c-button--PaddingRight
0.25rem
.pf-c-text-input-group__utilities .pf-c-button--pf-c-button--PaddingLeft
0.25rem

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