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