Skip to content
Patternfly Logo

Text input group

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.

Examples

Basic

Utilities and icon

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

CSS variables

.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__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--m-icon__text-input--PaddingLeft
2rem
.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__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:hover--pf-c-text-input-group__text--after--BorderBottomColor
#06c
.pf-c-text-input-group.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