Form select

Examples

Basic

Validated

  

Disabled

Grouped

Props

FormSelect

*required
NameTypeDefaultDescription
childrenrequiredReact.ReactNodecontent rendered inside the FormSelect
aria-labelstringCustom flag to show that the FormSelect requires an associated id or aria-label.
classNamestring''additional classes added to the FormSelect control
isDisabledbooleanfalseFlag indicating the FormSelect is disabled
isRequiredbooleanfalseSets the FormSelect required.
onBlur(event: React.FormEvent<HTMLSelectElement>) => void(): any => undefinedOptional callback for updating when selection loses focus
onChange(event: React.FormEvent<HTMLSelectElement>, value: string) => void(): any => undefinedOptional callback for updating when selection changes
onFocus(event: React.FormEvent<HTMLSelectElement>) => void(): any => undefinedOptional callback for updating when selection gets focus
ouiaIdnumber | stringValue to overwrite the randomly generated data-ouia-component-id.
ouiaSafebooleantrueSet 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.
valueany''value of selected option

FormSelectOption

*required
NameTypeDefaultDescription
labelrequiredstringthe label for the option
classNamestring''additional classes added to the Select Option
isDisabledbooleanfalseflag indicating if the option is disabled
isPlaceholderbooleanfalseflag indicating if option will have placeholder styling applied when selected *
valueany''the value for the option

FormSelectOptionGroup

*required
NameTypeDefaultDescription
labelrequiredstringthe label for the option
childrenReact.ReactNodenullcontent rendered inside the Select Option Group
classNamestring''additional classes added to the Select Option
isDisabledbooleanfalseflag indicating if the Option Group is disabled

CSS variables

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