Text input

A text input components allows users to input short text.

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	0.5rem
--pf-v6-c-form-control--PaddingBlockStart --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-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--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--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--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	calc(0.875rem + 1rem + 0.5rem)
--pf-v6-c-form-control--m-success--PaddingInlineEnd calc(--pf-v6-c-form-control__icon--FontSize + --pf-v6-c-form-control--inset--base + --pf-v6-c-form-control--ColumnGap) calc(--pf-t--global--icon--size--font--body--default + --pf-t--global--spacer--control--horizontal--default + --pf-t--global--spacer--gap--text-to-element--default) calc(--pf-t--global--font--size--body--default + --pf-t--global--spacer--md + --pf-t--global--spacer--sm) calc(--pf-t--global--font--size--sm + --pf-t--global--spacer--300 + --pf-t--global--spacer--200) calc(--pf-t--global--font--size--200 + 1rem + 0.5rem) calc(0.875rem + 1rem + 0.5rem)
	.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	calc(0.875rem + 1rem + 0.5rem)
--pf-v6-c-form-control--m-warning--PaddingInlineEnd calc(--pf-v6-c-form-control__icon--FontSize + --pf-v6-c-form-control--inset--base + --pf-v6-c-form-control--ColumnGap) calc(--pf-t--global--icon--size--font--body--default + --pf-t--global--spacer--control--horizontal--default + --pf-t--global--spacer--gap--text-to-element--default) calc(--pf-t--global--font--size--body--default + --pf-t--global--spacer--md + --pf-t--global--spacer--sm) calc(--pf-t--global--font--size--sm + --pf-t--global--spacer--300 + --pf-t--global--spacer--200) calc(--pf-t--global--font--size--200 + 1rem + 0.5rem) calc(0.875rem + 1rem + 0.5rem)
	.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	calc(0.875rem + 1rem + 0.5rem)
--pf-v6-c-form-control--m-error--PaddingInlineEnd calc(--pf-v6-c-form-control__icon--FontSize + --pf-v6-c-form-control--inset--base + --pf-v6-c-form-control--ColumnGap) calc(--pf-t--global--icon--size--font--body--default + --pf-t--global--spacer--control--horizontal--default + --pf-t--global--spacer--gap--text-to-element--default) calc(--pf-t--global--font--size--body--default + --pf-t--global--spacer--md + --pf-t--global--spacer--sm) calc(--pf-t--global--font--size--sm + --pf-t--global--spacer--300 + --pf-t--global--spacer--200) calc(--pf-t--global--font--size--200 + 1rem + 0.5rem) calc(0.875rem + 1rem + 0.5rem)
	.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--m-icon--PaddingInlineEnd	calc(1rem + 0.875rem + calc(1rem / 2))
--pf-v6-c-form-control--m-icon--PaddingInlineEnd calc(--pf-v6-c-form-control--inset--base + --pf-v6-c-form-control--m-icon--icon--width + --pf-v6-c-form-control--m-icon--icon--spacer) calc(--pf-t--global--spacer--control--horizontal--default + --pf-v6-c-form-control--FontSize + calc(--pf-t--global--spacer--control--horizontal--default / 2)) calc(--pf-t--global--spacer--md + --pf-t--global--font--size--body--default + calc(--pf-t--global--spacer--md / 2)) calc(--pf-t--global--spacer--300 + --pf-t--global--font--size--sm + calc(--pf-t--global--spacer--300 / 2)) calc(1rem + --pf-t--global--font--size--200 + calc(1rem / 2)) calc(1rem + 0.875rem + calc(1rem / 2))
	.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(1rem + 0.875rem + calc(1rem / 2) + 0.875rem + calc(1rem / 2))
--pf-v6-c-form-control--m-icon--icon--PaddingInlineEnd calc(--pf-v6-c-form-control--inset--base + --pf-v6-c-form-control--m-error--icon--width + --pf-v6-c-form-control--m-icon--icon--spacer + --pf-v6-c-form-control--m-icon--icon--width + --pf-v6-c-form-control--m-icon--icon--spacer) calc(--pf-t--global--spacer--control--horizontal--default + --pf-v6-c-form-control--FontSize + calc(--pf-t--global--spacer--control--horizontal--default / 2) + --pf-v6-c-form-control--FontSize + calc(--pf-t--global--spacer--control--horizontal--default / 2)) calc(--pf-t--global--spacer--md + --pf-t--global--font--size--body--default + calc(--pf-t--global--spacer--md / 2) + --pf-t--global--font--size--body--default + calc(--pf-t--global--spacer--md / 2)) calc(--pf-t--global--spacer--300 + --pf-t--global--font--size--sm + calc(--pf-t--global--spacer--300 / 2) + --pf-t--global--font--size--sm + calc(--pf-t--global--spacer--300 / 2)) calc(1rem + --pf-t--global--font--size--200 + calc(1rem / 2) + --pf-t--global--font--size--200 + calc(1rem / 2)) calc(1rem + 0.875rem + calc(1rem / 2) + 0.875rem + calc(1rem / 2))
	.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--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--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--m-success--m-status--PaddingInlineEnd	calc((0.875rem * 2) + 1rem + 1rem + 1rem)
