Text input

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.
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

*required
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-v6-c-form-control	--pf-v6-c-form-control--ColumnGap	0.5rem
--pf-v6-c-form-control--ColumnGap --pf-t--global--spacer--gap--text-to-element--default --pf-t--global--spacer--sm --pf-t--global--spacer--200 0.5rem
	.pf-v6-c-form-control	--pf-v6-c-form-control--Color	(In light theme) #151515
--pf-v6-c-form-control--Color --pf-t--global--text--color--regular --pf-t--global--text--color--100 --pf-t--color--gray--95 #151515
	.pf-v6-c-form-control	--pf-v6-c-form-control--FontSize	0.875rem
--pf-v6-c-form-control--FontSize --pf-t--global--font--size--body--default --pf-t--global--font--size--sm --pf-t--global--font--size--200 0.875rem
	.pf-v6-c-form-control	--pf-v6-c-form-control--LineHeight	1.5
--pf-v6-c-form-control--LineHeight --pf-t--global--font--line-height--body --pf-t--global--font--line-height--200 1.5
	.pf-v6-c-form-control	--pf-v6-c-form-control--Resize	none
	.pf-v6-c-form-control	--pf-v6-c-form-control--OutlineOffset	-6px
	.pf-v6-c-form-control	--pf-v6-c-form-control--BorderRadius	6px
--pf-v6-c-form-control--BorderRadius --pf-t--global--border--radius--small --pf-t--global--border--radius--200 6px
	.pf-v6-c-form-control	--pf-v6-c-form-control--before--BorderWidth	1px
--pf-v6-c-form-control--before--BorderWidth --pf-t--global--border--width--control--default --pf-t--global--border--width--100 1px
	.pf-v6-c-form-control	--pf-v6-c-form-control--before--BorderStyle	solid
	.pf-v6-c-form-control	--pf-v6-c-form-control--before--BorderColor	(In light theme) #c7c7c7
--pf-v6-c-form-control--before--BorderColor --pf-t--global--border--color--default --pf-t--global--border--color--100 --pf-t--color--gray--30 #c7c7c7
	.pf-v6-c-form-control	--pf-v6-c-form-control--before--BorderRadius	6px
--pf-v6-c-form-control--before--BorderRadius --pf-v6-c-form-control--BorderRadius --pf-t--global--border--radius--small --pf-t--global--border--radius--200 6px
	.pf-v6-c-form-control	--pf-v6-c-form-control--after--BorderWidth	1px
--pf-v6-c-form-control--after--BorderWidth --pf-t--global--border--width--control--default --pf-t--global--border--width--100 1px
	.pf-v6-c-form-control	--pf-v6-c-form-control--after--BorderStyle	solid
	.pf-v6-c-form-control	--pf-v6-c-form-control--after--BorderColor	transparent
	.pf-v6-c-form-control	--pf-v6-c-form-control--after--BorderRadius	6px
--pf-v6-c-form-control--after--BorderRadius --pf-v6-c-form-control--BorderRadius --pf-t--global--border--radius--small --pf-t--global--border--radius--200 6px
	.pf-v6-c-form-control	--pf-v6-c-form-control--BackgroundColor	(In light theme) #ffffff
--pf-v6-c-form-control--BackgroundColor --pf-t--global--background--color--control--default --pf-t--global--background--color--primary--default --pf-t--global--background--color--100 --pf-t--color--white #ffffff
	.pf-v6-c-form-control	--pf-v6-c-form-control--Width	100%
	.pf-v6-c-form-control	--pf-v6-c-form-control--inset--base	1rem
--pf-v6-c-form-control--inset--base --pf-t--global--spacer--control--horizontal--default --pf-t--global--spacer--md --pf-t--global--spacer--300 1rem
	.pf-v6-c-form-control	--pf-v6-c-form-control--PaddingBlockStart--base	0.5rem
--pf-v6-c-form-control--PaddingBlockStart--base --pf-t--global--spacer--control--vertical--default --pf-t--global--spacer--sm --pf-t--global--spacer--200 0.5rem
	.pf-v6-c-form-control	--pf-v6-c-form-control--PaddingBlockEnd--base	0.5rem
--pf-v6-c-form-control--PaddingBlockEnd--base --pf-t--global--spacer--control--vertical--default --pf-t--global--spacer--sm --pf-t--global--spacer--200 0.5rem
	.pf-v6-c-form-control	--pf-v6-c-form-control--PaddingInlineEnd--base	1rem
--pf-v6-c-form-control--PaddingInlineEnd--base --pf-v6-c-form-control--inset--base --pf-t--global--spacer--control--horizontal--default --pf-t--global--spacer--md --pf-t--global--spacer--300 1rem
	.pf-v6-c-form-control	--pf-v6-c-form-control--PaddingInlineStart--base	1rem
--pf-v6-c-form-control--PaddingInlineStart--base --pf-v6-c-form-control--inset--base --pf-t--global--spacer--control--horizontal--default --pf-t--global--spacer--md --pf-t--global--spacer--300 1rem
	.pf-v6-c-form-control	--pf-v6-c-form-control--PaddingBlockStart	0.5rem
--pf-v6-c-form-control--PaddingBlockStart --pf-v6-c-form-control--PaddingBlockStart--base --pf-t--global--spacer--control--vertical--default --pf-t--global--spacer--sm --pf-t--global--spacer--200 0.5rem
	.pf-v6-c-form-control	--pf-v6-c-form-control--PaddingBlockEnd	0.5rem
--pf-v6-c-form-control--PaddingBlockEnd --pf-v6-c-form-control--PaddingBlockEnd--base --pf-t--global--spacer--control--vertical--default --pf-t--global--spacer--sm --pf-t--global--spacer--200 0.5rem
	.pf-v6-c-form-control	--pf-v6-c-form-control--PaddingInlineEnd	1rem
--pf-v6-c-form-control--PaddingInlineEnd --pf-v6-c-form-control--PaddingInlineEnd--base --pf-v6-c-form-control--inset--base --pf-t--global--spacer--control--horizontal--default --pf-t--global--spacer--md --pf-t--global--spacer--300 1rem
	.pf-v6-c-form-control	--pf-v6-c-form-control--PaddingInlineStart	1rem
--pf-v6-c-form-control--PaddingInlineStart --pf-v6-c-form-control--PaddingInlineStart--base --pf-v6-c-form-control--inset--base --pf-t--global--spacer--control--horizontal--default --pf-t--global--spacer--md --pf-t--global--spacer--300 1rem
	.pf-v6-c-form-control	--pf-v6-c-form-control__utilities--input--PaddingInlineEnd	1rem
--pf-v6-c-form-control__utilities--input--PaddingInlineEnd --pf-v6-c-form-control__input--PaddingInlineEnd --pf-v6-c-form-control--PaddingInlineEnd--base --pf-v6-c-form-control--inset--base --pf-t--global--spacer--control--horizontal--default --pf-t--global--spacer--md --pf-t--global--spacer--300 1rem
	.pf-v6-c-form-control	--pf-v6-c-form-control__utilities--select--PaddingInlineEnd	1rem
--pf-v6-c-form-control__utilities--select--PaddingInlineEnd --pf-v6-c-form-control__select--PaddingInlineEnd --pf-v6-c-form-control--PaddingInlineEnd--base --pf-v6-c-form-control--inset--base --pf-t--global--spacer--control--horizontal--default --pf-t--global--spacer--md --pf-t--global--spacer--300 1rem
	.pf-v6-c-form-control	--pf-v6-c-form-control__utilities--textarea--PaddingInlineEnd	1rem
--pf-v6-c-form-control__utilities--textarea--PaddingInlineEnd --pf-v6-c-form-control__textarea--PaddingInlineEnd --pf-v6-c-form-control--PaddingInlineEnd--base --pf-v6-c-form-control--inset--base --pf-t--global--spacer--control--horizontal--default --pf-t--global--spacer--md --pf-t--global--spacer--300 1rem
	.pf-v6-c-form-control	--pf-v6-c-form-control__input--PaddingBlockStart	0.5rem
--pf-v6-c-form-control__input--PaddingBlockStart --pf-v6-c-form-control--PaddingBlockStart--base --pf-t--global--spacer--control--vertical--default --pf-t--global--spacer--sm --pf-t--global--spacer--200 0.5rem
	.pf-v6-c-form-control	--pf-v6-c-form-control__input--PaddingBlockEnd	0.5rem
