Text input group

HTML

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 about the process, visit our about page or our Beta components page on GitHub.

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

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

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


	.pf-c-text-input-group	--pf-c-text-input-group--BackgroundColor	#fff
--pf-c-text-input-group--BackgroundColor --pf-global--BackgroundColor--100 $pf-global--BackgroundColor--100 $pf-color-white #fff
	.pf-c-text-input-group	--pf-c-text-input-group__text--before--BorderWidth	1px
--pf-c-text-input-group__text--before--BorderWidth --pf-global--BorderWidth--sm $pf-global--BorderWidth--sm 1px
	.pf-c-text-input-group	--pf-c-text-input-group__text--before--BorderColor	#f0f0f0
--pf-c-text-input-group__text--before--BorderColor --pf-global--BorderColor--300 $pf-global--BorderColor--300 $pf-color-black-200 #f0f0f0
	.pf-c-text-input-group	--pf-c-text-input-group__text--after--BorderBottomWidth	1px
--pf-c-text-input-group__text--after--BorderBottomWidth --pf-global--BorderWidth--sm $pf-global--BorderWidth--sm 1px
	.pf-c-text-input-group	--pf-c-text-input-group__text--after--BorderBottomColor	#8a8d90
--pf-c-text-input-group__text--after--BorderBottomColor --pf-global--BorderColor--200 $pf-global--BorderColor--200 $pf-color-black-500 #8a8d90
	.pf-c-text-input-group	--pf-c-text-input-group--hover__text--after--BorderBottomColor	#06c
--pf-c-text-input-group--hover__text--after--BorderBottomColor --pf-global--primary-color--100 $pf-global--primary-color--100 $pf-color-blue-400 #06c
	.pf-c-text-input-group	--pf-c-text-input-group__text--focus-within--after--BorderBottomWidth	2px
--pf-c-text-input-group__text--focus-within--after--BorderBottomWidth --pf-global--BorderWidth--md $pf-global--BorderWidth--md 2px
	.pf-c-text-input-group	--pf-c-text-input-group__text--focus-within--after--BorderBottomColor	#06c
--pf-c-text-input-group__text--focus-within--after--BorderBottomColor --pf-global--primary-color--100 $pf-global--primary-color--100 $pf-color-blue-400 #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__main--first-child--not--text-input--MarginLeft --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-text-input-group	--pf-c-text-input-group__main--m-icon__text-input--PaddingLeft	2rem
--pf-c-text-input-group__main--m-icon__text-input--PaddingLeft --pf-global--spacer--xl $pf-global--spacer--xl pf-size-prem(32px) 2rem
	.pf-c-text-input-group	--pf-c-text-input-group__main--RowGap	0.25rem
--pf-c-text-input-group__main--RowGap --pf-global--spacer--xs $pf-global--spacer--xs pf-size-prem(4px) 0.25rem
	.pf-c-text-input-group	--pf-c-text-input-group__main--ColumnGap	0.5rem
--pf-c-text-input-group__main--ColumnGap --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-text-input-group	--pf-c-text-input-group--c-chip-group__main--PaddingTop	0.25rem
--pf-c-text-input-group--c-chip-group__main--PaddingTop --pf-global--spacer--xs $pf-global--spacer--xs pf-size-prem(4px) 0.25rem
	.pf-c-text-input-group	--pf-c-text-input-group--c-chip-group__main--PaddingRight	0.25rem
--pf-c-text-input-group--c-chip-group__main--PaddingRight --pf-global--spacer--xs $pf-global--spacer--xs pf-size-prem(4px) 0.25rem
	.pf-c-text-input-group	--pf-c-text-input-group--c-chip-group__main--PaddingBottom	0.25rem
--pf-c-text-input-group--c-chip-group__main--PaddingBottom --pf-global--spacer--xs $pf-global--spacer--xs pf-size-prem(4px) 0.25rem
	.pf-c-text-input-group	--pf-c-text-input-group__text-input--PaddingTop	0.375rem
--pf-c-text-input-group__text-input--PaddingTop --pf-global--spacer--form-element $pf-global--spacer--form-element pf-size-prem(6px) 0.375rem
	.pf-c-text-input-group	--pf-c-text-input-group__text-input--PaddingRight	0.5rem
--pf-c-text-input-group__text-input--PaddingRight --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-text-input-group	--pf-c-text-input-group__text-input--PaddingBottom	0.375rem
--pf-c-text-input-group__text-input--PaddingBottom --pf-global--spacer--form-element $pf-global--spacer--form-element pf-size-prem(6px) 0.375rem
	.pf-c-text-input-group	--pf-c-text-input-group__text-input--PaddingLeft	0.5rem
--pf-c-text-input-group__text-input--PaddingLeft --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 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__text-input--m-hint--Color --pf-global--Color--dark-200 $pf-global--Color--dark-200 $pf-color-black-600 #6a6e73
	.pf-c-text-input-group	--pf-c-text-input-group--placeholder--Color	#6a6e73
--pf-c-text-input-group--placeholder--Color --pf-global--Color--dark-200 $pf-global--Color--dark-200 $pf-color-black-600 #6a6e73
	.pf-c-text-input-group	--pf-c-text-input-group__icon--Left	0.5rem
