Examples
Props
TextInput
| Name | Type | Default | Description |
|---|---|---|---|
| aria-label | string | Aria-label. The text input requires an associated id or aria-label. | |
| className | string | Additional classes added to the text input. | |
| customIcon | React.ReactNode | Custom icon to render. If the validated prop is also passed, this will render an icon in addition to a validated icon. | |
| expandedProps | TextInputExpandedObj | Prop to apply expanded styling to the text input and link it to the element it is controlling. This should be used when the input controls a menu and that menu is expandable. | |
| isDisabled | boolean | Flag to show if the text input is disabled. | |
| Deprecated: isExpanded | boolean | Flag to apply expanded styling. expandedProps should now be used instead. | |
| Deprecated: isLeftTruncated | boolean | Use isStartTruncated instead. Trim text at start | |
| isRequired | boolean | Flag indicating whether the input is required | |
| isStartTruncated | boolean | Trim text at start | |
| onBlur | (event?: any) => void | Callback function when text input is blurred (focus leaves) | |
| onChange | (event: React.FormEvent<HTMLInputElement>, value: string) => void | A callback for when the text input value changes. | |
| onFocus | (event?: any) => void | Callback function when text input is focused | |
| ouiaId | number | string | Value to overwrite the randomly generated data-ouia-component-id. | |
| ouiaSafe | boolean | 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. | |
| placeholder | string | Placeholder of the text input when there is no value | |
| readOnlyVariant | 'plain' | 'default' | Sets the input as readonly and determines the readonly styling. | |
| type | | 'text' | 'date' | 'datetime-local' | 'email' | 'month' | 'number' | 'password' | 'search' | 'tel' | 'time' | 'url' | Type that the text input accepts. | |
| validated | 'success' | 'warning' | 'error' | 'default' | Value to indicate if the text input is modified to show that validation state. If set to success, text input will be modified to indicate valid state. If set to error, text input will be modified to indicate error state. | |
| value | string | number | Value of the text input. |
TextInputExpandedObj
| Name | Type | Default | Description |
|---|---|---|---|
| ariaControlsrequired | string | Id of the element that the text input is controlling expansion of. | |
| isExpandedrequired | boolean | Flag to apply expanded styling. |
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