--pf-v6-c-form-control__select--m-success--m-status--PaddingInlineEnd calc((--pf-v6-c-form-control__icon--FontSize * 2) + --pf-v6-c-form-control__utilities--Gap + --pf-v6-c-form-control__toggle-icon--PaddingInlineEnd + --pf-v6-c-form-control__toggle-icon--PaddingInlineStart) calc((--pf-t--global--icon--size--font--body--default * 2) + --pf-t--global--spacer--gap--group--horizontal + --pf-v6-c-form-control--inset--base + --pf-v6-c-form-control--inset--base) calc((--pf-t--global--font--size--body--default * 2) + --pf-t--global--spacer--md + --pf-t--global--spacer--control--horizontal--default + --pf-t--global--spacer--control--horizontal--default) calc((--pf-t--global--font--size--sm * 2) + --pf-t--global--spacer--300 + --pf-t--global--spacer--md + --pf-t--global--spacer--md) calc((--pf-t--global--font--size--200 * 2) + 1rem + --pf-t--global--spacer--300 + --pf-t--global--spacer--300) calc((0.875rem * 2) + 1rem + 1rem + 1rem)
	.pf-v6-c-form-control	--pf-v6-c-form-control__select--m-warning--m-status--PaddingInlineEnd	calc((0.875rem * 2) + 1rem + 1rem + 1rem)
--pf-v6-c-form-control__select--m-warning--m-status--PaddingInlineEnd calc((--pf-v6-c-form-control__icon--FontSize * 2) + --pf-v6-c-form-control__utilities--Gap + --pf-v6-c-form-control__toggle-icon--PaddingInlineEnd + --pf-v6-c-form-control__toggle-icon--PaddingInlineStart) calc((--pf-t--global--icon--size--font--body--default * 2) + --pf-t--global--spacer--gap--group--horizontal + --pf-v6-c-form-control--inset--base + --pf-v6-c-form-control--inset--base) calc((--pf-t--global--font--size--body--default * 2) + --pf-t--global--spacer--md + --pf-t--global--spacer--control--horizontal--default + --pf-t--global--spacer--control--horizontal--default) calc((--pf-t--global--font--size--sm * 2) + --pf-t--global--spacer--300 + --pf-t--global--spacer--md + --pf-t--global--spacer--md) calc((--pf-t--global--font--size--200 * 2) + 1rem + --pf-t--global--spacer--300 + --pf-t--global--spacer--300) calc((0.875rem * 2) + 1rem + 1rem + 1rem)
	.pf-v6-c-form-control	--pf-v6-c-form-control__select--m-error--m-status--PaddingInlineEnd	calc((0.875rem * 2) + 1rem + 1rem + 1rem)
