Text input

A text input is used to gather free-form text from a user.

Examples

Basic

Disabled

Truncated at start

Read only

Plain read only variant

Invalid

Select text using ref

Custom icon

Custom icon and invalid

Props

TextInput

*required
Name	Type	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.
isDisabled	boolean	Flag to show if the text input is disabled.
isExpanded	boolean	Flag to apply expanded styling
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.

CSS variables

	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-placeholder > select *	--pf-v5-c-form-control--Color	#151515
--pf-v5-c-form-control--Color --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-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

Privacy statement Terms of use All policies and guidelines