--pf-c-text-input-group__icon--Left --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-text-input-group	--pf-c-text-input-group__icon--Color	#6a6e73
--pf-c-text-input-group__icon--Color --pf-global--Color--200 $pf-global--Color--200 $pf-color-black-600 #6a6e73
	.pf-c-text-input-group	--pf-c-text-input-group__text--hover__icon--Color	#151515
--pf-c-text-input-group__text--hover__icon--Color --pf-global--Color--100 $pf-global--Color--100 $pf-color-black-900 #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__utilities--MarginRight --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-text-input-group	--pf-c-text-input-group__utilities--MarginLeft	0.25rem
--pf-c-text-input-group__utilities--MarginLeft --pf-global--spacer--xs $pf-global--spacer--xs pf-size-prem(4px) 0.25rem
	.pf-c-text-input-group	--pf-c-text-input-group__utilities--child--MarginLeft	0.25rem
--pf-c-text-input-group__utilities--child--MarginLeft --pf-global--spacer--xs $pf-global--spacer--xs pf-size-prem(4px) 0.25rem
	.pf-c-text-input-group	--pf-c-text-input-group__utilities--c-button--PaddingRight	0.25rem
--pf-c-text-input-group__utilities--c-button--PaddingRight --pf-global--spacer--xs $pf-global--spacer--xs pf-size-prem(4px) 0.25rem
	.pf-c-text-input-group	--pf-c-text-input-group__utilities--c-button--PaddingLeft	0.25rem
--pf-c-text-input-group__utilities--c-button--PaddingLeft --pf-global--spacer--xs $pf-global--spacer--xs pf-size-prem(4px) 0.25rem
	.pf-c-text-input-group	--pf-c-text-input-group--m-disabled--Color	#6a6e73
--pf-c-text-input-group--m-disabled--Color --pf-global--disabled-color--100 $pf-global--disabled-color--100 $pf-color-black-600 #6a6e73
	.pf-c-text-input-group	--pf-c-text-input-group--m-disabled--BackgroundColor	#f0f0f0
--pf-c-text-input-group--m-disabled--BackgroundColor --pf-global--disabled-color--300 $pf-global--disabled-color--300 $pf-color-black-200 #f0f0f0
	.pf-c-text-input-group:hover	--pf-c-text-input-group__text--after--BorderBottomColor	#06c
--pf-c-text-input-group__text--after--BorderBottomColor --pf-c-text-input-group--hover__text--after--BorderBottomColor --pf-global--primary-color--100 $pf-global--primary-color--100 $pf-color-blue-400 #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--Color --pf-c-text-input-group--m-disabled--Color --pf-global--disabled-color--100 $pf-global--disabled-color--100 $pf-color-black-600 #6a6e73
	.pf-c-text-input-group.pf-m-disabled	--pf-c-text-input-group__icon--Color	#6a6e73
--pf-c-text-input-group__icon--Color --pf-c-text-input-group--m-disabled--Color --pf-global--disabled-color--100 $pf-global--disabled-color--100 $pf-color-black-600 #6a6e73
	.pf-c-text-input-group.pf-m-disabled	--pf-c-text-input-group--BackgroundColor	#f0f0f0
--pf-c-text-input-group--BackgroundColor --pf-c-text-input-group--m-disabled--BackgroundColor --pf-global--disabled-color--300 $pf-global--disabled-color--300 $pf-color-black-200 #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-input--PaddingLeft --pf-c-text-input-group__main--m-icon__text-input--PaddingLeft --pf-global--spacer--xl $pf-global--spacer--xl pf-size-prem(32px) 2rem
	.pf-c-text-input-group__text:hover	--pf-c-text-input-group__icon--Color	#151515
--pf-c-text-input-group__icon--Color --pf-c-text-input-group__text--hover__icon--Color --pf-global--Color--100 $pf-global--Color--100 $pf-color-black-900 #151515
	.pf-c-text-input-group__text:focus-within	--pf-c-text-input-group__text--after--BorderBottomWidth	2px
--pf-c-text-input-group__text--after--BorderBottomWidth --pf-c-text-input-group__text--focus-within--after--BorderBottomWidth --pf-global--BorderWidth--md $pf-global--BorderWidth--md 2px
	.pf-c-text-input-group__text:focus-within	--pf-c-text-input-group__text--after--BorderBottomColor	#06c
--pf-c-text-input-group__text--after--BorderBottomColor --pf-c-text-input-group__text--focus-within--after--BorderBottomColor --pf-global--primary-color--100 $pf-global--primary-color--100 $pf-color-blue-400 #06c
	.pf-c-text-input-group__utilities .pf-c-button	--pf-c-button--PaddingRight	0.25rem
--pf-c-button--PaddingRight --pf-c-text-input-group__utilities--c-button--PaddingRight --pf-global--spacer--xs $pf-global--spacer--xs pf-size-prem(4px) 0.25rem
	.pf-c-text-input-group__utilities .pf-c-button	--pf-c-button--PaddingLeft	0.25rem
--pf-c-button--PaddingLeft --pf-c-text-input-group__utilities--c-button--PaddingLeft --pf-global--spacer--xs $pf-global--spacer--xs pf-size-prem(4px) 0.25rem

View source on GitHub