--pf-v6-c-form-control__input--PaddingBlockEnd --pf-v6-c-form-control--PaddingBlockEnd--base --pf-t--global--spacer--control--vertical--default --pf-t--global--spacer--sm --pf-t--global--spacer--200 0.5rem
	.pf-v6-c-form-control	--pf-v6-c-form-control__input--PaddingInlineEnd	1rem
--pf-v6-c-form-control__input--PaddingInlineEnd --pf-v6-c-form-control--PaddingInlineEnd--base --pf-v6-c-form-control--inset--base --pf-t--global--spacer--control--horizontal--default --pf-t--global--spacer--md --pf-t--global--spacer--300 1rem
	.pf-v6-c-form-control	--pf-v6-c-form-control__input--PaddingInlineStart	1rem
--pf-v6-c-form-control__input--PaddingInlineStart --pf-v6-c-form-control--PaddingInlineStart--base --pf-v6-c-form-control--inset--base --pf-t--global--spacer--control--horizontal--default --pf-t--global--spacer--md --pf-t--global--spacer--300 1rem
	.pf-v6-c-form-control	--pf-v6-c-form-control__select--PaddingBlockStart	0.5rem
--pf-v6-c-form-control__select--PaddingBlockStart --pf-v6-c-form-control--PaddingBlockStart--base --pf-t--global--spacer--control--vertical--default --pf-t--global--spacer--sm --pf-t--global--spacer--200 0.5rem
	.pf-v6-c-form-control	--pf-v6-c-form-control__select--PaddingBlockEnd	0.5rem
--pf-v6-c-form-control__select--PaddingBlockEnd --pf-v6-c-form-control--PaddingBlockEnd--base --pf-t--global--spacer--control--vertical--default --pf-t--global--spacer--sm --pf-t--global--spacer--200 0.5rem
	.pf-v6-c-form-control	--pf-v6-c-form-control__select--PaddingInlineEnd	1rem
--pf-v6-c-form-control__select--PaddingInlineEnd --pf-v6-c-form-control--PaddingInlineEnd--base --pf-v6-c-form-control--inset--base --pf-t--global--spacer--control--horizontal--default --pf-t--global--spacer--md --pf-t--global--spacer--300 1rem
	.pf-v6-c-form-control	--pf-v6-c-form-control__select--PaddingInlineStart	1rem
--pf-v6-c-form-control__select--PaddingInlineStart --pf-v6-c-form-control--PaddingInlineStart--base --pf-v6-c-form-control--inset--base --pf-t--global--spacer--control--horizontal--default --pf-t--global--spacer--md --pf-t--global--spacer--300 1rem
	.pf-v6-c-form-control	--pf-v6-c-form-control__textarea--PaddingBlockStart	0.5rem
--pf-v6-c-form-control__textarea--PaddingBlockStart --pf-v6-c-form-control--PaddingBlockStart--base --pf-t--global--spacer--control--vertical--default --pf-t--global--spacer--sm --pf-t--global--spacer--200 0.5rem
	.pf-v6-c-form-control	--pf-v6-c-form-control__textarea--PaddingBlockEnd	0.5rem
--pf-v6-c-form-control__textarea--PaddingBlockEnd --pf-v6-c-form-control--PaddingBlockEnd--base --pf-t--global--spacer--control--vertical--default --pf-t--global--spacer--sm --pf-t--global--spacer--200 0.5rem
	.pf-v6-c-form-control	--pf-v6-c-form-control__textarea--PaddingInlineEnd	1rem
--pf-v6-c-form-control__textarea--PaddingInlineEnd --pf-v6-c-form-control--PaddingInlineEnd--base --pf-v6-c-form-control--inset--base --pf-t--global--spacer--control--horizontal--default --pf-t--global--spacer--md --pf-t--global--spacer--300 1rem
	.pf-v6-c-form-control	--pf-v6-c-form-control__textarea--PaddingInlineStart	1rem
--pf-v6-c-form-control__textarea--PaddingInlineStart --pf-v6-c-form-control--PaddingInlineStart--base --pf-v6-c-form-control--inset--base --pf-t--global--spacer--control--horizontal--default --pf-t--global--spacer--md --pf-t--global--spacer--300 1rem
	.pf-v6-c-form-control	--pf-v6-c-form-control--hover--after--BorderWidth	1px
--pf-v6-c-form-control--hover--after--BorderWidth --pf-t--global--border--width--control--hover --pf-t--global--border--width--100 1px
	.pf-v6-c-form-control	--pf-v6-c-form-control--hover--after--BorderColor	(In light theme) #4394e5
--pf-v6-c-form-control--hover--after--BorderColor --pf-t--global--border--color--hover --pf-t--global--color--brand--100 --pf-t--color--blue--40 #4394e5
	.pf-v6-c-form-control	--pf-v6-c-form-control--m-success--hover--after--BorderColor	(In light theme) #204d00
--pf-v6-c-form-control--m-success--hover--after--BorderColor --pf-t--global--border--color--status--success--hover --pf-t--global--color--status--success--hover --pf-t--global--color--status--success--200 --pf-t--color--green--70 #204d00
	.pf-v6-c-form-control	--pf-v6-c-form-control--m-warning--hover--after--BorderColor	(In light theme) #b98412
--pf-v6-c-form-control--m-warning--hover--after--BorderColor --pf-t--global--border--color--status--warning--hover --pf-t--global--color--status--warning--300 --pf-t--color--yellow--50 #b98412
	.pf-v6-c-form-control	--pf-v6-c-form-control--m-error--hover--after--BorderColor	(In light theme) #731f00
--pf-v6-c-form-control--m-error--hover--after--BorderColor --pf-t--global--border--color--status--danger--hover --pf-t--global--color--status--danger--hover --pf-t--global--color--status--danger--200 --pf-t--color--red-orange--70 #731f00
	.pf-v6-c-form-control	--pf-v6-c-form-control--m-expanded--after--BorderWidth	2px
--pf-v6-c-form-control--m-expanded--after--BorderWidth --pf-t--global--border--width--control--clicked --pf-t--global--border--width--200 2px
	.pf-v6-c-form-control	--pf-v6-c-form-control--m-expanded--after--BorderColor	(In light theme) #0066cc
--pf-v6-c-form-control--m-expanded--after--BorderColor --pf-t--global--border--color--clicked --pf-t--global--color--brand--200 --pf-t--color--blue--50 #0066cc
	.pf-v6-c-form-control	--pf-v6-c-form-control--m-placeholder--Color	(In light theme) #4d4d4d
--pf-v6-c-form-control--m-placeholder--Color --pf-t--global--text--color--placeholder --pf-t--global--text--color--subtle --pf-t--global--text--color--200 --pf-t--color--gray--60 #4d4d4d
	.pf-v6-c-form-control	--pf-v6-c-form-control--m-placeholder--child--Color	(In light theme) #151515
--pf-v6-c-form-control--m-placeholder--child--Color --pf-t--global--text--color--regular --pf-t--global--text--color--100 --pf-t--color--gray--95 #151515
	.pf-v6-c-form-control	--pf-v6-c-form-control--m-disabled--Color	(In light theme) #4d4d4d
--pf-v6-c-form-control--m-disabled--Color --pf-t--global--text--color--on-disabled --pf-t--global--color--disabled--300 --pf-t--color--gray--60 #4d4d4d
	.pf-v6-c-form-control	--pf-v6-c-form-control--m-disabled--BackgroundColor	(In light theme) #c7c7c7
--pf-v6-c-form-control--m-disabled--BackgroundColor --pf-t--global--background--color--disabled--default --pf-t--global--color--disabled--100 --pf-t--color--gray--30 #c7c7c7
	.pf-v6-c-form-control	--pf-v6-c-form-control--m-disabled--after--BorderColor	transparent
	.pf-v6-c-form-control	--pf-v6-c-form-control--m-readonly--BackgroundColor	(In light theme) #f2f2f2
--pf-v6-c-form-control--m-readonly--BackgroundColor --pf-t--global--background--color--control--read-only --pf-t--global--background--color--200 --pf-t--color--gray--10 #f2f2f2
	.pf-v6-c-form-control	--pf-v6-c-form-control--m-readonly--BorderColor	(In light theme) #e0e0e0
