Form select

A form select is a form element that embeds browser-native menus.

Examples

Basic

Validated

Disabled

Grouped

Props

FormSelect

*required
Name	Type	Default	Description
childrenrequired	React.ReactNode		content rendered inside the FormSelect
aria-label	string		Custom flag to show that the FormSelect requires an associated id or aria-label.
className	string	''	additional classes added to the FormSelect control
isDisabled	boolean	false	Flag indicating the FormSelect is disabled
isRequired	boolean	false	Sets the FormSelect required.
onBlur	(event: React.FormEvent<HTMLSelectElement>) => void	(): any => undefined	Optional callback for updating when selection loses focus
onChange	(event: React.FormEvent<HTMLSelectElement>, value: string) => void	(): any => undefined	Optional callback for updating when selection changes
onFocus	(event: React.FormEvent<HTMLSelectElement>) => void	(): any => undefined	Optional callback for updating when selection gets focus
ouiaId	number \| string		Value to overwrite the randomly generated data-ouia-component-id.
ouiaSafe	boolean	true	Set the value of data-ouia-safe. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false.
validated	'success' \| 'warning' \| 'error' \| 'default'	'default'	Value to indicate if the select is modified to show that validation state. If set to success, select will be modified to indicate valid state. If set to error, select will be modified to indicate error state.
value	any	''	value of selected option

FormSelectOption

*required
Name	Type	Default	Description
labelrequired	string		the label for the option
className	string	''	additional classes added to the Select Option
isDisabled	boolean	false	flag indicating if the option is disabled
isPlaceholder	boolean	false	flag indicating if option will have placeholder styling applied when selected *
value	any	''	the value for the option

FormSelectOptionGroup

*required
Name	Type	Default	Description
labelrequired	string		the label for the option
children	React.ReactNode	null	content rendered inside the Select Option Group
className	string	''	additional classes added to the Select Option
isDisabled	boolean	false	flag indicating if the Option Group is disabled

CSS variables

Expand or collapse column	Selector	Variable	Value
	.pf-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