Form control

Form controls refer to the different visual states that data input components can take to help guide users in completing forms.

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










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 columnSelectorVariableValue
:where(:root, .pf-v6-c-form-control)--pf-v6-c-form-control--ColumnGap
8px
:where(:root, .pf-v6-c-form-control)--pf-v6-c-form-control--Color
#1f1f1f
:where(:root, .pf-v6-c-form-control)--pf-v6-c-form-control--FontSize
14px
:where(:root, .pf-v6-c-form-control)--pf-v6-c-form-control--LineHeight
1.5
:where(:root, .pf-v6-c-form-control)--pf-v6-c-form-control--Resize
none
:where(:root, .pf-v6-c-form-control)--pf-v6-c-form-control--OutlineOffset
-6px
:where(:root, .pf-v6-c-form-control)--pf-v6-c-form-control--BorderRadius
6px
:where(:root, .pf-v6-c-form-control)--pf-v6-c-form-control--before--BorderWidth
1px
:where(:root, .pf-v6-c-form-control)--pf-v6-c-form-control--before--BorderColor
#c7c7c7
:where(:root, .pf-v6-c-form-control)--pf-v6-c-form-control--before--BorderRadius
6px
:where(:root, .pf-v6-c-form-control)--pf-v6-c-form-control--after--BorderWidth
1px
:where(:root, .pf-v6-c-form-control)--pf-v6-c-form-control--after--BorderColor
transparent
:where(:root, .pf-v6-c-form-control)--pf-v6-c-form-control--after--BorderRadius
6px
:where(:root, .pf-v6-c-form-control)--pf-v6-c-form-control--BackgroundColor
#fff
:where(:root, .pf-v6-c-form-control)--pf-v6-c-form-control--Width
100%
:where(:root, .pf-v6-c-form-control)--pf-v6-c-form-control--inset--base
16px
:where(:root, .pf-v6-c-form-control)--pf-v6-c-form-control--PaddingBlockStart
8px
:where(:root, .pf-v6-c-form-control)--pf-v6-c-form-control--PaddingBlockEnd
8px
:where(:root, .pf-v6-c-form-control)--pf-v6-c-form-control--PaddingInlineEnd
16px
:where(:root, .pf-v6-c-form-control)--pf-v6-c-form-control--PaddingInlineStart
16px
:where(:root, .pf-v6-c-form-control)--pf-v6-c-form-control--hover--after--BorderWidth
1px
:where(:root, .pf-v6-c-form-control)--pf-v6-c-form-control--hover--after--BorderColor
#4394e5
:where(:root, .pf-v6-c-form-control)--pf-v6-c-form-control--focus--after--BorderWidth
2px
:where(:root, .pf-v6-c-form-control)--pf-v6-c-form-control--focus--after--BorderColor
#06c
:where(:root, .pf-v6-c-form-control)--pf-v6-c-form-control--m-expanded--after--BorderWidth
2px
:where(:root, .pf-v6-c-form-control)--pf-v6-c-form-control--m-expanded--after--BorderColor
#06c
:where(:root, .pf-v6-c-form-control)--pf-v6-c-form-control--m-placeholder--Color
#4d4d4d
:where(:root, .pf-v6-c-form-control)--pf-v6-c-form-control--m-placeholder--child--Color
#1f1f1f
:where(:root, .pf-v6-c-form-control)--pf-v6-c-form-control--m-disabled--Color
#4d4d4d
:where(:root, .pf-v6-c-form-control)--pf-v6-c-form-control--m-disabled--BackgroundColor
#c7c7c7
:where(:root, .pf-v6-c-form-control)--pf-v6-c-form-control--m-disabled--after--BorderColor
transparent
:where(:root, .pf-v6-c-form-control)--pf-v6-c-form-control--m-readonly--BackgroundColor
#f2f2f2
:where(:root, .pf-v6-c-form-control)--pf-v6-c-form-control--m-readonly--BorderColor
transparent
:where(:root, .pf-v6-c-form-control)--pf-v6-c-form-control--m-readonly--hover--after--BorderColor
revert
:where(:root, .pf-v6-c-form-control)--pf-v6-c-form-control--m-readonly--focus--after--BorderWidth
2px
:where(:root, .pf-v6-c-form-control)--pf-v6-c-form-control--m-readonly--focus--after--BorderColor
#06c
:where(:root, .pf-v6-c-form-control)--pf-v6-c-form-control--m-readonly--m-plain--BackgroundColor
transparent
:where(:root, .pf-v6-c-form-control)--pf-v6-c-form-control--m-readonly--m-plain--inset--base
0
:where(:root, .pf-v6-c-form-control)--pf-v6-c-form-control--m-readonly--m-plain--OutlineOffset
0
:where(:root, .pf-v6-c-form-control)--pf-v6-c-form-control--m-success--after--BorderWidth
1px
:where(:root, .pf-v6-c-form-control)--pf-v6-c-form-control--m-success--after--BorderColor
#3d7317
:where(:root, .pf-v6-c-form-control)--pf-v6-c-form-control--m-success--PaddingInlineEnd
calc(32px + 8px)
:where(:root, .pf-v6-c-form-control)--pf-v6-c-form-control--m-warning--after--BorderWidth
1px
:where(:root, .pf-v6-c-form-control)--pf-v6-c-form-control--m-warning--after--BorderColor
#dca614
:where(:root, .pf-v6-c-form-control)--pf-v6-c-form-control--m-warning--PaddingInlineEnd
calc(32px + 8px)
:where(:root, .pf-v6-c-form-control)--pf-v6-c-form-control--m-error--after--BorderWidth
1px
:where(:root, .pf-v6-c-form-control)--pf-v6-c-form-control--m-error--after--BorderColor
#b1380b
:where(:root, .pf-v6-c-form-control)--pf-v6-c-form-control--m-error--PaddingInlineEnd
calc(32px + 8px)
:where(:root, .pf-v6-c-form-control)--pf-v6-c-form-control--m-error--icon--width
14px
:where(:root, .pf-v6-c-form-control)--pf-v6-c-form-control--m-icon--PaddingInlineEnd
calc(16px + 14px + 8px)
:where(:root, .pf-v6-c-form-control)--pf-v6-c-form-control--m-icon--icon--width
14px
:where(:root, .pf-v6-c-form-control)--pf-v6-c-form-control--m-icon--icon--spacer
8px
:where(:root, .pf-v6-c-form-control)--pf-v6-c-form-control--m-icon--icon--PaddingInlineEnd
calc(16px + 14px + 8px + 14px + 8px)
:where(:root, .pf-v6-c-form-control)--pf-v6-c-form-control__select--PaddingInlineEnd
16px
:where(:root, .pf-v6-c-form-control)--pf-v6-c-form-control__select--PaddingInlineStart
16px
:where(:root, .pf-v6-c-form-control)--pf-v6-c-form-control__select--m-success--m-status--PaddingInlineEnd
64px
:where(:root, .pf-v6-c-form-control)--pf-v6-c-form-control__select--m-warning--m-status--PaddingInlineEnd
64px
:where(:root, .pf-v6-c-form-control)--pf-v6-c-form-control__select--m-error--m-status--PaddingInlineEnd
64px
:where(:root, .pf-v6-c-form-control)--pf-v6-c-form-control--textarea--Width
100%
:where(:root, .pf-v6-c-form-control)--pf-v6-c-form-control--textarea--Height
auto
:where(:root, .pf-v6-c-form-control)--pf-v6-c-form-control__icon--PaddingBlockStart
8px
:where(:root, .pf-v6-c-form-control)--pf-v6-c-form-control__icon--Color
#1f1f1f
:where(:root, .pf-v6-c-form-control)--pf-v6-c-form-control__icon--m-status--Color
#1f1f1f
:where(:root, .pf-v6-c-form-control)--pf-v6-c-form-control--m-success__icon--m-status--Color
#3d7317
:where(:root, .pf-v6-c-form-control)--pf-v6-c-form-control--m-warning__icon--m-status--Color
#dca614
:where(:root, .pf-v6-c-form-control)--pf-v6-c-form-control--m-error__icon--m-status--Color
#b1380b
:where(:root, .pf-v6-c-form-control)--pf-v6-c-form-control__utilities--Gap
8px
:where(:root, .pf-v6-c-form-control)--pf-v6-c-form-control__utilities--PaddingBlockStart
16px
:where(:root, .pf-v6-c-form-control)--pf-v6-c-form-control__utilities--PaddingInlineEnd
16px
:where(:root, .pf-v6-c-form-control)--pf-v6-c-form-control__toggle-icon--PaddingBlockStart
8px
:where(:root, .pf-v6-c-form-control)--pf-v6-c-form-control__toggle-icon--PaddingInlineEnd
16px
:where(:root, .pf-v6-c-form-control)--pf-v6-c-form-control__toggle-icon--PaddingInlineStart
16px
:where(:root, .pf-v6-c-form-control)--pf-v6-c-form-control__toggle-icon--Color
#1f1f1f
:where(:root, .pf-v6-c-form-control)--pf-v6-c-form-control--m-disabled__toggle-icon--Color
#a3a3a3
.pf-v6-c-form-control.pf-m-readonly--pf-v6-c-form-control--BackgroundColor
#f2f2f2
.pf-v6-c-form-control.pf-m-readonly--pf-v6-c-form-control--BorderColor
transparent
.pf-v6-c-form-control.pf-m-readonly:hover--pf-v6-c-form-control--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.pf-m-readonly:not(.pf-m-success, .pf-m-warning, .pf-m-error)--pf-v6-c-form-control--focus--after--BorderWidth
2px
.pf-v6-c-form-control.pf-m-readonly:not(.pf-m-success, .pf-m-warning, .pf-m-error)--pf-v6-c-form-control--focus--after--BorderColor
#06c
.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.pf-m-readonly.pf-m-plain--pf-v6-c-form-control--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:hover--pf-v6-c-form-control--after--BorderColor
#4394e5
.pf-v6-c-form-control:hover--pf-v6-c-form-control--after--BorderWidth
1px
.pf-v6-c-form-control.pf-m-expanded--pf-v6-c-form-control--after--BorderColor
#06c
.pf-v6-c-form-control.pf-m-expanded--pf-v6-c-form-control--after--BorderWidth
2px
.pf-v6-c-form-control.pf-m-disabled--pf-v6-c-form-control--BackgroundColor
#c7c7c7
.pf-v6-c-form-control.pf-m-disabled--pf-v6-c-form-control--Color
#4d4d4d
.pf-v6-c-form-control.pf-m-disabled--pf-v6-c-form-control--m-placeholder--Color
#4d4d4d
.pf-v6-c-form-control.pf-m-disabled--pf-v6-c-form-control__toggle-icon--Color
#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(32px + 8px)
.pf-v6-c-form-control.pf-m-error--pf-v6-c-form-control--after--BorderColor
#b1380b
.pf-v6-c-form-control.pf-m-error--pf-v6-c-form-control__icon--m-status--Color
#b1380b
.pf-v6-c-form-control.pf-m-error--pf-v6-c-form-control__select--PaddingInlineEnd
64px
.pf-v6-c-form-control.pf-m-error--pf-v6-c-form-control--after--BorderWidth
1px
.pf-v6-c-form-control.pf-m-error.pf-m-icon--pf-v6-c-form-control--PaddingInlineEnd
calc(16px + 14px + 8px + 14px + 8px)
.pf-v6-c-form-control.pf-m-success--pf-v6-c-form-control--PaddingInlineEnd
calc(32px + 8px)
.pf-v6-c-form-control.pf-m-success--pf-v6-c-form-control--after--BorderColor
#3d7317
.pf-v6-c-form-control.pf-m-success--pf-v6-c-form-control__icon--m-status--Color
#3d7317
.pf-v6-c-form-control.pf-m-success--pf-v6-c-form-control__select--PaddingInlineEnd
64px
.pf-v6-c-form-control.pf-m-success--pf-v6-c-form-control--after--BorderWidth
1px
.pf-v6-c-form-control.pf-m-success.pf-m-icon--pf-v6-c-form-control--PaddingInlineEnd
calc(16px + 14px + 8px + 14px + 8px)
.pf-v6-c-form-control.pf-m-warning--pf-v6-c-form-control--PaddingInlineEnd
calc(32px + 8px)
.pf-v6-c-form-control.pf-m-warning--pf-v6-c-form-control--after--BorderColor
#dca614
.pf-v6-c-form-control.pf-m-warning--pf-v6-c-form-control__icon--m-status--Color
#dca614
.pf-v6-c-form-control.pf-m-warning--pf-v6-c-form-control__select--PaddingInlineEnd
64px
.pf-v6-c-form-control.pf-m-warning--pf-v6-c-form-control--after--BorderWidth
1px
.pf-v6-c-form-control.pf-m-warning.pf-m-icon--pf-v6-c-form-control--PaddingInlineEnd
calc(16px + 14px + 8px + 14px + 8px)
.pf-v6-c-form-control.pf-m-icon--pf-v6-c-form-control--PaddingInlineEnd
calc(16px + 14px + 8px)
.pf-v6-c-form-control > select--pf-v6-c-form-control--PaddingInlineEnd
16px
.pf-v6-c-form-control > select--pf-v6-c-form-control--PaddingInlineStart
16px
.pf-v6-c-form-control.pf-m-placeholder > select--pf-v6-c-form-control--Color
#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
#1f1f1f
select ~ .pf-v6-c-form-control__utilities--pf-v6-c-form-control__utilities--PaddingInlineEnd
0

View source on GitHub