--pf-v6-c-form-control--m-readonly--BorderColor --pf-t--global--border--color--control--read-only --pf-t--global--border--color--50 --pf-t--color--gray--20 #e0e0e0
	.pf-v6-c-form-control	--pf-v6-c-form-control--m-readonly--hover--after--BorderColor	revert
	.pf-v6-c-form-control	--pf-v6-c-form-control--m-readonly--m-plain--BackgroundColor	transparent
	.pf-v6-c-form-control	--pf-v6-c-form-control--m-readonly--m-plain--BorderColor	transparent
	.pf-v6-c-form-control	--pf-v6-c-form-control--m-readonly--m-plain--inset--base	0
	.pf-v6-c-form-control	--pf-v6-c-form-control--m-readonly--m-plain--OutlineOffset	0
	.pf-v6-c-form-control	--pf-v6-c-form-control--icon--width	0.875rem
--pf-v6-c-form-control--icon--width --pf-v6-c-form-control--FontSize --pf-t--global--font--size--body--default --pf-t--global--font--size--sm --pf-t--global--font--size--200 0.875rem
	.pf-v6-c-form-control	--pf-v6-c-form-control--m-success--after--BorderWidth	1px
--pf-v6-c-form-control--m-success--after--BorderWidth --pf-t--global--border--width--control--default --pf-t--global--border--width--100 1px
	.pf-v6-c-form-control	--pf-v6-c-form-control--m-success--after--BorderColor	(In light theme) #3d7317
--pf-v6-c-form-control--m-success--after--BorderColor --pf-t--global--border--color--status--success--default --pf-t--global--color--status--success--default --pf-t--global--color--status--success--100 --pf-t--color--green--60 #3d7317
	.pf-v6-c-form-control	--pf-v6-c-form-control--m-success--PaddingInlineEnd	initial
	.pf-v6-c-form-control	--pf-v6-c-form-control__select--m-success--m-status--PaddingInlineEnd	initial
	.pf-v6-c-form-control	--pf-v6-c-form-control__input--m-success--PaddingInlineEnd	calc(0.875rem + 0.5rem + 1rem)
--pf-v6-c-form-control__input--m-success--PaddingInlineEnd calc(--pf-v6-c-form-control--m-icon--icon--width + --pf-v6-c-form-control--ColumnGap + --pf-v6-c-form-control__utilities--input--PaddingInlineEnd) calc(--pf-v6-c-form-control--FontSize + --pf-t--global--spacer--gap--text-to-element--default + --pf-v6-c-form-control__input--PaddingInlineEnd) calc(--pf-t--global--font--size--body--default + --pf-t--global--spacer--sm + --pf-v6-c-form-control--PaddingInlineEnd--base) calc(--pf-t--global--font--size--sm + --pf-t--global--spacer--200 + --pf-v6-c-form-control--inset--base) calc(--pf-t--global--font--size--200 + 0.5rem + --pf-t--global--spacer--control--horizontal--default) calc(0.875rem + 0.5rem + --pf-t--global--spacer--md) calc(0.875rem + 0.5rem + --pf-t--global--spacer--300) calc(0.875rem + 0.5rem + 1rem)
	.pf-v6-c-form-control	--pf-v6-c-form-control__select--m-success--PaddingInlineEnd	calc(0.875rem + calc(1rem / 2) + 1rem + 0.5rem + 1rem)
--pf-v6-c-form-control__select--m-success--PaddingInlineEnd calc(--pf-v6-c-form-control--m-icon--icon--width + --pf-v6-c-form-control--m-icon--icon--spacer + --pf-v6-c-form-control__utilities--Gap + --pf-v6-c-form-control--ColumnGap + --pf-v6-c-form-control__utilities--select--PaddingInlineEnd) calc(--pf-v6-c-form-control--FontSize + calc(--pf-t--global--spacer--control--horizontal--default / 2) + --pf-t--global--spacer--gap--group--horizontal + --pf-t--global--spacer--gap--text-to-element--default + --pf-v6-c-form-control__select--PaddingInlineEnd) calc(--pf-t--global--font--size--body--default + calc(--pf-t--global--spacer--md / 2) + --pf-t--global--spacer--md + --pf-t--global--spacer--sm + --pf-v6-c-form-control--PaddingInlineEnd--base) calc(--pf-t--global--font--size--sm + calc(--pf-t--global--spacer--300 / 2) + --pf-t--global--spacer--300 + --pf-t--global--spacer--200 + --pf-v6-c-form-control--inset--base) calc(--pf-t--global--font--size--200 + calc(1rem / 2) + 1rem + 0.5rem + --pf-t--global--spacer--control--horizontal--default) calc(0.875rem + calc(1rem / 2) + 1rem + 0.5rem + --pf-t--global--spacer--md) calc(0.875rem + calc(1rem / 2) + 1rem + 0.5rem + --pf-t--global--spacer--300) calc(0.875rem + calc(1rem / 2) + 1rem + 0.5rem + 1rem)
	.pf-v6-c-form-control	--pf-v6-c-form-control__textarea--m-success--PaddingInlineEnd	calc(0.875rem + 0.5rem + 1rem)
--pf-v6-c-form-control__textarea--m-success--PaddingInlineEnd calc(--pf-v6-c-form-control--m-icon--icon--width + --pf-v6-c-form-control--ColumnGap + --pf-v6-c-form-control__utilities--textarea--PaddingInlineEnd) calc(--pf-v6-c-form-control--FontSize + --pf-t--global--spacer--gap--text-to-element--default + --pf-v6-c-form-control__textarea--PaddingInlineEnd) calc(--pf-t--global--font--size--body--default + --pf-t--global--spacer--sm + --pf-v6-c-form-control--PaddingInlineEnd--base) calc(--pf-t--global--font--size--sm + --pf-t--global--spacer--200 + --pf-v6-c-form-control--inset--base) calc(--pf-t--global--font--size--200 + 0.5rem + --pf-t--global--spacer--control--horizontal--default) calc(0.875rem + 0.5rem + --pf-t--global--spacer--md) calc(0.875rem + 0.5rem + --pf-t--global--spacer--300) calc(0.875rem + 0.5rem + 1rem)
	.pf-v6-c-form-control	--pf-v6-c-form-control--m-warning--after--BorderWidth	1px
--pf-v6-c-form-control--m-warning--after--BorderWidth --pf-t--global--border--width--control--default --pf-t--global--border--width--100 1px
	.pf-v6-c-form-control	--pf-v6-c-form-control--m-warning--after--BorderColor	(In light theme) #dca614
--pf-v6-c-form-control--m-warning--after--BorderColor --pf-t--global--border--color--status--warning--default --pf-t--global--color--status--warning--200 --pf-t--color--yellow--40 #dca614
	.pf-v6-c-form-control	--pf-v6-c-form-control--m-warning--PaddingInlineEnd	initial
	.pf-v6-c-form-control	--pf-v6-c-form-control__select--m-warning--m-status--PaddingInlineEnd	initial
	.pf-v6-c-form-control	--pf-v6-c-form-control__input--m-warning--PaddingInlineEnd	calc(0.875rem + 0.5rem + 1rem)
--pf-v6-c-form-control__input--m-warning--PaddingInlineEnd calc(--pf-v6-c-form-control--m-icon--icon--width + --pf-v6-c-form-control--ColumnGap + --pf-v6-c-form-control__utilities--input--PaddingInlineEnd) calc(--pf-v6-c-form-control--FontSize + --pf-t--global--spacer--gap--text-to-element--default + --pf-v6-c-form-control__input--PaddingInlineEnd) calc(--pf-t--global--font--size--body--default + --pf-t--global--spacer--sm + --pf-v6-c-form-control--PaddingInlineEnd--base) calc(--pf-t--global--font--size--sm + --pf-t--global--spacer--200 + --pf-v6-c-form-control--inset--base) calc(--pf-t--global--font--size--200 + 0.5rem + --pf-t--global--spacer--control--horizontal--default) calc(0.875rem + 0.5rem + --pf-t--global--spacer--md) calc(0.875rem + 0.5rem + --pf-t--global--spacer--300) calc(0.875rem + 0.5rem + 1rem)
	.pf-v6-c-form-control	--pf-v6-c-form-control__select--m-warning--PaddingInlineEnd	calc(0.875rem + calc(1rem / 2) + 1rem + 0.5rem + 1rem)
