Examples
Props
FormSelect
| Name | Type | Default | Description |
|---|---|---|---|
| childrenrequired | React.ReactNode | content rendered inside the FormSelect | |
| aria-label | string | Custom flag to show that the FormSelect requires an associated id or aria-label. | |
| className | string | '' | additional classes added to the FormSelect control |
| isDisabled | boolean | false | Flag indicating the FormSelect is disabled |
| isRequired | boolean | false | Sets the FormSelect required. |
| onBlur | (event: React.FormEvent<HTMLSelectElement>) => void | (): any => undefined | Optional callback for updating when selection loses focus |
| onChange | (event: React.FormEvent<HTMLSelectElement>, value: string) => void | (): any => undefined | Optional callback for updating when selection changes |
| onFocus | (event: React.FormEvent<HTMLSelectElement>) => void | (): any => undefined | Optional callback for updating when selection gets focus |
| ouiaId | number | string | Value to overwrite the randomly generated data-ouia-component-id. | |
| ouiaSafe | boolean | true | Set the value of data-ouia-safe. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false. |
| validated | 'success' | 'warning' | 'error' | 'default' | 'default' | Value to indicate if the select is modified to show that validation state. If set to success, select will be modified to indicate valid state. If set to error, select will be modified to indicate error state. |
| value | any | '' | value of selected option |
FormSelectOption
| Name | Type | Default | Description |
|---|---|---|---|
| labelrequired | string | the label for the option | |
| className | string | '' | additional classes added to the Select Option |
| isDisabled | boolean | false | flag indicating if the option is disabled |
| isPlaceholder | boolean | false | flag indicating if option will have placeholder styling applied when selected * |
| value | any | '' | the value for the option |
FormSelectOptionGroup
| Name | Type | Default | Description |
|---|---|---|---|
| labelrequired | string | the label for the option | |
| children | React.ReactNode | null | content rendered inside the Select Option Group |
| className | string | '' | additional classes added to the Select Option |
| isDisabled | boolean | false | flag indicating if the Option Group is disabled |
CSS variables
| Expand or collapse column | Selector | Variable | Value | |
|---|---|---|---|---|
| .pf-v5-c-form-control | --pf-v5-global--Color--100 | #151515 | ||
--pf-v5-global--Color--100 --pf-v5-global--Color--dark-100 $pf-v5-global--Color--dark-100 $pf-v5-color-black-900 #151515 | ||||
| .pf-v5-c-form-control | --pf-v5-global--Color--200 | #6a6e73 | ||
--pf-v5-global--Color--200 --pf-v5-global--Color--dark-200 $pf-v5-global--Color--dark-200 $pf-v5-color-black-600 #6a6e73 | ||||
| .pf-v5-c-form-control | --pf-v5-global--BorderColor--100 | #d2d2d2 | ||
--pf-v5-global--BorderColor--100 --pf-v5-global--BorderColor--dark-100 $pf-v5-global--BorderColor--dark-100 $pf-v5-color-black-300 #d2d2d2 | ||||
| .pf-v5-c-form-control | --pf-v5-global--primary-color--100 | #06c | ||
--pf-v5-global--primary-color--100 --pf-v5-global--primary-color--dark-100 $pf-v5-global--primary-color--dark-100 $pf-v5-color-blue-400 #06c | ||||
| .pf-v5-c-form-control | --pf-v5-global--link--Color | #06c | ||
--pf-v5-global--link--Color --pf-v5-global--link--Color--dark $pf-v5-global--link--Color--dark $pf-v5-global--primary-color--100 $pf-v5-color-blue-400 #06c | ||||
| .pf-v5-c-form-control | --pf-v5-global--link--Color--hover | #004080 | ||
--pf-v5-global--link--Color--hover --pf-v5-global--link--Color--dark--hover $pf-v5-global--link--Color--dark--hover $pf-v5-global--primary-color--200 $pf-v5-color-blue-500 #004080 | ||||
| .pf-v5-c-form-control | --pf-v5-global--BackgroundColor--100 | #fff | ||
--pf-v5-global--BackgroundColor--100 --pf-v5-global--BackgroundColor--light-100 $pf-v5-global--BackgroundColor--light-100 $pf-v5-color-white #fff | ||||
| .pf-v5-c-form-control | --pf-v5-global--icon--Color--light | #6a6e73 | ||
--pf-v5-global--icon--Color--light --pf-v5-global--icon--Color--light--dark $pf-v5-global--icon--Color--light--dark $pf-v5-color-black-600 #6a6e73 | ||||
| .pf-v5-c-form-control | --pf-v5-global--icon--Color--dark | #151515 | ||
--pf-v5-global--icon--Color--dark --pf-v5-global--icon--Color--dark--dark $pf-v5-global--icon--Color--dark--dark $pf-v5-color-black-900 #151515 | ||||
| .pf-v5-c-form-control | --pf-v5-c-form-control--ColumnGap | 0.5rem | ||
--pf-v5-c-form-control--ColumnGap --pf-v5-global--spacer--sm $pf-v5-global--spacer--sm pf-size-prem(8px) 0.5rem | ||||
| .pf-v5-c-form-control | --pf-v5-c-form-control--Color | #151515 | ||
--pf-v5-c-form-control--Color --pf-v5-global--Color--100 $pf-v5-global--Color--100 $pf-v5-color-black-900 #151515 | ||||
| .pf-v5-c-form-control | --pf-v5-c-form-control--FontSize | 1rem | ||
--pf-v5-c-form-control--FontSize --pf-v5-global--FontSize--md $pf-v5-global--FontSize--md pf-font-prem(16px) 1rem | ||||
| .pf-v5-c-form-control | --pf-v5-c-form-control--LineHeight | 1.5 | ||
--pf-v5-c-form-control--LineHeight --pf-v5-global--LineHeight--md $pf-v5-global--LineHeight--md 1.5 | ||||
| .pf-v5-c-form-control | --pf-v5-c-form-control--Resize | none | ||
| .pf-v5-c-form-control | --pf-v5-c-form-control--OutlineOffset | -2px | ||
| .pf-v5-c-form-control | --pf-v5-c-form-control--before--BorderTopWidth | 1px | ||
--pf-v5-c-form-control--before--BorderTopWidth --pf-v5-global--BorderWidth--sm $pf-v5-global--BorderWidth--sm 1px | ||||
| .pf-v5-c-form-control | --pf-v5-c-form-control--before--BorderRightWidth | 1px | ||
--pf-v5-c-form-control--before--BorderRightWidth --pf-v5-global--BorderWidth--sm $pf-v5-global--BorderWidth--sm 1px | ||||
| .pf-v5-c-form-control | --pf-v5-c-form-control--before--BorderBottomWidth | 0 | ||
| .pf-v5-c-form-control | --pf-v5-c-form-control--before--BorderLeftWidth | 1px | ||
--pf-v5-c-form-control--before--BorderLeftWidth --pf-v5-global--BorderWidth--sm $pf-v5-global--BorderWidth--sm 1px | ||||
| .pf-v5-c-form-control | --pf-v5-c-form-control--before--BorderTopColor | #f0f0f0 | ||
--pf-v5-c-form-control--before--BorderTopColor --pf-v5-global--BorderColor--300 $pf-v5-global--BorderColor--300 $pf-v5-color-black-200 #f0f0f0 | ||||
| .pf-v5-c-form-control | --pf-v5-c-form-control--before--BorderRightColor | #f0f0f0 | ||
--pf-v5-c-form-control--before--BorderRightColor --pf-v5-global--BorderColor--300 $pf-v5-global--BorderColor--300 $pf-v5-color-black-200 #f0f0f0 | ||||
| .pf-v5-c-form-control | --pf-v5-c-form-control--before--BorderBottomColor | transparent | ||
| .pf-v5-c-form-control | --pf-v5-c-form-control--before--BorderLeftColor | #f0f0f0 | ||
--pf-v5-c-form-control--before--BorderLeftColor --pf-v5-global--BorderColor--300 $pf-v5-global--BorderColor--300 $pf-v5-color-black-200 #f0f0f0 | ||||
| .pf-v5-c-form-control | --pf-v5-c-form-control--after--BorderBottomWidth | 1px | ||
--pf-v5-c-form-control--after--BorderBottomWidth --pf-v5-global--BorderWidth--sm $pf-v5-global--BorderWidth--sm 1px | ||||
| .pf-v5-c-form-control | --pf-v5-c-form-control--after--BorderBottomColor | #8a8d90 | ||
--pf-v5-c-form-control--after--BorderBottomColor --pf-v5-global--BorderColor--200 $pf-v5-global--BorderColor--200 $pf-v5-color-black-500 #8a8d90 | ||||
| .pf-v5-c-form-control | --pf-v5-c-form-control--BackgroundColor | #fff | ||
--pf-v5-c-form-control--BackgroundColor --pf-v5-global--BackgroundColor--100 $pf-v5-global--BackgroundColor--100 $pf-v5-color-white #fff | ||||
| .pf-v5-c-form-control | --pf-v5-c-form-control--Width | 100% | ||
| .pf-v5-c-form-control | --pf-v5-c-form-control--inset--base | 0.5rem | ||
--pf-v5-c-form-control--inset--base --pf-v5-global--spacer--sm $pf-v5-global--spacer--sm pf-size-prem(8px) 0.5rem | ||||
| .pf-v5-c-form-control | --pf-v5-c-form-control--PaddingTop | 0.375rem | ||
--pf-v5-c-form-control--PaddingTop --pf-v5-global--spacer--form-element $pf-v5-global--spacer--form-element pf-size-prem(6px) 0.375rem | ||||
| .pf-v5-c-form-control | --pf-v5-c-form-control--PaddingBottom | 0.375rem | ||
--pf-v5-c-form-control--PaddingBottom --pf-v5-global--spacer--form-element $pf-v5-global--spacer--form-element pf-size-prem(6px) 0.375rem | ||||
| .pf-v5-c-form-control | --pf-v5-c-form-control--PaddingRight | 0.5rem | ||
--pf-v5-c-form-control--PaddingRight --pf-v5-c-form-control--inset--base --pf-v5-global--spacer--sm $pf-v5-global--spacer--sm pf-size-prem(8px) 0.5rem | ||||
| .pf-v5-c-form-control | --pf-v5-c-form-control--PaddingLeft | 0.5rem | ||
--pf-v5-c-form-control--PaddingLeft --pf-v5-c-form-control--inset--base --pf-v5-global--spacer--sm $pf-v5-global--spacer--sm pf-size-prem(8px) 0.5rem | ||||
| .pf-v5-c-form-control | --pf-v5-c-form-control--hover--after--BorderBottomColor | #06c | ||
--pf-v5-c-form-control--hover--after--BorderBottomColor --pf-v5-global--primary-color--100 $pf-v5-global--primary-color--100 $pf-v5-color-blue-400 #06c | ||||
| .pf-v5-c-form-control | --pf-v5-c-form-control--focus--after--BorderBottomWidth | 2px | ||
--pf-v5-c-form-control--focus--after--BorderBottomWidth --pf-v5-global--BorderWidth--md $pf-v5-global--BorderWidth--md 2px | ||||
| .pf-v5-c-form-control | --pf-v5-c-form-control--focus--after--BorderBottomColor | #06c | ||
--pf-v5-c-form-control--focus--after--BorderBottomColor --pf-v5-global--primary-color--100 $pf-v5-global--primary-color--100 $pf-v5-color-blue-400 #06c | ||||
| .pf-v5-c-form-control | --pf-v5-c-form-control--m-expanded--after--BorderBottomWidth | 2px | ||
--pf-v5-c-form-control--m-expanded--after--BorderBottomWidth --pf-v5-global--BorderWidth--md $pf-v5-global--BorderWidth--md 2px | ||||
| .pf-v5-c-form-control | --pf-v5-c-form-control--m-expanded--after--BorderBottomColor | #06c | ||
--pf-v5-c-form-control--m-expanded--after--BorderBottomColor --pf-v5-global--primary-color--100 $pf-v5-global--primary-color--100 $pf-v5-color-blue-400 #06c | ||||
| .pf-v5-c-form-control | --pf-v5-c-form-control--m-placeholder--Color | #6a6e73 | ||
--pf-v5-c-form-control--m-placeholder--Color --pf-v5-global--Color--dark-200 $pf-v5-global--Color--dark-200 $pf-v5-color-black-600 #6a6e73 | ||||
| .pf-v5-c-form-control | --pf-v5-c-form-control--m-placeholder--child--Color | #151515 | ||
--pf-v5-c-form-control--m-placeholder--child--Color --pf-v5-global--Color--100 $pf-v5-global--Color--100 $pf-v5-color-black-900 #151515 | ||||
| .pf-v5-c-form-control | --pf-v5-c-form-control--m-disabled--Color | #6a6e73 | ||
--pf-v5-c-form-control--m-disabled--Color --pf-v5-global--disabled-color--100 $pf-v5-global--disabled-color--100 $pf-v5-color-black-600 #6a6e73 | ||||
| .pf-v5-c-form-control | --pf-v5-c-form-control--m-disabled--BackgroundColor | #f0f0f0 | ||
--pf-v5-c-form-control--m-disabled--BackgroundColor --pf-v5-global--disabled-color--300 $pf-v5-global--disabled-color--300 $pf-v5-color-black-200 #f0f0f0 | ||||
| .pf-v5-c-form-control | --pf-v5-c-form-control--m-disabled--after--BorderColor | transparent | ||
| .pf-v5-c-form-control | --pf-v5-c-form-control--m-readonly--BackgroundColor | #f0f0f0 | ||
--pf-v5-c-form-control--m-readonly--BackgroundColor --pf-v5-global--disabled-color--300 $pf-v5-global--disabled-color--300 $pf-v5-color-black-200 #f0f0f0 | ||||
| .pf-v5-c-form-control | --pf-v5-c-form-control--m-readonly--hover--after--BorderBottomColor | #8a8d90 | ||
--pf-v5-c-form-control--m-readonly--hover--after--BorderBottomColor --pf-v5-global--BorderColor--200 $pf-v5-global--BorderColor--200 $pf-v5-color-black-500 #8a8d90 | ||||
| .pf-v5-c-form-control | --pf-v5-c-form-control--m-readonly--focus--after--BorderBottomWidth | 1px | ||
--pf-v5-c-form-control--m-readonly--focus--after--BorderBottomWidth --pf-v5-global--BorderWidth--sm $pf-v5-global--BorderWidth--sm 1px | ||||
| .pf-v5-c-form-control | --pf-v5-c-form-control--m-readonly--focus--after--BorderBottomColor | #8a8d90 | ||
--pf-v5-c-form-control--m-readonly--focus--after--BorderBottomColor --pf-v5-global--BorderColor--200 $pf-v5-global--BorderColor--200 $pf-v5-color-black-500 #8a8d90 | ||||
| .pf-v5-c-form-control | --pf-v5-c-form-control--m-readonly--m-plain--BackgroundColor | transparent | ||
| .pf-v5-c-form-control | --pf-v5-c-form-control--m-readonly--m-plain--inset--base | 0 | ||
| .pf-v5-c-form-control | --pf-v5-c-form-control--m-readonly--m-plain--OutlineOffset | 0 | ||
| .pf-v5-c-form-control | --pf-v5-c-form-control--m-success--after--BorderBottomWidth | 2px | ||
--pf-v5-c-form-control--m-success--after--BorderBottomWidth --pf-v5-global--BorderWidth--md $pf-v5-global--BorderWidth--md 2px | ||||
| .pf-v5-c-form-control | --pf-v5-c-form-control--m-success--after--BorderBottomColor | #3e8635 | ||
--pf-v5-c-form-control--m-success--after--BorderBottomColor --pf-v5-global--success-color--100 $pf-v5-global--success-color--100 $pf-v5-color-green-500 #3e8635 | ||||
| .pf-v5-c-form-control | --pf-v5-c-form-control--m-success--PaddingRight | 2rem | ||
--pf-v5-c-form-control--m-success--PaddingRight --pf-v5-global--spacer--xl $pf-v5-global--spacer--xl pf-size-prem(32px) 2rem | ||||
| .pf-v5-c-form-control | --pf-v5-c-form-control--m-warning--after--BorderBottomWidth | 2px | ||
--pf-v5-c-form-control--m-warning--after--BorderBottomWidth --pf-v5-global--BorderWidth--md $pf-v5-global--BorderWidth--md 2px | ||||
| .pf-v5-c-form-control | --pf-v5-c-form-control--m-warning--after--BorderBottomColor | #f0ab00 | ||
--pf-v5-c-form-control--m-warning--after--BorderBottomColor --pf-v5-global--warning-color--100 $pf-v5-global--warning-color--100 $pf-v5-color-gold-400 #f0ab00 | ||||
| .pf-v5-c-form-control | --pf-v5-c-form-control--m-warning--PaddingRight | 2rem | ||
--pf-v5-c-form-control--m-warning--PaddingRight --pf-v5-global--spacer--xl $pf-v5-global--spacer--xl pf-size-prem(32px) 2rem | ||||
| .pf-v5-c-form-control | --pf-v5-c-form-control--m-error--after--BorderBottomWidth | 2px | ||
--pf-v5-c-form-control--m-error--after--BorderBottomWidth --pf-v5-global--BorderWidth--md $pf-v5-global--BorderWidth--md 2px | ||||
| .pf-v5-c-form-control | --pf-v5-c-form-control--m-error--after--BorderBottomColor | #c9190b | ||
--pf-v5-c-form-control--m-error--after--BorderBottomColor --pf-v5-global--danger-color--100 $pf-v5-global--danger-color--100 $pf-v5-color-red-100 #c9190b | ||||
| .pf-v5-c-form-control | --pf-v5-c-form-control--m-error--PaddingRight | 2rem | ||
--pf-v5-c-form-control--m-error--PaddingRight --pf-v5-global--spacer--xl $pf-v5-global--spacer--xl pf-size-prem(32px) 2rem | ||||
| .pf-v5-c-form-control | --pf-v5-c-form-control--m-error--icon--width | 1rem | ||
--pf-v5-c-form-control--m-error--icon--width --pf-v5-c-form-control--FontSize --pf-v5-global--FontSize--md $pf-v5-global--FontSize--md pf-font-prem(16px) 1rem | ||||
| .pf-v5-c-form-control | --pf-v5-c-form-control--m-icon--PaddingRight | calc(0.5rem + 1rem + 0.5rem) | ||
--pf-v5-c-form-control--m-icon--PaddingRight calc(--pf-v5-c-form-control--inset--base + --pf-v5-c-form-control--m-icon--icon--width + --pf-v5-c-form-control--m-icon--icon--spacer) calc(--pf-v5-global--spacer--sm + --pf-v5-c-form-control--FontSize + --pf-v5-global--spacer--sm) calc($pf-v5-global--spacer--sm + --pf-v5-global--FontSize--md + $pf-v5-global--spacer--sm) calc($pf-v5-global--spacer--sm + $pf-v5-global--FontSize--md + $pf-v5-global--spacer--sm) calc(pf-size-prem(8px) + pf-font-prem(16px) + pf-size-prem(8px)) calc(0.5rem + 1rem + 0.5rem) | ||||
| .pf-v5-c-form-control | --pf-v5-c-form-control--m-icon--icon--width | 1rem | ||
--pf-v5-c-form-control--m-icon--icon--width --pf-v5-c-form-control--FontSize --pf-v5-global--FontSize--md $pf-v5-global--FontSize--md pf-font-prem(16px) 1rem | ||||
| .pf-v5-c-form-control | --pf-v5-c-form-control--m-icon--icon--spacer | 0.5rem | ||
--pf-v5-c-form-control--m-icon--icon--spacer --pf-v5-global--spacer--sm $pf-v5-global--spacer--sm pf-size-prem(8px) 0.5rem | ||||
| .pf-v5-c-form-control | --pf-v5-c-form-control--m-icon--icon--PaddingRight | calc(0.5rem + 1rem + 0.5rem + 1rem + 0.5rem) | ||
--pf-v5-c-form-control--m-icon--icon--PaddingRight calc(--pf-v5-c-form-control--inset--base + --pf-v5-c-form-control--m-error--icon--width + --pf-v5-c-form-control--m-icon--icon--spacer + --pf-v5-c-form-control--m-icon--icon--width + --pf-v5-c-form-control--m-icon--icon--spacer) calc(--pf-v5-global--spacer--sm + --pf-v5-c-form-control--FontSize + --pf-v5-global--spacer--sm + --pf-v5-c-form-control--FontSize + --pf-v5-global--spacer--sm) calc($pf-v5-global--spacer--sm + --pf-v5-global--FontSize--md + $pf-v5-global--spacer--sm + --pf-v5-global--FontSize--md + $pf-v5-global--spacer--sm) calc($pf-v5-global--spacer--sm + $pf-v5-global--FontSize--md + $pf-v5-global--spacer--sm + $pf-v5-global--FontSize--md + $pf-v5-global--spacer--sm) calc(pf-size-prem(8px) + pf-font-prem(16px) + pf-size-prem(8px) + pf-font-prem(16px) + pf-size-prem(8px)) calc(0.5rem + 1rem + 0.5rem + 1rem + 0.5rem) | ||||
| .pf-v5-c-form-control | --pf-v5-c-form-control__select--PaddingRight | 1.5rem | ||
--pf-v5-c-form-control__select--PaddingRight --pf-v5-global--spacer--lg $pf-v5-global--spacer--lg pf-size-prem(24px) 1.5rem | ||||
| .pf-v5-c-form-control | --pf-v5-c-form-control__select--PaddingLeft | 0.5rem | ||
--pf-v5-c-form-control__select--PaddingLeft --pf-v5-global--spacer--sm $pf-v5-global--spacer--sm pf-size-prem(8px) 0.5rem | ||||
| .pf-v5-c-form-control | --pf-v5-c-form-control__select--m-success--m-status--PaddingRight | 4rem | ||
--pf-v5-c-form-control__select--m-success--m-status--PaddingRight --pf-v5-global--spacer--3xl $pf-v5-global--spacer--3xl pf-size-prem(64px) 4rem | ||||
| .pf-v5-c-form-control | --pf-v5-c-form-control__select--m-warning--m-status--PaddingRight | 4rem | ||
--pf-v5-c-form-control__select--m-warning--m-status--PaddingRight --pf-v5-global--spacer--3xl $pf-v5-global--spacer--3xl pf-size-prem(64px) 4rem | ||||
| .pf-v5-c-form-control | --pf-v5-c-form-control__select--m-error--m-status--PaddingRight | 4rem | ||
--pf-v5-c-form-control__select--m-error--m-status--PaddingRight --pf-v5-global--spacer--3xl $pf-v5-global--spacer--3xl pf-size-prem(64px) 4rem | ||||
| .pf-v5-c-form-control | --pf-v5-c-form-control--textarea--Width | 100% | ||
--pf-v5-c-form-control--textarea--Width --pf-v5-c-form-control--Width 100% | ||||
| .pf-v5-c-form-control | --pf-v5-c-form-control--textarea--Height | auto | ||
| .pf-v5-c-form-control | --pf-v5-c-form-control__icon--PaddingTop | 0.375rem | ||
--pf-v5-c-form-control__icon--PaddingTop --pf-v5-global--spacer--form-element $pf-v5-global--spacer--form-element pf-size-prem(6px) 0.375rem | ||||
| .pf-v5-c-form-control | --pf-v5-c-form-control__icon--Color | #6a6e73 | ||
--pf-v5-c-form-control__icon--Color --pf-v5-global--icon--Color--light $pf-v5-global--icon--Color--light $pf-v5-color-black-600 #6a6e73 | ||||
| .pf-v5-c-form-control | --pf-v5-c-form-control__icon--m-status--Color | #6a6e73 | ||
--pf-v5-c-form-control__icon--m-status--Color --pf-v5-global--icon--Color--light $pf-v5-global--icon--Color--light $pf-v5-color-black-600 #6a6e73 | ||||
| .pf-v5-c-form-control | --pf-v5-c-form-control--m-success__icon--m-status--Color | #3e8635 | ||
--pf-v5-c-form-control--m-success__icon--m-status--Color --pf-v5-global--success-color--100 $pf-v5-global--success-color--100 $pf-v5-color-green-500 #3e8635 | ||||
| .pf-v5-c-form-control | --pf-v5-c-form-control--m-warning__icon--m-status--Color | #f0ab00 | ||
--pf-v5-c-form-control--m-warning__icon--m-status--Color --pf-v5-global--warning-color--100 $pf-v5-global--warning-color--100 $pf-v5-color-gold-400 #f0ab00 | ||||
| .pf-v5-c-form-control | --pf-v5-c-form-control--m-error__icon--m-status--Color | #c9190b | ||
--pf-v5-c-form-control--m-error__icon--m-status--Color --pf-v5-global--danger-color--100 $pf-v5-global--danger-color--100 $pf-v5-color-red-100 #c9190b | ||||
| .pf-v5-c-form-control | --pf-v5-c-form-control__utilities--Gap | 0.5rem | ||
--pf-v5-c-form-control__utilities--Gap --pf-v5-global--spacer--sm $pf-v5-global--spacer--sm pf-size-prem(8px) 0.5rem | ||||
| .pf-v5-c-form-control | --pf-v5-c-form-control__utilities--PaddingTop | 0.5rem | ||
--pf-v5-c-form-control__utilities--PaddingTop --pf-v5-c-form-control--inset--base --pf-v5-global--spacer--sm $pf-v5-global--spacer--sm pf-size-prem(8px) 0.5rem | ||||
| .pf-v5-c-form-control | --pf-v5-c-form-control__utilities--PaddingRight | 0.5rem | ||
--pf-v5-c-form-control__utilities--PaddingRight --pf-v5-c-form-control--inset--base --pf-v5-global--spacer--sm $pf-v5-global--spacer--sm pf-size-prem(8px) 0.5rem | ||||
| .pf-v5-c-form-control | --pf-v5-c-form-control__toggle-icon--PaddingTop | 0.375rem | ||
--pf-v5-c-form-control__toggle-icon--PaddingTop --pf-v5-global--spacer--form-element $pf-v5-global--spacer--form-element pf-size-prem(6px) 0.375rem | ||||
| .pf-v5-c-form-control | --pf-v5-c-form-control__toggle-icon--PaddingRight | 0.5rem | ||
--pf-v5-c-form-control__toggle-icon--PaddingRight --pf-v5-c-form-control--inset--base --pf-v5-global--spacer--sm $pf-v5-global--spacer--sm pf-size-prem(8px) 0.5rem | ||||
| .pf-v5-c-form-control | --pf-v5-c-form-control__toggle-icon--PaddingLeft | 0.5rem | ||
--pf-v5-c-form-control__toggle-icon--PaddingLeft --pf-v5-c-form-control--inset--base --pf-v5-global--spacer--sm $pf-v5-global--spacer--sm pf-size-prem(8px) 0.5rem | ||||
| .pf-v5-c-form-control | --pf-v5-c-form-control__toggle-icon--Color | #151515 | ||
--pf-v5-c-form-control__toggle-icon--Color --pf-v5-global--Color--100 $pf-v5-global--Color--100 $pf-v5-color-black-900 #151515 | ||||
| .pf-v5-c-form-control | --pf-v5-c-form-control--m-disabled__toggle-icon--Color | #6a6e73 | ||
--pf-v5-c-form-control--m-disabled__toggle-icon--Color --pf-v5-global--disabled-color--100 $pf-v5-global--disabled-color--100 $pf-v5-color-black-600 #6a6e73 | ||||
| .pf-v5-c-form-control.pf-m-readonly | --pf-v5-c-form-control--BackgroundColor | #f0f0f0 | ||
--pf-v5-c-form-control--BackgroundColor --pf-v5-c-form-control--m-readonly--BackgroundColor --pf-v5-global--disabled-color--300 $pf-v5-global--disabled-color--300 $pf-v5-color-black-200 #f0f0f0 | ||||
| .pf-v5-c-form-control.pf-m-readonly:not(.pf-m-success, .pf-m-warning, .pf-m-error) | --pf-v5-c-form-control--hover--after--BorderBottomColor | #8a8d90 | ||
--pf-v5-c-form-control--hover--after--BorderBottomColor --pf-v5-c-form-control--m-readonly--hover--after--BorderBottomColor --pf-v5-global--BorderColor--200 $pf-v5-global--BorderColor--200 $pf-v5-color-black-500 #8a8d90 | ||||
| .pf-v5-c-form-control.pf-m-readonly:not(.pf-m-success, .pf-m-warning, .pf-m-error) | --pf-v5-c-form-control--focus--after--BorderBottomWidth | 1px | ||
--pf-v5-c-form-control--focus--after--BorderBottomWidth --pf-v5-c-form-control--m-readonly--focus--after--BorderBottomWidth --pf-v5-global--BorderWidth--sm $pf-v5-global--BorderWidth--sm 1px | ||||
| .pf-v5-c-form-control.pf-m-readonly:not(.pf-m-success, .pf-m-warning, .pf-m-error) | --pf-v5-c-form-control--focus--after--BorderBottomColor | #8a8d90 | ||
--pf-v5-c-form-control--focus--after--BorderBottomColor --pf-v5-c-form-control--m-readonly--focus--after--BorderBottomColor --pf-v5-global--BorderColor--200 $pf-v5-global--BorderColor--200 $pf-v5-color-black-500 #8a8d90 | ||||
| .pf-v5-c-form-control.pf-m-readonly.pf-m-plain | --pf-v5-c-form-control--m-readonly--BackgroundColor | transparent | ||
--pf-v5-c-form-control--m-readonly--BackgroundColor --pf-v5-c-form-control--m-readonly--m-plain--BackgroundColor transparent | ||||
| .pf-v5-c-form-control.pf-m-readonly.pf-m-plain | --pf-v5-c-form-control--inset--base | 0 | ||
--pf-v5-c-form-control--inset--base --pf-v5-c-form-control--m-readonly--m-plain--inset--base 0 | ||||
| .pf-v5-c-form-control.pf-m-readonly.pf-m-plain | --pf-v5-c-form-control--before--BorderStyle | none | ||
| .pf-v5-c-form-control.pf-m-readonly.pf-m-plain | --pf-v5-c-form-control--after--BorderStyle | none | ||
| .pf-v5-c-form-control.pf-m-readonly.pf-m-plain | --pf-v5-c-form-control--OutlineOffset | 0 | ||
--pf-v5-c-form-control--OutlineOffset --pf-v5-c-form-control--m-readonly--m-plain--OutlineOffset 0 | ||||
| .pf-v5-c-form-control:hover | --pf-v5-c-form-control--after--BorderBottomColor | #06c | ||
--pf-v5-c-form-control--after--BorderBottomColor --pf-v5-c-form-control--hover--after--BorderBottomColor --pf-v5-global--primary-color--100 $pf-v5-global--primary-color--100 $pf-v5-color-blue-400 #06c | ||||
| .pf-v5-c-form-control:focus-within | --pf-v5-c-form-control--after--BorderBottomColor | #06c | ||
--pf-v5-c-form-control--after--BorderBottomColor --pf-v5-c-form-control--focus--after--BorderBottomColor --pf-v5-global--primary-color--100 $pf-v5-global--primary-color--100 $pf-v5-color-blue-400 #06c | ||||
| .pf-v5-c-form-control:focus-within | --pf-v5-c-form-control--after--BorderBottomWidth | 2px | ||
--pf-v5-c-form-control--after--BorderBottomWidth --pf-v5-c-form-control--focus--after--BorderBottomWidth --pf-v5-global--BorderWidth--md $pf-v5-global--BorderWidth--md 2px | ||||
| .pf-v5-c-form-control.pf-m-expanded | --pf-v5-c-form-control--after--BorderBottomColor | #06c | ||
--pf-v5-c-form-control--after--BorderBottomColor --pf-v5-c-form-control--m-expanded--after--BorderBottomColor --pf-v5-global--primary-color--100 $pf-v5-global--primary-color--100 $pf-v5-color-blue-400 #06c | ||||
| .pf-v5-c-form-control.pf-m-expanded | --pf-v5-c-form-control--after--BorderBottomWidth | 2px | ||
--pf-v5-c-form-control--after--BorderBottomWidth --pf-v5-c-form-control--m-expanded--after--BorderBottomWidth --pf-v5-global--BorderWidth--md $pf-v5-global--BorderWidth--md 2px | ||||
| .pf-v5-c-form-control.pf-m-disabled | --pf-v5-c-form-control--BackgroundColor | #f0f0f0 | ||
--pf-v5-c-form-control--BackgroundColor --pf-v5-c-form-control--m-disabled--BackgroundColor --pf-v5-global--disabled-color--300 $pf-v5-global--disabled-color--300 $pf-v5-color-black-200 #f0f0f0 | ||||
| .pf-v5-c-form-control.pf-m-disabled | --pf-v5-c-form-control--Color | #6a6e73 | ||
--pf-v5-c-form-control--Color --pf-v5-c-form-control--m-disabled--Color --pf-v5-global--disabled-color--100 $pf-v5-global--disabled-color--100 $pf-v5-color-black-600 #6a6e73 | ||||
| .pf-v5-c-form-control.pf-m-disabled | --pf-v5-c-form-control--m-placeholder--Color | #6a6e73 | ||
--pf-v5-c-form-control--m-placeholder--Color --pf-v5-c-form-control--m-disabled--Color --pf-v5-global--disabled-color--100 $pf-v5-global--disabled-color--100 $pf-v5-color-black-600 #6a6e73 | ||||
| .pf-v5-c-form-control.pf-m-disabled | --pf-v5-c-form-control__toggle-icon--Color | #6a6e73 | ||
--pf-v5-c-form-control__toggle-icon--Color --pf-v5-c-form-control--m-disabled__toggle-icon--Color --pf-v5-global--disabled-color--100 $pf-v5-global--disabled-color--100 $pf-v5-color-black-600 #6a6e73 | ||||
| .pf-v5-c-form-control.pf-m-disabled | --pf-v5-c-form-control--before--BorderStyle | none | ||
| .pf-v5-c-form-control.pf-m-disabled | --pf-v5-c-form-control--after--BorderStyle | none | ||
| .pf-v5-c-form-control.pf-m-error | --pf-v5-c-form-control--PaddingRight | 2rem | ||
--pf-v5-c-form-control--PaddingRight --pf-v5-c-form-control--m-error--PaddingRight --pf-v5-global--spacer--xl $pf-v5-global--spacer--xl pf-size-prem(32px) 2rem | ||||
| .pf-v5-c-form-control.pf-m-error | --pf-v5-c-form-control--after--BorderBottomColor | #c9190b | ||
--pf-v5-c-form-control--after--BorderBottomColor --pf-v5-c-form-control--m-error--after--BorderBottomColor --pf-v5-global--danger-color--100 $pf-v5-global--danger-color--100 $pf-v5-color-red-100 #c9190b | ||||
| .pf-v5-c-form-control.pf-m-error | --pf-v5-c-form-control__icon--m-status--Color | #c9190b | ||
--pf-v5-c-form-control__icon--m-status--Color --pf-v5-c-form-control--m-error__icon--m-status--Color --pf-v5-global--danger-color--100 $pf-v5-global--danger-color--100 $pf-v5-color-red-100 #c9190b | ||||
| .pf-v5-c-form-control.pf-m-error | --pf-v5-c-form-control__select--PaddingRight | 4rem | ||
--pf-v5-c-form-control__select--PaddingRight --pf-v5-c-form-control__select--m-error--m-status--PaddingRight --pf-v5-global--spacer--3xl $pf-v5-global--spacer--3xl pf-size-prem(64px) 4rem | ||||
| .pf-v5-c-form-control.pf-m-error | --pf-v5-c-form-control--after--BorderBottomWidth | 2px | ||
--pf-v5-c-form-control--after--BorderBottomWidth --pf-v5-c-form-control--m-error--after--BorderBottomWidth --pf-v5-global--BorderWidth--md $pf-v5-global--BorderWidth--md 2px | ||||
| .pf-v5-c-form-control.pf-m-error.pf-m-icon | --pf-v5-c-form-control--PaddingRight | calc(0.5rem + 1rem + 0.5rem + 1rem + 0.5rem) | ||
--pf-v5-c-form-control--PaddingRight --pf-v5-c-form-control--m-icon--icon--PaddingRight calc(--pf-v5-c-form-control--inset--base + --pf-v5-c-form-control--m-error--icon--width + --pf-v5-c-form-control--m-icon--icon--spacer + --pf-v5-c-form-control--m-icon--icon--width + --pf-v5-c-form-control--m-icon--icon--spacer) calc(--pf-v5-global--spacer--sm + --pf-v5-c-form-control--FontSize + --pf-v5-global--spacer--sm + --pf-v5-c-form-control--FontSize + --pf-v5-global--spacer--sm) calc($pf-v5-global--spacer--sm + --pf-v5-global--FontSize--md + $pf-v5-global--spacer--sm + --pf-v5-global--FontSize--md + $pf-v5-global--spacer--sm) calc($pf-v5-global--spacer--sm + $pf-v5-global--FontSize--md + $pf-v5-global--spacer--sm + $pf-v5-global--FontSize--md + $pf-v5-global--spacer--sm) calc(pf-size-prem(8px) + pf-font-prem(16px) + pf-size-prem(8px) + pf-font-prem(16px) + pf-size-prem(8px)) calc(0.5rem + 1rem + 0.5rem + 1rem + 0.5rem) | ||||
| .pf-v5-c-form-control.pf-m-success | --pf-v5-c-form-control--PaddingRight | 2rem | ||
--pf-v5-c-form-control--PaddingRight --pf-v5-c-form-control--m-success--PaddingRight --pf-v5-global--spacer--xl $pf-v5-global--spacer--xl pf-size-prem(32px) 2rem | ||||
| .pf-v5-c-form-control.pf-m-success | --pf-v5-c-form-control--after--BorderBottomColor | #3e8635 | ||
--pf-v5-c-form-control--after--BorderBottomColor --pf-v5-c-form-control--m-success--after--BorderBottomColor --pf-v5-global--success-color--100 $pf-v5-global--success-color--100 $pf-v5-color-green-500 #3e8635 | ||||
| .pf-v5-c-form-control.pf-m-success | --pf-v5-c-form-control__icon--m-status--Color | #3e8635 | ||
--pf-v5-c-form-control__icon--m-status--Color --pf-v5-c-form-control--m-success__icon--m-status--Color --pf-v5-global--success-color--100 $pf-v5-global--success-color--100 $pf-v5-color-green-500 #3e8635 | ||||
| .pf-v5-c-form-control.pf-m-success | --pf-v5-c-form-control__select--PaddingRight | 4rem | ||
--pf-v5-c-form-control__select--PaddingRight --pf-v5-c-form-control__select--m-success--m-status--PaddingRight --pf-v5-global--spacer--3xl $pf-v5-global--spacer--3xl pf-size-prem(64px) 4rem | ||||
| .pf-v5-c-form-control.pf-m-success | --pf-v5-c-form-control--after--BorderBottomWidth | 2px | ||
--pf-v5-c-form-control--after--BorderBottomWidth --pf-v5-c-form-control--m-success--after--BorderBottomWidth --pf-v5-global--BorderWidth--md $pf-v5-global--BorderWidth--md 2px | ||||
| .pf-v5-c-form-control.pf-m-success.pf-m-icon | --pf-v5-c-form-control--PaddingRight | calc(0.5rem + 1rem + 0.5rem + 1rem + 0.5rem) | ||
--pf-v5-c-form-control--PaddingRight --pf-v5-c-form-control--m-icon--icon--PaddingRight calc(--pf-v5-c-form-control--inset--base + --pf-v5-c-form-control--m-error--icon--width + --pf-v5-c-form-control--m-icon--icon--spacer + --pf-v5-c-form-control--m-icon--icon--width + --pf-v5-c-form-control--m-icon--icon--spacer) calc(--pf-v5-global--spacer--sm + --pf-v5-c-form-control--FontSize + --pf-v5-global--spacer--sm + --pf-v5-c-form-control--FontSize + --pf-v5-global--spacer--sm) calc($pf-v5-global--spacer--sm + --pf-v5-global--FontSize--md + $pf-v5-global--spacer--sm + --pf-v5-global--FontSize--md + $pf-v5-global--spacer--sm) calc($pf-v5-global--spacer--sm + $pf-v5-global--FontSize--md + $pf-v5-global--spacer--sm + $pf-v5-global--FontSize--md + $pf-v5-global--spacer--sm) calc(pf-size-prem(8px) + pf-font-prem(16px) + pf-size-prem(8px) + pf-font-prem(16px) + pf-size-prem(8px)) calc(0.5rem + 1rem + 0.5rem + 1rem + 0.5rem) | ||||
| .pf-v5-c-form-control.pf-m-warning | --pf-v5-c-form-control--PaddingRight | 2rem | ||
--pf-v5-c-form-control--PaddingRight --pf-v5-c-form-control--m-warning--PaddingRight --pf-v5-global--spacer--xl $pf-v5-global--spacer--xl pf-size-prem(32px) 2rem | ||||
| .pf-v5-c-form-control.pf-m-warning | --pf-v5-c-form-control--after--BorderBottomColor | #f0ab00 | ||
--pf-v5-c-form-control--after--BorderBottomColor --pf-v5-c-form-control--m-warning--after--BorderBottomColor --pf-v5-global--warning-color--100 $pf-v5-global--warning-color--100 $pf-v5-color-gold-400 #f0ab00 | ||||
| .pf-v5-c-form-control.pf-m-warning | --pf-v5-c-form-control__icon--m-status--Color | #f0ab00 | ||
--pf-v5-c-form-control__icon--m-status--Color --pf-v5-c-form-control--m-warning__icon--m-status--Color --pf-v5-global--warning-color--100 $pf-v5-global--warning-color--100 $pf-v5-color-gold-400 #f0ab00 | ||||
| .pf-v5-c-form-control.pf-m-warning | --pf-v5-c-form-control__select--PaddingRight | 4rem | ||
--pf-v5-c-form-control__select--PaddingRight --pf-v5-c-form-control__select--m-warning--m-status--PaddingRight --pf-v5-global--spacer--3xl $pf-v5-global--spacer--3xl pf-size-prem(64px) 4rem | ||||
| .pf-v5-c-form-control.pf-m-warning | --pf-v5-c-form-control--after--BorderBottomWidth | 2px | ||
--pf-v5-c-form-control--after--BorderBottomWidth --pf-v5-c-form-control--m-warning--after--BorderBottomWidth --pf-v5-global--BorderWidth--md $pf-v5-global--BorderWidth--md 2px | ||||
| .pf-v5-c-form-control.pf-m-warning.pf-m-icon | --pf-v5-c-form-control--PaddingRight | calc(0.5rem + 1rem + 0.5rem + 1rem + 0.5rem) | ||
--pf-v5-c-form-control--PaddingRight --pf-v5-c-form-control--m-icon--icon--PaddingRight calc(--pf-v5-c-form-control--inset--base + --pf-v5-c-form-control--m-error--icon--width + --pf-v5-c-form-control--m-icon--icon--spacer + --pf-v5-c-form-control--m-icon--icon--width + --pf-v5-c-form-control--m-icon--icon--spacer) calc(--pf-v5-global--spacer--sm + --pf-v5-c-form-control--FontSize + --pf-v5-global--spacer--sm + --pf-v5-c-form-control--FontSize + --pf-v5-global--spacer--sm) calc($pf-v5-global--spacer--sm + --pf-v5-global--FontSize--md + $pf-v5-global--spacer--sm + --pf-v5-global--FontSize--md + $pf-v5-global--spacer--sm) calc($pf-v5-global--spacer--sm + $pf-v5-global--FontSize--md + $pf-v5-global--spacer--sm + $pf-v5-global--FontSize--md + $pf-v5-global--spacer--sm) calc(pf-size-prem(8px) + pf-font-prem(16px) + pf-size-prem(8px) + pf-font-prem(16px) + pf-size-prem(8px)) calc(0.5rem + 1rem + 0.5rem + 1rem + 0.5rem) | ||||
| .pf-v5-c-form-control.pf-m-icon | --pf-v5-c-form-control--PaddingRight | calc(0.5rem + 1rem + 0.5rem) | ||
--pf-v5-c-form-control--PaddingRight --pf-v5-c-form-control--m-icon--PaddingRight calc(--pf-v5-c-form-control--inset--base + --pf-v5-c-form-control--m-icon--icon--width + --pf-v5-c-form-control--m-icon--icon--spacer) calc(--pf-v5-global--spacer--sm + --pf-v5-c-form-control--FontSize + --pf-v5-global--spacer--sm) calc($pf-v5-global--spacer--sm + --pf-v5-global--FontSize--md + $pf-v5-global--spacer--sm) calc($pf-v5-global--spacer--sm + $pf-v5-global--FontSize--md + $pf-v5-global--spacer--sm) calc(pf-size-prem(8px) + pf-font-prem(16px) + pf-size-prem(8px)) calc(0.5rem + 1rem + 0.5rem) | ||||
| .pf-v5-c-form-control > select | --pf-v5-c-form-control--PaddingRight | 1.5rem | ||
--pf-v5-c-form-control--PaddingRight --pf-v5-c-form-control__select--PaddingRight --pf-v5-global--spacer--lg $pf-v5-global--spacer--lg pf-size-prem(24px) 1.5rem | ||||
| .pf-v5-c-form-control > select | --pf-v5-c-form-control--PaddingLeft | 0.5rem | ||
--pf-v5-c-form-control--PaddingLeft --pf-v5-c-form-control__select--PaddingLeft --pf-v5-global--spacer--sm $pf-v5-global--spacer--sm pf-size-prem(8px) 0.5rem | ||||
| .pf-v5-c-form-control.pf-m-placeholder > select | --pf-v5-c-form-control--Color | #6a6e73 | ||
--pf-v5-c-form-control--Color --pf-v5-c-form-control--m-placeholder--Color --pf-v5-global--Color--dark-200 $pf-v5-global--Color--dark-200 $pf-v5-color-black-600 #6a6e73 | ||||
| .pf-v5-c-form-control.pf-m-resize-vertical | --pf-v5-c-form-control--Resize | vertical | ||
| .pf-v5-c-form-control.pf-m-resize-horizontal | --pf-v5-c-form-control--Resize | horizontal | ||
| .pf-v5-c-form-control.pf-m-resize-both | --pf-v5-c-form-control--Resize | both | ||
| .pf-v5-c-form-control__icon.pf-m-status | --pf-v5-c-form-control__icon--Color | #6a6e73 | ||
--pf-v5-c-form-control__icon--Color --pf-v5-c-form-control__icon--m-status--Color --pf-v5-global--icon--Color--light $pf-v5-global--icon--Color--light $pf-v5-color-black-600 #6a6e73 | ||||
View source on GitHub
