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. Learn more about Beta components here.

Examples

Basic

Disabled

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--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__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__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