--pf-v6-c-form-control__select--m-warning--PaddingInlineEnd calc(--pf-v6-c-form-control--m-icon--icon--width + --pf-v6-c-form-control--m-icon--icon--spacer + --pf-v6-c-form-control__utilities--Gap + --pf-v6-c-form-control--ColumnGap + --pf-v6-c-form-control__utilities--select--PaddingInlineEnd) calc(--pf-v6-c-form-control--FontSize + calc(--pf-t--global--spacer--control--horizontal--default / 2) + --pf-t--global--spacer--gap--group--horizontal + --pf-t--global--spacer--gap--text-to-element--default + --pf-v6-c-form-control__select--PaddingInlineEnd) calc(--pf-t--global--font--size--body--default + calc(--pf-t--global--spacer--md / 2) + --pf-t--global--spacer--md + --pf-t--global--spacer--sm + --pf-v6-c-form-control--PaddingInlineEnd--base) calc(--pf-t--global--font--size--sm + calc(--pf-t--global--spacer--300 / 2) + --pf-t--global--spacer--300 + --pf-t--global--spacer--200 + --pf-v6-c-form-control--inset--base) calc(--pf-t--global--font--size--200 + calc(1rem / 2) + 1rem + 0.5rem + --pf-t--global--spacer--control--horizontal--default) calc(0.875rem + calc(1rem / 2) + 1rem + 0.5rem + --pf-t--global--spacer--md) calc(0.875rem + calc(1rem / 2) + 1rem + 0.5rem + --pf-t--global--spacer--300) calc(0.875rem + calc(1rem / 2) + 1rem + 0.5rem + 1rem)
	.pf-v6-c-form-control	--pf-v6-c-form-control__textarea--m-warning--PaddingInlineEnd	calc(0.875rem + 0.5rem + 1rem)
--pf-v6-c-form-control__textarea--m-warning--PaddingInlineEnd calc(--pf-v6-c-form-control--m-icon--icon--width + --pf-v6-c-form-control--ColumnGap + --pf-v6-c-form-control__utilities--textarea--PaddingInlineEnd) calc(--pf-v6-c-form-control--FontSize + --pf-t--global--spacer--gap--text-to-element--default + --pf-v6-c-form-control__textarea--PaddingInlineEnd) calc(--pf-t--global--font--size--body--default + --pf-t--global--spacer--sm + --pf-v6-c-form-control--PaddingInlineEnd--base) calc(--pf-t--global--font--size--sm + --pf-t--global--spacer--200 + --pf-v6-c-form-control--inset--base) calc(--pf-t--global--font--size--200 + 0.5rem + --pf-t--global--spacer--control--horizontal--default) calc(0.875rem + 0.5rem + --pf-t--global--spacer--md) calc(0.875rem + 0.5rem + --pf-t--global--spacer--300) calc(0.875rem + 0.5rem + 1rem)
	.pf-v6-c-form-control	--pf-v6-c-form-control--m-error--after--BorderWidth	1px
--pf-v6-c-form-control--m-error--after--BorderWidth --pf-t--global--border--width--control--default --pf-t--global--border--width--100 1px
	.pf-v6-c-form-control	--pf-v6-c-form-control--m-error--after--BorderColor	(In light theme) #b1380b
--pf-v6-c-form-control--m-error--after--BorderColor --pf-t--global--border--color--status--danger--default --pf-t--global--color--status--danger--default --pf-t--global--color--status--danger--100 --pf-t--color--red-orange--60 #b1380b
	.pf-v6-c-form-control	--pf-v6-c-form-control--m-error--PaddingInlineEnd	initial
	.pf-v6-c-form-control	--pf-v6-c-form-control__select--m-error--m-status--PaddingInlineEnd	initial
	.pf-v6-c-form-control	--pf-v6-c-form-control--m-error--icon--width	0.875rem
--pf-v6-c-form-control--m-error--icon--width --pf-v6-c-form-control--FontSize --pf-t--global--font--size--body--default --pf-t--global--font--size--sm --pf-t--global--font--size--200 0.875rem
	.pf-v6-c-form-control	--pf-v6-c-form-control__input--m-error--PaddingInlineEnd	calc(0.875rem + 0.5rem + 1rem)
--pf-v6-c-form-control__input--m-error--PaddingInlineEnd calc(--pf-v6-c-form-control--m-icon--icon--width + --pf-v6-c-form-control--ColumnGap + --pf-v6-c-form-control__utilities--input--PaddingInlineEnd) calc(--pf-v6-c-form-control--FontSize + --pf-t--global--spacer--gap--text-to-element--default + --pf-v6-c-form-control__input--PaddingInlineEnd) calc(--pf-t--global--font--size--body--default + --pf-t--global--spacer--sm + --pf-v6-c-form-control--PaddingInlineEnd--base) calc(--pf-t--global--font--size--sm + --pf-t--global--spacer--200 + --pf-v6-c-form-control--inset--base) calc(--pf-t--global--font--size--200 + 0.5rem + --pf-t--global--spacer--control--horizontal--default) calc(0.875rem + 0.5rem + --pf-t--global--spacer--md) calc(0.875rem + 0.5rem + --pf-t--global--spacer--300) calc(0.875rem + 0.5rem + 1rem)
	.pf-v6-c-form-control	--pf-v6-c-form-control__select--m-error--PaddingInlineEnd	calc(0.875rem + calc(1rem / 2) + 1rem + 0.5rem + 1rem)
--pf-v6-c-form-control__select--m-error--PaddingInlineEnd calc(--pf-v6-c-form-control--m-icon--icon--width + --pf-v6-c-form-control--m-icon--icon--spacer + --pf-v6-c-form-control__utilities--Gap + --pf-v6-c-form-control--ColumnGap + --pf-v6-c-form-control__utilities--select--PaddingInlineEnd) calc(--pf-v6-c-form-control--FontSize + calc(--pf-t--global--spacer--control--horizontal--default / 2) + --pf-t--global--spacer--gap--group--horizontal + --pf-t--global--spacer--gap--text-to-element--default + --pf-v6-c-form-control__select--PaddingInlineEnd) calc(--pf-t--global--font--size--body--default + calc(--pf-t--global--spacer--md / 2) + --pf-t--global--spacer--md + --pf-t--global--spacer--sm + --pf-v6-c-form-control--PaddingInlineEnd--base) calc(--pf-t--global--font--size--sm + calc(--pf-t--global--spacer--300 / 2) + --pf-t--global--spacer--300 + --pf-t--global--spacer--200 + --pf-v6-c-form-control--inset--base) calc(--pf-t--global--font--size--200 + calc(1rem / 2) + 1rem + 0.5rem + --pf-t--global--spacer--control--horizontal--default) calc(0.875rem + calc(1rem / 2) + 1rem + 0.5rem + --pf-t--global--spacer--md) calc(0.875rem + calc(1rem / 2) + 1rem + 0.5rem + --pf-t--global--spacer--300) calc(0.875rem + calc(1rem / 2) + 1rem + 0.5rem + 1rem)
	.pf-v6-c-form-control	--pf-v6-c-form-control__textarea--m-error--PaddingInlineEnd	calc(0.875rem + 0.5rem + 1rem)
--pf-v6-c-form-control__textarea--m-error--PaddingInlineEnd calc(--pf-v6-c-form-control--m-icon--icon--width + --pf-v6-c-form-control--ColumnGap + --pf-v6-c-form-control__utilities--textarea--PaddingInlineEnd) calc(--pf-v6-c-form-control--FontSize + --pf-t--global--spacer--gap--text-to-element--default + --pf-v6-c-form-control__textarea--PaddingInlineEnd) calc(--pf-t--global--font--size--body--default + --pf-t--global--spacer--sm + --pf-v6-c-form-control--PaddingInlineEnd--base) calc(--pf-t--global--font--size--sm + --pf-t--global--spacer--200 + --pf-v6-c-form-control--inset--base) calc(--pf-t--global--font--size--200 + 0.5rem + --pf-t--global--spacer--control--horizontal--default) calc(0.875rem + 0.5rem + --pf-t--global--spacer--md) calc(0.875rem + 0.5rem + --pf-t--global--spacer--300) calc(0.875rem + 0.5rem + 1rem)
	.pf-v6-c-form-control	--pf-v6-c-form-control--m-icon--PaddingInlineEnd	calc(0.875rem + 0.5rem + 1rem)