--pf-v6-c-form-control__select--m-error--m-status--PaddingInlineEnd calc((--pf-v6-c-form-control__icon--FontSize * 2) + --pf-v6-c-form-control__utilities--Gap + --pf-v6-c-form-control__toggle-icon--PaddingInlineEnd + --pf-v6-c-form-control__toggle-icon--PaddingInlineStart) calc((--pf-t--global--icon--size--font--body--default * 2) + --pf-t--global--spacer--gap--group--horizontal + --pf-v6-c-form-control--inset--base + --pf-v6-c-form-control--inset--base) calc((--pf-t--global--font--size--body--default * 2) + --pf-t--global--spacer--md + --pf-t--global--spacer--control--horizontal--default + --pf-t--global--spacer--control--horizontal--default) calc((--pf-t--global--font--size--sm * 2) + --pf-t--global--spacer--300 + --pf-t--global--spacer--md + --pf-t--global--spacer--md) calc((--pf-t--global--font--size--200 * 2) + 1rem + --pf-t--global--spacer--300 + --pf-t--global--spacer--300) calc((0.875rem * 2) + 1rem + 1rem + 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-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--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__toggle-icon--PaddingInlineEnd	1rem
--pf-v6-c-form-control__toggle-icon--PaddingInlineEnd --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__toggle-icon--PaddingInlineStart	1rem
--pf-v6-c-form-control__toggle-icon--PaddingInlineStart --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__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--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.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-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--PaddingInlineEnd	calc(0.875rem + 1rem + 0.5rem)
--pf-v6-c-form-control--PaddingInlineEnd --pf-v6-c-form-control--m-error--PaddingInlineEnd calc(--pf-v6-c-form-control__icon--FontSize + --pf-v6-c-form-control--inset--base + --pf-v6-c-form-control--ColumnGap) calc(--pf-t--global--icon--size--font--body--default + --pf-t--global--spacer--control--horizontal--default + --pf-t--global--spacer--gap--text-to-element--default) calc(--pf-t--global--font--size--body--default + --pf-t--global--spacer--md + --pf-t--global--spacer--sm) calc(--pf-t--global--font--size--sm + --pf-t--global--spacer--300 + --pf-t--global--spacer--200) calc(--pf-t--global--font--size--200 + 1rem + 0.5rem) calc(0.875rem + 1rem + 0.5rem)
	.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__select--PaddingInlineEnd	calc((0.875rem * 2) + 1rem + 1rem + 1rem)
--pf-v6-c-form-control__select--PaddingInlineEnd --pf-v6-c-form-control__select--m-error--m-status--PaddingInlineEnd calc((--pf-v6-c-form-control__icon--FontSize * 2) + --pf-v6-c-form-control__utilities--Gap + --pf-v6-c-form-control__toggle-icon--PaddingInlineEnd + --pf-v6-c-form-control__toggle-icon--PaddingInlineStart) calc((--pf-t--global--icon--size--font--body--default * 2) + --pf-t--global--spacer--gap--group--horizontal + --pf-v6-c-form-control--inset--base + --pf-v6-c-form-control--inset--base) calc((--pf-t--global--font--size--body--default * 2) + --pf-t--global--spacer--md + --pf-t--global--spacer--control--horizontal--default + --pf-t--global--spacer--control--horizontal--default) calc((--pf-t--global--font--size--sm * 2) + --pf-t--global--spacer--300 + --pf-t--global--spacer--md + --pf-t--global--spacer--md) calc((--pf-t--global--font--size--200 * 2) + 1rem + --pf-t--global--spacer--300 + --pf-t--global--spacer--300) calc((0.875rem * 2) + 1rem + 1rem + 1rem)
	.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-m-icon	--pf-v6-c-form-control--PaddingInlineEnd	calc(1rem + 0.875rem + calc(1rem / 2) + 0.875rem + calc(1rem / 2))
--pf-v6-c-form-control--PaddingInlineEnd --pf-v6-c-form-control--m-icon--icon--PaddingInlineEnd calc(--pf-v6-c-form-control--inset--base + --pf-v6-c-form-control--m-error--icon--width + --pf-v6-c-form-control--m-icon--icon--spacer + --pf-v6-c-form-control--m-icon--icon--width + --pf-v6-c-form-control--m-icon--icon--spacer) calc(--pf-t--global--spacer--control--horizontal--default + --pf-v6-c-form-control--FontSize + calc(--pf-t--global--spacer--control--horizontal--default / 2) + --pf-v6-c-form-control--FontSize + calc(--pf-t--global--spacer--control--horizontal--default / 2)) calc(--pf-t--global--spacer--md + --pf-t--global--font--size--body--default + calc(--pf-t--global--spacer--md / 2) + --pf-t--global--font--size--body--default + calc(--pf-t--global--spacer--md / 2)) calc(--pf-t--global--spacer--300 + --pf-t--global--font--size--sm + calc(--pf-t--global--spacer--300 / 2) + --pf-t--global--font--size--sm + calc(--pf-t--global--spacer--300 / 2)) calc(1rem + --pf-t--global--font--size--200 + calc(1rem / 2) + --pf-t--global--font--size--200 + calc(1rem / 2)) calc(1rem + 0.875rem + calc(1rem / 2) + 0.875rem + calc(1rem / 2))
	.pf-v6-c-form-control.pf-m-success	--pf-v6-c-form-control--PaddingInlineEnd	calc(0.875rem + 1rem + 0.5rem)
--pf-v6-c-form-control--PaddingInlineEnd --pf-v6-c-form-control--m-success--PaddingInlineEnd calc(--pf-v6-c-form-control__icon--FontSize + --pf-v6-c-form-control--inset--base + --pf-v6-c-form-control--ColumnGap) calc(--pf-t--global--icon--size--font--body--default + --pf-t--global--spacer--control--horizontal--default + --pf-t--global--spacer--gap--text-to-element--default) calc(--pf-t--global--font--size--body--default + --pf-t--global--spacer--md + --pf-t--global--spacer--sm) calc(--pf-t--global--font--size--sm + --pf-t--global--spacer--300 + --pf-t--global--spacer--200) calc(--pf-t--global--font--size--200 + 1rem + 0.5rem) calc(0.875rem + 1rem + 0.5rem)
	.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__select--PaddingInlineEnd	calc((0.875rem * 2) + 1rem + 1rem + 1rem)
--pf-v6-c-form-control__select--PaddingInlineEnd --pf-v6-c-form-control__select--m-success--m-status--PaddingInlineEnd calc((--pf-v6-c-form-control__icon--FontSize * 2) + --pf-v6-c-form-control__utilities--Gap + --pf-v6-c-form-control__toggle-icon--PaddingInlineEnd + --pf-v6-c-form-control__toggle-icon--PaddingInlineStart) calc((--pf-t--global--icon--size--font--body--default * 2) + --pf-t--global--spacer--gap--group--horizontal + --pf-v6-c-form-control--inset--base + --pf-v6-c-form-control--inset--base) calc((--pf-t--global--font--size--body--default * 2) + --pf-t--global--spacer--md + --pf-t--global--spacer--control--horizontal--default + --pf-t--global--spacer--control--horizontal--default) calc((--pf-t--global--font--size--sm * 2) + --pf-t--global--spacer--300 + --pf-t--global--spacer--md + --pf-t--global--spacer--md) calc((--pf-t--global--font--size--200 * 2) + 1rem + --pf-t--global--spacer--300 + --pf-t--global--spacer--300) calc((0.875rem * 2) + 1rem + 1rem + 1rem)
	.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-success.pf-m-icon	--pf-v6-c-form-control--PaddingInlineEnd	calc(1rem + 0.875rem + calc(1rem / 2) + 0.875rem + calc(1rem / 2))
--pf-v6-c-form-control--PaddingInlineEnd --pf-v6-c-form-control--m-icon--icon--PaddingInlineEnd calc(--pf-v6-c-form-control--inset--base + --pf-v6-c-form-control--m-error--icon--width + --pf-v6-c-form-control--m-icon--icon--spacer + --pf-v6-c-form-control--m-icon--icon--width + --pf-v6-c-form-control--m-icon--icon--spacer) calc(--pf-t--global--spacer--control--horizontal--default + --pf-v6-c-form-control--FontSize + calc(--pf-t--global--spacer--control--horizontal--default / 2) + --pf-v6-c-form-control--FontSize + calc(--pf-t--global--spacer--control--horizontal--default / 2)) calc(--pf-t--global--spacer--md + --pf-t--global--font--size--body--default + calc(--pf-t--global--spacer--md / 2) + --pf-t--global--font--size--body--default + calc(--pf-t--global--spacer--md / 2)) calc(--pf-t--global--spacer--300 + --pf-t--global--font--size--sm + calc(--pf-t--global--spacer--300 / 2) + --pf-t--global--font--size--sm + calc(--pf-t--global--spacer--300 / 2)) calc(1rem + --pf-t--global--font--size--200 + calc(1rem / 2) + --pf-t--global--font--size--200 + calc(1rem / 2)) calc(1rem + 0.875rem + calc(1rem / 2) + 0.875rem + calc(1rem / 2))
	.pf-v6-c-form-control.pf-m-warning	--pf-v6-c-form-control--PaddingInlineEnd	calc(0.875rem + 1rem + 0.5rem)
--pf-v6-c-form-control--PaddingInlineEnd --pf-v6-c-form-control--m-warning--PaddingInlineEnd calc(--pf-v6-c-form-control__icon--FontSize + --pf-v6-c-form-control--inset--base + --pf-v6-c-form-control--ColumnGap) calc(--pf-t--global--icon--size--font--body--default + --pf-t--global--spacer--control--horizontal--default + --pf-t--global--spacer--gap--text-to-element--default) calc(--pf-t--global--font--size--body--default + --pf-t--global--spacer--md + --pf-t--global--spacer--sm) calc(--pf-t--global--font--size--sm + --pf-t--global--spacer--300 + --pf-t--global--spacer--200) calc(--pf-t--global--font--size--200 + 1rem + 0.5rem) calc(0.875rem + 1rem + 0.5rem)
	.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__select--PaddingInlineEnd	calc((0.875rem * 2) + 1rem + 1rem + 1rem)
--pf-v6-c-form-control__select--PaddingInlineEnd --pf-v6-c-form-control__select--m-warning--m-status--PaddingInlineEnd calc((--pf-v6-c-form-control__icon--FontSize * 2) + --pf-v6-c-form-control__utilities--Gap + --pf-v6-c-form-control__toggle-icon--PaddingInlineEnd + --pf-v6-c-form-control__toggle-icon--PaddingInlineStart) calc((--pf-t--global--icon--size--font--body--default * 2) + --pf-t--global--spacer--gap--group--horizontal + --pf-v6-c-form-control--inset--base + --pf-v6-c-form-control--inset--base) calc((--pf-t--global--font--size--body--default * 2) + --pf-t--global--spacer--md + --pf-t--global--spacer--control--horizontal--default + --pf-t--global--spacer--control--horizontal--default) calc((--pf-t--global--font--size--sm * 2) + --pf-t--global--spacer--300 + --pf-t--global--spacer--md + --pf-t--global--spacer--md) calc((--pf-t--global--font--size--200 * 2) + 1rem + --pf-t--global--spacer--300 + --pf-t--global--spacer--300) calc((0.875rem * 2) + 1rem + 1rem + 1rem)
	.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.pf-m-warning.pf-m-icon	--pf-v6-c-form-control--PaddingInlineEnd	calc(1rem + 0.875rem + calc(1rem / 2) + 0.875rem + calc(1rem / 2))
--pf-v6-c-form-control--PaddingInlineEnd --pf-v6-c-form-control--m-icon--icon--PaddingInlineEnd calc(--pf-v6-c-form-control--inset--base + --pf-v6-c-form-control--m-error--icon--width + --pf-v6-c-form-control--m-icon--icon--spacer + --pf-v6-c-form-control--m-icon--icon--width + --pf-v6-c-form-control--m-icon--icon--spacer) calc(--pf-t--global--spacer--control--horizontal--default + --pf-v6-c-form-control--FontSize + calc(--pf-t--global--spacer--control--horizontal--default / 2) + --pf-v6-c-form-control--FontSize + calc(--pf-t--global--spacer--control--horizontal--default / 2)) calc(--pf-t--global--spacer--md + --pf-t--global--font--size--body--default + calc(--pf-t--global--spacer--md / 2) + --pf-t--global--font--size--body--default + calc(--pf-t--global--spacer--md / 2)) calc(--pf-t--global--spacer--300 + --pf-t--global--font--size--sm + calc(--pf-t--global--spacer--300 / 2) + --pf-t--global--font--size--sm + calc(--pf-t--global--spacer--300 / 2)) calc(1rem + --pf-t--global--font--size--200 + calc(1rem / 2) + --pf-t--global--font--size--200 + calc(1rem / 2)) calc(1rem + 0.875rem + calc(1rem / 2) + 0.875rem + calc(1rem / 2))
	.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(1rem + 0.875rem + calc(1rem / 2))
--pf-v6-c-form-control--PaddingInlineEnd --pf-v6-c-form-control--m-icon--PaddingInlineEnd calc(--pf-v6-c-form-control--inset--base + --pf-v6-c-form-control--m-icon--icon--width + --pf-v6-c-form-control--m-icon--icon--spacer) calc(--pf-t--global--spacer--control--horizontal--default + --pf-v6-c-form-control--FontSize + calc(--pf-t--global--spacer--control--horizontal--default / 2)) calc(--pf-t--global--spacer--md + --pf-t--global--font--size--body--default + calc(--pf-t--global--spacer--md / 2)) calc(--pf-t--global--spacer--300 + --pf-t--global--font--size--sm + calc(--pf-t--global--spacer--300 / 2)) calc(1rem + --pf-t--global--font--size--200 + calc(1rem / 2)) calc(1rem + 0.875rem + calc(1rem / 2))
	.pf-v6-c-form-control > select	--pf-v6-c-form-control--PaddingInlineEnd	1rem
--pf-v6-c-form-control--PaddingInlineEnd --pf-v6-c-form-control__select--PaddingInlineEnd --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 > 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--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
	select ~ .pf-v6-c-form-control__utilities	--pf-v6-c-form-control__utilities--PaddingInlineEnd	0

Edit this page on GitHub