Skip to content
PatternFly

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.

Examples

Basic

Disabled

Utilities and icon with placeholder text

Filters

  • Chip one
  • Chip two
  • Chip three
  • Chip four
  • Chip five
  • Chip six

Filters expanded

  • Chip one
  • Chip two
  • Chip three
  • Chip four
  • Chip five
  • Chip six
  • Chip seven
  • Chip eight
  • Chip nine
  • Chip ten
  • Chip eleven
  • Chip twelve
  • Chip thirteen
  • Chip fourteen

Autocomplete last option hint

Search input group

Search input group, no match

Search input group, match with result count

3

Search input group, match with navigable options

1 / 3

Search input group, expandable

Collapsed




Expanded


Search input group, with submit button

Search input group, advanced search expanded

Search input group, autocomplete

Search input group, autocomplete last option hint

Search input group, advanced search expanded with autocomplete

CSS variables

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

View source on GitHub
Red Hat
Copyright © 2014-2024 Red Hat, Inc.
Privacy statementTerms of useAll policies and guidelines