--pf-v6-c-form-control--m-icon--PaddingInlineEnd calc(--pf-v6-c-form-control--m-icon--icon--width + --pf-v6-c-form-control--ColumnGap + --pf-v6-c-form-control__utilities--input--PaddingInlineEnd) calc(--pf-v6-c-form-control--FontSize + --pf-t--global--spacer--gap--text-to-element--default + --pf-v6-c-form-control__input--PaddingInlineEnd) calc(--pf-t--global--font--size--body--default + --pf-t--global--spacer--sm + --pf-v6-c-form-control--PaddingInlineEnd--base) calc(--pf-t--global--font--size--sm + --pf-t--global--spacer--200 + --pf-v6-c-form-control--inset--base) calc(--pf-t--global--font--size--200 + 0.5rem + --pf-t--global--spacer--control--horizontal--default) calc(0.875rem + 0.5rem + --pf-t--global--spacer--md) calc(0.875rem + 0.5rem + --pf-t--global--spacer--300) calc(0.875rem + 0.5rem + 1rem)
	.pf-v6-c-form-control	--pf-v6-c-form-control--m-icon--icon--width	0.875rem
--pf-v6-c-form-control--m-icon--icon--width --pf-v6-c-form-control--FontSize --pf-t--global--font--size--body--default --pf-t--global--font--size--sm --pf-t--global--font--size--200 0.875rem
	.pf-v6-c-form-control	--pf-v6-c-form-control--m-icon--icon--spacer	calc(1rem / 2)
--pf-v6-c-form-control--m-icon--icon--spacer calc(--pf-t--global--spacer--control--horizontal--default / 2) calc(--pf-t--global--spacer--md / 2) calc(--pf-t--global--spacer--300 / 2) calc(1rem / 2)
	.pf-v6-c-form-control	--pf-v6-c-form-control--m-icon--icon--PaddingInlineEnd	calc(0.875rem + 1rem + 0.875rem + 0.5rem + 1rem)
--pf-v6-c-form-control--m-icon--icon--PaddingInlineEnd calc(--pf-v6-c-form-control--icon--width + --pf-v6-c-form-control__utilities--Gap + --pf-v6-c-form-control--m-icon--icon--width + --pf-v6-c-form-control--ColumnGap + --pf-v6-c-form-control__utilities--input--PaddingInlineEnd) calc(--pf-v6-c-form-control--FontSize + --pf-t--global--spacer--gap--group--horizontal + --pf-v6-c-form-control--FontSize + --pf-t--global--spacer--gap--text-to-element--default + --pf-v6-c-form-control__input--PaddingInlineEnd) calc(--pf-t--global--font--size--body--default + --pf-t--global--spacer--md + --pf-t--global--font--size--body--default + --pf-t--global--spacer--sm + --pf-v6-c-form-control--PaddingInlineEnd--base) calc(--pf-t--global--font--size--sm + --pf-t--global--spacer--300 + --pf-t--global--font--size--sm + --pf-t--global--spacer--200 + --pf-v6-c-form-control--inset--base) calc(--pf-t--global--font--size--200 + 1rem + --pf-t--global--font--size--200 + 0.5rem + --pf-t--global--spacer--control--horizontal--default) calc(0.875rem + 1rem + 0.875rem + 0.5rem + --pf-t--global--spacer--md) calc(0.875rem + 1rem + 0.875rem + 0.5rem + --pf-t--global--spacer--300) calc(0.875rem + 1rem + 0.875rem + 0.5rem + 1rem)
	.pf-v6-c-form-control	--pf-v6-c-form-control--textarea--Width	100%
--pf-v6-c-form-control--textarea--Width --pf-v6-c-form-control--Width 100%
	.pf-v6-c-form-control	--pf-v6-c-form-control--textarea--Height	auto
	.pf-v6-c-form-control	--pf-v6-c-form-control--textarea--PaddingBlockStart--offset	calc(-1 * -6px)
--pf-v6-c-form-control--textarea--PaddingBlockStart--offset calc(-1 * --pf-v6-c-form-control--OutlineOffset) calc(-1 * -6px)
	.pf-v6-c-form-control	--pf-v6-c-form-control--textarea--PaddingBlockEnd--offset	calc(-1 * -6px)
--pf-v6-c-form-control--textarea--PaddingBlockEnd--offset calc(-1 * --pf-v6-c-form-control--OutlineOffset) calc(-1 * -6px)
	.pf-v6-c-form-control	--pf-v6-c-form-control--textarea--PaddingInlineEnd--offset	calc(-1 * -6px)
--pf-v6-c-form-control--textarea--PaddingInlineEnd--offset calc(-1 * --pf-v6-c-form-control--OutlineOffset) calc(-1 * -6px)
	.pf-v6-c-form-control	--pf-v6-c-form-control--textarea--PaddingInlineStart--offset	calc(-1 * -6px)
--pf-v6-c-form-control--textarea--PaddingInlineStart--offset calc(-1 * --pf-v6-c-form-control--OutlineOffset) calc(-1 * -6px)
	.pf-v6-c-form-control	--pf-v6-c-form-control__icon--Color	(In light theme) #1f1f1f
--pf-v6-c-form-control__icon--Color --pf-t--global--icon--color--regular --pf-t--global--icon--color--100 --pf-t--color--gray--90 #1f1f1f
	.pf-v6-c-form-control	--pf-v6-c-form-control__icon--FontSize	0.875rem
--pf-v6-c-form-control__icon--FontSize --pf-t--global--icon--size--font--body--default --pf-t--global--font--size--body--default --pf-t--global--font--size--sm --pf-t--global--font--size--200 0.875rem
	.pf-v6-c-form-control	--pf-v6-c-form-control__icon--m-status--Color	(In light theme) #1f1f1f
--pf-v6-c-form-control__icon--m-status--Color --pf-t--global--icon--color--regular --pf-t--global--icon--color--100 --pf-t--color--gray--90 #1f1f1f
	.pf-v6-c-form-control	--pf-v6-c-form-control--m-success__icon--m-status--Color	(In light theme) #3d7317
--pf-v6-c-form-control--m-success__icon--m-status--Color --pf-t--global--icon--color--status--success--default --pf-t--global--color--status--success--default --pf-t--global--color--status--success--100 --pf-t--color--green--60 #3d7317
	.pf-v6-c-form-control	--pf-v6-c-form-control--m-warning__icon--m-status--Color	(In light theme) #dca614
--pf-v6-c-form-control--m-warning__icon--m-status--Color --pf-t--global--icon--color--status--warning--default --pf-t--global--color--status--warning--200 --pf-t--color--yellow--40 #dca614
	.pf-v6-c-form-control	--pf-v6-c-form-control--m-error__icon--m-status--Color	(In light theme) #b1380b
--pf-v6-c-form-control--m-error__icon--m-status--Color --pf-t--global--icon--color--status--danger--default --pf-t--global--color--status--danger--default --pf-t--global--color--status--danger--100 --pf-t--color--red-orange--60 #b1380b
	.pf-v6-c-form-control	--pf-v6-c-form-control__utilities--Gap	1rem
--pf-v6-c-form-control__utilities--Gap --pf-t--global--spacer--gap--group--horizontal --pf-t--global--spacer--md --pf-t--global--spacer--300 1rem
	.pf-v6-c-form-control	--pf-v6-c-form-control__utilities--PaddingBlockStart	0.5rem
--pf-v6-c-form-control__utilities--PaddingBlockStart --pf-v6-c-form-control--PaddingBlockStart --pf-v6-c-form-control--PaddingBlockStart--base --pf-t--global--spacer--control--vertical--default --pf-t--global--spacer--sm --pf-t--global--spacer--200 0.5rem
	.pf-v6-c-form-control	--pf-v6-c-form-control__utilities--PaddingInlineEnd	1rem
--pf-v6-c-form-control__utilities--PaddingInlineEnd --pf-v6-c-form-control--PaddingInlineEnd--base --pf-v6-c-form-control--inset--base --pf-t--global--spacer--control--horizontal--default --pf-t--global--spacer--md --pf-t--global--spacer--300 1rem
	.pf-v6-c-form-control	--pf-v6-c-form-control__utilities--textarea--PaddingBlockStart	calc(0.5rem - calc(-1 * -6px))
--pf-v6-c-form-control__utilities--textarea--PaddingBlockStart calc(--pf-v6-c-form-control__textarea--PaddingBlockStart - --pf-v6-c-form-control--textarea--PaddingBlockStart--offset) calc(--pf-v6-c-form-control--PaddingBlockStart--base - calc(-1 * --pf-v6-c-form-control--OutlineOffset)) calc(--pf-t--global--spacer--control--vertical--default - calc(-1 * -6px)) calc(--pf-t--global--spacer--sm - calc(-1 * -6px)) calc(--pf-t--global--spacer--200 - calc(-1 * -6px)) calc(0.5rem - calc(-1 * -6px))
	.pf-v6-c-form-control	--pf-v6-c-form-control__toggle-icon--PaddingInlineStart	0
	.pf-v6-c-form-control	--pf-v6-c-form-control__toggle-icon--PaddingInlineEnd	0
	.pf-v6-c-form-control	--pf-v6-c-form-control__toggle-icon--Color	(In light theme) #1f1f1f
