Form control

A form control is a form element that guides users and accepts user input, such as text areas and selection menus.

Examples

Input

Note: In webkit browsers, inputs with status icons that are autocompleted will have their icons removed by the user agent stylesheet. If the field does not need to use autocomplete, turn it off with autocomplete="off" to avoid the problem. Otherwise, use helper text instead to ensure that the status will remain visible if the field is autocompleted.

Select

Textarea

Readonly

Readonly plain

Documentation

Accessibility

Attribute	Applied to	Outcome
`id`	`.pf-v6-c-form-control > input`,`.pf-v6-c-form-control > select`, or `.pf-v6-c-form-control > textarea`	Provides an `id` value that can be used with the `for` attribute on an associated `<label>` element to provide an accessible label for the form control element.
`aria-invalid="true"`	`.pf-v6-c-form-control > input`,`.pf-v6-c-form-control > select`, or `.pf-v6-c-form-control > textarea`	Indicates that the form control is in the error state and applies error state styling. Use with `.pf-m-error` on the `.pf-v6-c-form-control` to ensure correct styling.
`aria-label="descriptive text"`	`.pf-v6-c-form-control > input`,`.pf-v6-c-form-control > select`, or `.pf-v6-c-form-control > textarea`	Provides an accessible label for assistive technology.
`aria-expanded="true"`	`.pf-v6-c-form-control > input`	Indicates that clicking in the form control has toggled something else to be expanded. Use with `.pf-m-expanded` on the `.pf-v6-c-form-control` to ensure correct styling.

Usage

Class	Applied to	Outcome
`.pf-v6-c-form-control`	`<span>`	Initiates a container for an input, text area or select. For styling of checkboxes or radios see the checkbox component or radio component. Required
`.pf-v6-c-form-control__utilities`	`<span>`	Initiates a container for elements like icons to be associated with the form control.
`.pf-v6-c-form-control__icon`	`<span>`	Creates a container for an icon associated with a form control.
`.pf-v6-c-form-control__toggle-icon`	`<span>`	Initiates a toggle icon for a form select.
`.pf-m-resize-vertical`	`.pf-v6-c-form-control`	Modifies a form control element containing a text area so it can only be resized vertically.
`.pf-m-resize-horizontal`	`.pf-v6-c-form-control`	Modifies a form control element containing a text area so it can only be resized horizontally.
`.pf-m-resize-both`	`.pf-v6-c-form-control`	Modifies a `.pf-v6-c-form-control` element containing a text area so it resizes in both directions.
`.pf-m-icon`	`.pf-v6-c-form-control`	Modifies a form control to allow for an icon.
`.pf-m-readonly`	`.pf-v6-c-form-control`	Modifies a form control for a readonly input, text area, or select.
`.pf-m-disabled`	`.pf-v6-c-form-control`	Modifies a form control for a disabled input, text area, or select.
`.pf-m-success`	`.pf-v6-c-form-control`	Modifies a form control for the success state.
`.pf-m-warning`	`.pf-v6-c-form-control`	Modifies a form control for the warning state.
`.pf-m-error`	`.pf-v6-c-form-control`	Modifies a form control for the error (invalid) state.
`.pf-m-expanded`	`.pf-v6-c-form-control`	Modifies a form control for the expanded state. This is used when clicking in the text input toggles something open/closed.
`.pf-m-placeholder`	`.pf-v6-c-form-control`	Modifies a form select for placeholder styles. This modifier is set programatically based on the chosen option.
`.pf-m-plain`	`.pf-v6-c-form-control`	Modifies a form control containing an `<input>` or `<textarea>` with a `readonly` attribute to be presented as normal text.
`.pf-m-status`	`.pf-v6-c-form-control__icon`	Modifies a form control icon to show status.

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