--pf-v6-c-form-control__toggle-icon--Color --pf-t--global--icon--color--regular --pf-t--global--icon--color--100 --pf-t--color--gray--90 #1f1f1f
	.pf-v6-c-form-control	--pf-v6-c-form-control__toggle-icon--FontSize	0.875rem
--pf-v6-c-form-control__toggle-icon--FontSize --pf-t--global--icon--size--font--body--default --pf-t--global--font--size--body--default --pf-t--global--font--size--sm --pf-t--global--font--size--200 0.875rem
	.pf-v6-c-form-control	--pf-v6-c-form-control--m-disabled__toggle-icon--Color	(In light theme) #a3a3a3
--pf-v6-c-form-control--m-disabled__toggle-icon--Color --pf-t--global--icon--color--disabled --pf-t--global--color--disabled--200 --pf-t--color--gray--40 #a3a3a3
	.pf-v6-c-form-control:has(input)	--pf-v6-c-form-control--PaddingBlockStart	0.5rem
--pf-v6-c-form-control--PaddingBlockStart --pf-v6-c-form-control__input--PaddingBlockStart --pf-v6-c-form-control--PaddingBlockStart--base --pf-t--global--spacer--control--vertical--default --pf-t--global--spacer--sm --pf-t--global--spacer--200 0.5rem
	.pf-v6-c-form-control:has(input)	--pf-v6-c-form-control--PaddingBlockEnd	0.5rem
--pf-v6-c-form-control--PaddingBlockEnd --pf-v6-c-form-control__input--PaddingBlockEnd --pf-v6-c-form-control--PaddingBlockEnd--base --pf-t--global--spacer--control--vertical--default --pf-t--global--spacer--sm --pf-t--global--spacer--200 0.5rem
	.pf-v6-c-form-control:has(input)	--pf-v6-c-form-control--PaddingInlineStart	1rem
--pf-v6-c-form-control--PaddingInlineStart --pf-v6-c-form-control__input--PaddingInlineStart --pf-v6-c-form-control--PaddingInlineStart--base --pf-v6-c-form-control--inset--base --pf-t--global--spacer--control--horizontal--default --pf-t--global--spacer--md --pf-t--global--spacer--300 1rem
	.pf-v6-c-form-control:has(input)	--pf-v6-c-form-control--PaddingInlineEnd	1rem
--pf-v6-c-form-control--PaddingInlineEnd --pf-v6-c-form-control__input--PaddingInlineEnd --pf-v6-c-form-control--PaddingInlineEnd--base --pf-v6-c-form-control--inset--base --pf-t--global--spacer--control--horizontal--default --pf-t--global--spacer--md --pf-t--global--spacer--300 1rem
	.pf-v6-c-form-control:has(input)	--pf-v6-c-form-control__utilities--PaddingInlineEnd	1rem
--pf-v6-c-form-control__utilities--PaddingInlineEnd --pf-v6-c-form-control__utilities--input--PaddingInlineEnd --pf-v6-c-form-control__input--PaddingInlineEnd --pf-v6-c-form-control--PaddingInlineEnd--base --pf-v6-c-form-control--inset--base --pf-t--global--spacer--control--horizontal--default --pf-t--global--spacer--md --pf-t--global--spacer--300 1rem
	.pf-v6-c-form-control.pf-m-textarea.pf-m-success	--pf-v6-c-form-control--m-status--PaddingInlineEnd--offset	calc(0.875rem + 0.5rem)
--pf-v6-c-form-control--m-status--PaddingInlineEnd--offset calc(--pf-v6-c-form-control__icon--FontSize + --pf-v6-c-form-control--ColumnGap) calc(--pf-t--global--icon--size--font--body--default + --pf-t--global--spacer--gap--text-to-element--default) calc(--pf-t--global--font--size--body--default + --pf-t--global--spacer--sm) calc(--pf-t--global--font--size--sm + --pf-t--global--spacer--200) calc(--pf-t--global--font--size--200 + 0.5rem) calc(0.875rem + 0.5rem)
	.pf-v6-c-form-control.pf-m-textarea:has(textarea)	--pf-v6-c-form-control--PaddingBlockStart	calc(0.5rem - calc(-1 * -6px))
--pf-v6-c-form-control--PaddingBlockStart calc(--pf-v6-c-form-control__textarea--PaddingBlockStart - --pf-v6-c-form-control--textarea--PaddingBlockStart--offset) calc(--pf-v6-c-form-control--PaddingBlockStart--base - calc(-1 * --pf-v6-c-form-control--OutlineOffset)) calc(--pf-t--global--spacer--control--vertical--default - calc(-1 * -6px)) calc(--pf-t--global--spacer--sm - calc(-1 * -6px)) calc(--pf-t--global--spacer--200 - calc(-1 * -6px)) calc(0.5rem - calc(-1 * -6px))
	.pf-v6-c-form-control.pf-m-textarea:has(textarea)	--pf-v6-c-form-control--PaddingBlockEnd	calc(0.5rem - calc(-1 * -6px))
--pf-v6-c-form-control--PaddingBlockEnd calc(--pf-v6-c-form-control__textarea--PaddingBlockEnd - --pf-v6-c-form-control--textarea--PaddingBlockEnd--offset) calc(--pf-v6-c-form-control--PaddingBlockEnd--base - calc(-1 * --pf-v6-c-form-control--OutlineOffset)) calc(--pf-t--global--spacer--control--vertical--default - calc(-1 * -6px)) calc(--pf-t--global--spacer--sm - calc(-1 * -6px)) calc(--pf-t--global--spacer--200 - calc(-1 * -6px)) calc(0.5rem - calc(-1 * -6px))
	.pf-v6-c-form-control.pf-m-textarea:has(textarea)	--pf-v6-c-form-control--PaddingInlineStart	calc(1rem - calc(-1 * -6px))
--pf-v6-c-form-control--PaddingInlineStart calc(--pf-v6-c-form-control__textarea--PaddingInlineStart - --pf-v6-c-form-control--textarea--PaddingInlineStart--offset) calc(--pf-v6-c-form-control--PaddingInlineStart--base - calc(-1 * --pf-v6-c-form-control--OutlineOffset)) calc(--pf-v6-c-form-control--inset--base - calc(-1 * -6px)) calc(--pf-t--global--spacer--control--horizontal--default - calc(-1 * -6px)) calc(--pf-t--global--spacer--md - calc(-1 * -6px)) calc(--pf-t--global--spacer--300 - calc(-1 * -6px)) calc(1rem - calc(-1 * -6px))
	.pf-v6-c-form-control.pf-m-textarea:has(textarea)	--pf-v6-c-form-control--PaddingInlineEnd	calc(1rem - calc(-1 * -6px) + calc(0.875rem + 0.5rem), 0px)
--pf-v6-c-form-control--PaddingInlineEnd calc(--pf-v6-c-form-control__textarea--PaddingInlineEnd - --pf-v6-c-form-control--textarea--PaddingInlineEnd--offset + var(--pf-v6-c-form-control--m-status--PaddingInlineEnd--offset, 0px)) calc(--pf-v6-c-form-control--PaddingInlineEnd--base - calc(-1 * --pf-v6-c-form-control--OutlineOffset) + calc(--pf-v6-c-form-control__icon--FontSize + --pf-v6-c-form-control--ColumnGap), 0px) calc(--pf-v6-c-form-control--inset--base - calc(-1 * -6px) + calc(--pf-t--global--icon--size--font--body--default + --pf-t--global--spacer--gap--text-to-element--default), 0px) calc(--pf-t--global--spacer--control--horizontal--default - calc(-1 * -6px) + calc(--pf-t--global--font--size--body--default + --pf-t--global--spacer--sm), 0px) calc(--pf-t--global--spacer--md - calc(-1 * -6px) + calc(--pf-t--global--font--size--sm + --pf-t--global--spacer--200), 0px) calc(--pf-t--global--spacer--300 - calc(-1 * -6px) + calc(--pf-t--global--font--size--200 + 0.5rem), 0px) calc(1rem - calc(-1 * -6px) + calc(0.875rem + 0.5rem), 0px)
	.pf-v6-c-form-control.pf-m-textarea:has(textarea)	--pf-v6-c-form-control__utilities--PaddingInlineEnd	1rem
--pf-v6-c-form-control__utilities--PaddingInlineEnd --pf-v6-c-form-control__utilities--textarea--PaddingInlineEnd --pf-v6-c-form-control__textarea--PaddingInlineEnd --pf-v6-c-form-control--PaddingInlineEnd--base --pf-v6-c-form-control--inset--base --pf-t--global--spacer--control--horizontal--default --pf-t--global--spacer--md --pf-t--global--spacer--300 1rem
	.pf-v6-c-form-control.pf-m-readonly	--pf-v6-c-form-control--BackgroundColor	(In light theme) #f2f2f2
--pf-v6-c-form-control--BackgroundColor --pf-v6-c-form-control--m-readonly--BackgroundColor --pf-t--global--background--color--control--read-only --pf-t--global--background--color--200 --pf-t--color--gray--10 #f2f2f2
	.pf-v6-c-form-control.pf-m-readonly	--pf-v6-c-form-control--before--BorderColor	(In light theme) #e0e0e0
--pf-v6-c-form-control--before--BorderColor --pf-v6-c-form-control--m-readonly--BorderColor --pf-t--global--border--color--control--read-only --pf-t--global--border--color--50 --pf-t--color--gray--20 #e0e0e0
	.pf-v6-c-form-control.pf-m-readonly:hover	--pf-v6-c-form-control--hover--after--BorderColor	revert
--pf-v6-c-form-control--hover--after--BorderColor --pf-v6-c-form-control--m-readonly--hover--after--BorderColor revert
	.pf-v6-c-form-control.pf-m-readonly:not(.pf-m-success, .pf-m-warning, .pf-m-error)	--pf-v6-c-form-control--hover--after--BorderColor	revert
--pf-v6-c-form-control--hover--after--BorderColor --pf-v6-c-form-control--m-readonly--hover--after--BorderColor revert
	.pf-v6-c-form-control.pf-m-readonly.pf-m-plain	--pf-v6-c-form-control--m-readonly--BackgroundColor	transparent
--pf-v6-c-form-control--m-readonly--BackgroundColor --pf-v6-c-form-control--m-readonly--m-plain--BackgroundColor transparent
	.pf-v6-c-form-control.pf-m-readonly.pf-m-plain	--pf-v6-c-form-control--m-readonly--BorderColor	transparent
--pf-v6-c-form-control--m-readonly--BorderColor --pf-v6-c-form-control--m-readonly--m-plain--BorderColor transparent
	.pf-v6-c-form-control.pf-m-readonly.pf-m-plain	--pf-v6-c-form-control--inset--base	0
--pf-v6-c-form-control--inset--base --pf-v6-c-form-control--m-readonly--m-plain--inset--base 0
	.pf-v6-c-form-control.pf-m-readonly.pf-m-plain	--pf-v6-c-form-control--before--BorderStyle	none
	.pf-v6-c-form-control.pf-m-readonly.pf-m-plain	--pf-v6-c-form-control--after--BorderStyle	none
	.pf-v6-c-form-control.pf-m-readonly.pf-m-plain	--pf-v6-c-form-control--OutlineOffset	0
--pf-v6-c-form-control--OutlineOffset --pf-v6-c-form-control--m-readonly--m-plain--OutlineOffset 0
	.pf-v6-c-form-control.pf-m-expanded	--pf-v6-c-form-control--after--BorderColor	(In light theme) #0066cc
--pf-v6-c-form-control--after--BorderColor --pf-v6-c-form-control--m-expanded--after--BorderColor --pf-t--global--border--color--clicked --pf-t--global--color--brand--200 --pf-t--color--blue--50 #0066cc
	.pf-v6-c-form-control.pf-m-expanded	--pf-v6-c-form-control--after--BorderWidth	2px
--pf-v6-c-form-control--after--BorderWidth --pf-v6-c-form-control--m-expanded--after--BorderWidth --pf-t--global--border--width--control--clicked --pf-t--global--border--width--200 2px
	.pf-v6-c-form-control.pf-m-disabled	--pf-v6-c-form-control--BackgroundColor	(In light theme) #c7c7c7
--pf-v6-c-form-control--BackgroundColor --pf-v6-c-form-control--m-disabled--BackgroundColor --pf-t--global--background--color--disabled--default --pf-t--global--color--disabled--100 --pf-t--color--gray--30 #c7c7c7
	.pf-v6-c-form-control.pf-m-disabled	--pf-v6-c-form-control--Color	(In light theme) #4d4d4d
--pf-v6-c-form-control--Color --pf-v6-c-form-control--m-disabled--Color --pf-t--global--text--color--on-disabled --pf-t--global--color--disabled--300 --pf-t--color--gray--60 #4d4d4d
	.pf-v6-c-form-control.pf-m-disabled	--pf-v6-c-form-control--m-placeholder--Color	(In light theme) #4d4d4d
--pf-v6-c-form-control--m-placeholder--Color --pf-v6-c-form-control--m-disabled--Color --pf-t--global--text--color--on-disabled --pf-t--global--color--disabled--300 --pf-t--color--gray--60 #4d4d4d
	.pf-v6-c-form-control.pf-m-disabled	--pf-v6-c-form-control__toggle-icon--Color	(In light theme) #a3a3a3
--pf-v6-c-form-control__toggle-icon--Color --pf-v6-c-form-control--m-disabled__toggle-icon--Color --pf-t--global--icon--color--disabled --pf-t--global--color--disabled--200 --pf-t--color--gray--40 #a3a3a3
	.pf-v6-c-form-control.pf-m-disabled	--pf-v6-c-form-control--before--BorderStyle	none
	.pf-v6-c-form-control.pf-m-disabled	--pf-v6-c-form-control--after--BorderStyle	none
	.pf-v6-c-form-control.pf-m-error	--pf-v6-c-form-control--after--BorderColor	(In light theme) #b1380b
--pf-v6-c-form-control--after--BorderColor --pf-v6-c-form-control--m-error--after--BorderColor --pf-t--global--border--color--status--danger--default --pf-t--global--color--status--danger--default --pf-t--global--color--status--danger--100 --pf-t--color--red-orange--60 #b1380b
	.pf-v6-c-form-control.pf-m-error	--pf-v6-c-form-control--hover--after--BorderColor	(In light theme) #731f00
--pf-v6-c-form-control--hover--after--BorderColor --pf-v6-c-form-control--m-error--hover--after--BorderColor --pf-t--global--border--color--status--danger--hover --pf-t--global--color--status--danger--hover --pf-t--global--color--status--danger--200 --pf-t--color--red-orange--70 #731f00
	.pf-v6-c-form-control.pf-m-error	--pf-v6-c-form-control__icon--m-status--Color	(In light theme) #b1380b
--pf-v6-c-form-control__icon--m-status--Color --pf-v6-c-form-control--m-error__icon--m-status--Color --pf-t--global--icon--color--status--danger--default --pf-t--global--color--status--danger--default --pf-t--global--color--status--danger--100 --pf-t--color--red-orange--60 #b1380b
	.pf-v6-c-form-control.pf-m-error	--pf-v6-c-form-control--after--BorderWidth	1px
--pf-v6-c-form-control--after--BorderWidth --pf-v6-c-form-control--m-error--after--BorderWidth --pf-t--global--border--width--control--default --pf-t--global--border--width--100 1px
	.pf-v6-c-form-control.pf-m-error .pf-v6-c-form-control__icon.pf-m-status	--pf-v6-c-form-control--TransitionDuration--Opacity	200ms
--pf-v6-c-form-control--TransitionDuration--Opacity --pf-t--global--motion--duration--fade--default --pf-t--global--motion--duration--md --pf-t--global--duration--200 200ms
	.pf-v6-c-form-control.pf-m-error .pf-v6-c-form-control__icon.pf-m-status	--pf-v6-c-form-control--TransitionTimingFunction--Opacity	cubic-bezier(.4, 0, .2, 1)
--pf-v6-c-form-control--TransitionTimingFunction--Opacity --pf-t--global--motion--timing-function--default --pf-t--global--timing-function--200 cubic-bezier(.4, 0, .2, 1)
	.pf-v6-c-form-control.pf-m-success	--pf-v6-c-form-control--after--BorderColor	(In light theme) #3d7317
--pf-v6-c-form-control--after--BorderColor --pf-v6-c-form-control--m-success--after--BorderColor --pf-t--global--border--color--status--success--default --pf-t--global--color--status--success--default --pf-t--global--color--status--success--100 --pf-t--color--green--60 #3d7317
	.pf-v6-c-form-control.pf-m-success	--pf-v6-c-form-control--hover--after--BorderColor	(In light theme) #204d00
--pf-v6-c-form-control--hover--after--BorderColor --pf-v6-c-form-control--m-success--hover--after--BorderColor --pf-t--global--border--color--status--success--hover --pf-t--global--color--status--success--hover --pf-t--global--color--status--success--200 --pf-t--color--green--70 #204d00
	.pf-v6-c-form-control.pf-m-success	--pf-v6-c-form-control__icon--m-status--Color	(In light theme) #3d7317
--pf-v6-c-form-control__icon--m-status--Color --pf-v6-c-form-control--m-success__icon--m-status--Color --pf-t--global--icon--color--status--success--default --pf-t--global--color--status--success--default --pf-t--global--color--status--success--100 --pf-t--color--green--60 #3d7317
	.pf-v6-c-form-control.pf-m-success	--pf-v6-c-form-control--after--BorderWidth	1px
--pf-v6-c-form-control--after--BorderWidth --pf-v6-c-form-control--m-success--after--BorderWidth --pf-t--global--border--width--control--default --pf-t--global--border--width--100 1px
	.pf-v6-c-form-control.pf-m-warning	--pf-v6-c-form-control--after--BorderColor	(In light theme) #dca614
--pf-v6-c-form-control--after--BorderColor --pf-v6-c-form-control--m-warning--after--BorderColor --pf-t--global--border--color--status--warning--default --pf-t--global--color--status--warning--200 --pf-t--color--yellow--40 #dca614
	.pf-v6-c-form-control.pf-m-warning	--pf-v6-c-form-control--hover--after--BorderColor	(In light theme) #b98412
--pf-v6-c-form-control--hover--after--BorderColor --pf-v6-c-form-control--m-warning--hover--after--BorderColor --pf-t--global--border--color--status--warning--hover --pf-t--global--color--status--warning--300 --pf-t--color--yellow--50 #b98412
	.pf-v6-c-form-control.pf-m-warning	--pf-v6-c-form-control__icon--m-status--Color	(In light theme) #dca614
--pf-v6-c-form-control__icon--m-status--Color --pf-v6-c-form-control--m-warning__icon--m-status--Color --pf-t--global--icon--color--status--warning--default --pf-t--global--color--status--warning--200 --pf-t--color--yellow--40 #dca614
	.pf-v6-c-form-control.pf-m-warning	--pf-v6-c-form-control--after--BorderWidth	1px
--pf-v6-c-form-control--after--BorderWidth --pf-v6-c-form-control--m-warning--after--BorderWidth --pf-t--global--border--width--control--default --pf-t--global--border--width--100 1px
	.pf-v6-c-form-control:hover	--pf-v6-c-form-control--after--BorderColor	(In light theme) #4394e5
--pf-v6-c-form-control--after--BorderColor --pf-v6-c-form-control--hover--after--BorderColor --pf-t--global--border--color--hover --pf-t--global--color--brand--100 --pf-t--color--blue--40 #4394e5
	.pf-v6-c-form-control:hover	--pf-v6-c-form-control--after--BorderWidth	1px
--pf-v6-c-form-control--after--BorderWidth --pf-v6-c-form-control--hover--after--BorderWidth --pf-t--global--border--width--control--hover --pf-t--global--border--width--100 1px
	.pf-v6-c-form-control.pf-m-icon	--pf-v6-c-form-control--PaddingInlineEnd	calc(0.875rem + 0.5rem + 1rem)
--pf-v6-c-form-control--PaddingInlineEnd --pf-v6-c-form-control--m-icon--PaddingInlineEnd calc(--pf-v6-c-form-control--m-icon--icon--width + --pf-v6-c-form-control--ColumnGap + --pf-v6-c-form-control__utilities--input--PaddingInlineEnd) calc(--pf-v6-c-form-control--FontSize + --pf-t--global--spacer--gap--text-to-element--default + --pf-v6-c-form-control__input--PaddingInlineEnd) calc(--pf-t--global--font--size--body--default + --pf-t--global--spacer--sm + --pf-v6-c-form-control--PaddingInlineEnd--base) calc(--pf-t--global--font--size--sm + --pf-t--global--spacer--200 + --pf-v6-c-form-control--inset--base) calc(--pf-t--global--font--size--200 + 0.5rem + --pf-t--global--spacer--control--horizontal--default) calc(0.875rem + 0.5rem + --pf-t--global--spacer--md) calc(0.875rem + 0.5rem + --pf-t--global--spacer--300) calc(0.875rem + 0.5rem + 1rem)
	.pf-v6-c-form-control:has(select)	--pf-v6-c-form-control--PaddingBlockStart	0.5rem
--pf-v6-c-form-control--PaddingBlockStart --pf-v6-c-form-control__select--PaddingBlockStart --pf-v6-c-form-control--PaddingBlockStart--base --pf-t--global--spacer--control--vertical--default --pf-t--global--spacer--sm --pf-t--global--spacer--200 0.5rem
	.pf-v6-c-form-control:has(select)	--pf-v6-c-form-control--PaddingBlockEnd	0.5rem
--pf-v6-c-form-control--PaddingBlockEnd --pf-v6-c-form-control__select--PaddingBlockEnd --pf-v6-c-form-control--PaddingBlockEnd--base --pf-t--global--spacer--control--vertical--default --pf-t--global--spacer--sm --pf-t--global--spacer--200 0.5rem
	.pf-v6-c-form-control:has(select)	--pf-v6-c-form-control--PaddingInlineStart	1rem
--pf-v6-c-form-control--PaddingInlineStart --pf-v6-c-form-control__select--PaddingInlineStart --pf-v6-c-form-control--PaddingInlineStart--base --pf-v6-c-form-control--inset--base --pf-t--global--spacer--control--horizontal--default --pf-t--global--spacer--md --pf-t--global--spacer--300 1rem
	.pf-v6-c-form-control:has(select)	--pf-v6-c-form-control--PaddingInlineEnd	calc(1rem + 0.875rem)
--pf-v6-c-form-control--PaddingInlineEnd calc(--pf-v6-c-form-control__select--PaddingInlineEnd + --pf-v6-c-form-control__icon--FontSize) calc(--pf-v6-c-form-control--PaddingInlineEnd--base + --pf-t--global--icon--size--font--body--default) calc(--pf-v6-c-form-control--inset--base + --pf-t--global--font--size--body--default) calc(--pf-t--global--spacer--control--horizontal--default + --pf-t--global--font--size--sm) calc(--pf-t--global--spacer--md + --pf-t--global--font--size--200) calc(--pf-t--global--spacer--300 + 0.875rem) calc(1rem + 0.875rem)
	.pf-v6-c-form-control:has(select)	--pf-v6-c-form-control__utilities--PaddingInlineEnd	1rem
--pf-v6-c-form-control__utilities--PaddingInlineEnd --pf-v6-c-form-control__utilities--select--PaddingInlineEnd --pf-v6-c-form-control__select--PaddingInlineEnd --pf-v6-c-form-control--PaddingInlineEnd--base --pf-v6-c-form-control--inset--base --pf-t--global--spacer--control--horizontal--default --pf-t--global--spacer--md --pf-t--global--spacer--300 1rem
	.pf-v6-c-form-control.pf-m-placeholder > select	--pf-v6-c-form-control--Color	(In light theme) #4d4d4d
--pf-v6-c-form-control--Color --pf-v6-c-form-control--m-placeholder--Color --pf-t--global--text--color--placeholder --pf-t--global--text--color--subtle --pf-t--global--text--color--200 --pf-t--color--gray--60 #4d4d4d
	.pf-v6-c-form-control.pf-m-resize-vertical	--pf-v6-c-form-control--Resize	vertical
	.pf-v6-c-form-control.pf-m-resize-horizontal	--pf-v6-c-form-control--Resize	horizontal
	.pf-v6-c-form-control.pf-m-resize-both	--pf-v6-c-form-control--Resize	both
	.pf-v6-c-form-control__icon.pf-m-status	--pf-v6-c-form-control__icon--Color	(In light theme) #1f1f1f
--pf-v6-c-form-control__icon--Color --pf-v6-c-form-control__icon--m-status--Color --pf-t--global--icon--color--regular --pf-t--global--icon--color--100 --pf-t--color--gray--90 #1f1f1f

Edit this page on GitHub