Skip to content

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










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
0.5rem
:where(:root, .pf-v6-c-form-control)--pf-v6-c-form-control--Color
(In light theme) #151515
:where(:root, .pf-v6-c-form-control)--pf-v6-c-form-control--FontSize
0.875rem
: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
(In light theme) #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
(In light theme) #ffffff
: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
1rem
:where(:root, .pf-v6-c-form-control)--pf-v6-c-form-control--PaddingBlockStart
0.5rem
:where(:root, .pf-v6-c-form-control)--pf-v6-c-form-control--PaddingBlockEnd
0.5rem
:where(:root, .pf-v6-c-form-control)--pf-v6-c-form-control--PaddingInlineEnd
1rem
:where(:root, .pf-v6-c-form-control)--pf-v6-c-form-control--PaddingInlineStart
1rem
: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
(In light theme) #4394e5
:where(:root, .pf-v6-c-form-control)--pf-v6-c-form-control--m-success--hover--after--BorderColor
(In light theme) #204d00
:where(:root, .pf-v6-c-form-control)--pf-v6-c-form-control--m-warning--hover--after--BorderColor
(In light theme) #b98412
:where(:root, .pf-v6-c-form-control)--pf-v6-c-form-control--m-error--hover--after--BorderColor
(In light theme) #731f00
: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
(In light theme) #0066cc
:where(:root, .pf-v6-c-form-control)--pf-v6-c-form-control--m-placeholder--Color
(In light theme) #4d4d4d
:where(:root, .pf-v6-c-form-control)--pf-v6-c-form-control--m-placeholder--child--Color
(In light theme) #151515
:where(:root, .pf-v6-c-form-control)--pf-v6-c-form-control--m-disabled--Color
(In light theme) #4d4d4d
:where(:root, .pf-v6-c-form-control)--pf-v6-c-form-control--m-disabled--BackgroundColor
(In light theme) #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
(In light theme) #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--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
(In light theme) #3d7317
:where(:root, .pf-v6-c-form-control)--pf-v6-c-form-control--m-success--PaddingInlineEnd
calc(0.875rem + 1rem + 0.5rem)
: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
(In light theme) #dca614
:where(:root, .pf-v6-c-form-control)--pf-v6-c-form-control--m-warning--PaddingInlineEnd
calc(0.875rem + 1rem + 0.5rem)
: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
(In light theme) #b1380b
:where(:root, .pf-v6-c-form-control)--pf-v6-c-form-control--m-error--PaddingInlineEnd
calc(0.875rem + 1rem + 0.5rem)
:where(:root, .pf-v6-c-form-control)--pf-v6-c-form-control--m-error--icon--width
0.875rem
:where(:root, .pf-v6-c-form-control)--pf-v6-c-form-control--m-icon--PaddingInlineEnd
calc(1rem + 0.875rem + calc(1rem / 2))
:where(:root, .pf-v6-c-form-control)--pf-v6-c-form-control--m-icon--icon--width
0.875rem
:where(:root, .pf-v6-c-form-control)--pf-v6-c-form-control--m-icon--icon--spacer
calc(1rem / 2)
:where(:root, .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))
:where(:root, .pf-v6-c-form-control)--pf-v6-c-form-control__select--PaddingInlineEnd
1rem
:where(:root, .pf-v6-c-form-control)--pf-v6-c-form-control__select--PaddingInlineStart
1rem
:where(:root, .pf-v6-c-form-control)--pf-v6-c-form-control__select--m-success--m-status--PaddingInlineEnd
calc((0.875rem * 2) + 0.5rem + 1rem + 1rem)
:where(:root, .pf-v6-c-form-control)--pf-v6-c-form-control__select--m-warning--m-status--PaddingInlineEnd
calc((0.875rem * 2) + 0.5rem + 1rem + 1rem)
:where(:root, .pf-v6-c-form-control)--pf-v6-c-form-control__select--m-error--m-status--PaddingInlineEnd
calc((0.875rem * 2) + 0.5rem + 1rem + 1rem)
: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--Color
(In light theme) #1f1f1f
:where(:root, .pf-v6-c-form-control)--pf-v6-c-form-control__icon--FontSize
0.875rem
:where(:root, .pf-v6-c-form-control)--pf-v6-c-form-control__icon--m-status--Color
(In light theme) #1f1f1f
:where(:root, .pf-v6-c-form-control)--pf-v6-c-form-control--m-success__icon--m-status--Color
(In light theme) #3d7317
:where(:root, .pf-v6-c-form-control)--pf-v6-c-form-control--m-warning__icon--m-status--Color
(In light theme) #dca614
:where(:root, .pf-v6-c-form-control)--pf-v6-c-form-control--m-error__icon--m-status--Color
(In light theme) #b1380b
:where(:root, .pf-v6-c-form-control)--pf-v6-c-form-control__utilities--Gap
0.5rem
:where(:root, .pf-v6-c-form-control)--pf-v6-c-form-control__utilities--PaddingBlockStart
0.5rem
:where(:root, .pf-v6-c-form-control)--pf-v6-c-form-control__utilities--PaddingInlineEnd
1rem
:where(:root, .pf-v6-c-form-control)--pf-v6-c-form-control__toggle-icon--PaddingInlineEnd
1rem
:where(:root, .pf-v6-c-form-control)--pf-v6-c-form-control__toggle-icon--PaddingInlineStart
1rem
:where(:root, .pf-v6-c-form-control)--pf-v6-c-form-control__toggle-icon--Color
(In light theme) #1f1f1f
:where(:root, .pf-v6-c-form-control)--pf-v6-c-form-control--m-disabled__toggle-icon--Color
(In light theme) #a3a3a3
.pf-v6-c-form-control.pf-m-readonly--pf-v6-c-form-control--BackgroundColor
(In light theme) #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.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.pf-m-expanded--pf-v6-c-form-control--after--BorderColor
(In light theme) #0066cc
.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
(In light theme) #c7c7c7
.pf-v6-c-form-control.pf-m-disabled--pf-v6-c-form-control--Color
(In light theme) #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.pf-m-disabled--pf-v6-c-form-control__toggle-icon--Color
(In light theme) #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.pf-m-error--pf-v6-c-form-control--after--BorderColor
(In light theme) #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.pf-m-error--pf-v6-c-form-control__icon--m-status--Color
(In light theme) #b1380b
.pf-v6-c-form-control.pf-m-error--pf-v6-c-form-control__select--PaddingInlineEnd
calc((0.875rem * 2) + 0.5rem + 1rem + 1rem)
.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(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.pf-m-success--pf-v6-c-form-control--after--BorderColor
(In light theme) #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.pf-m-success--pf-v6-c-form-control__icon--m-status--Color
(In light theme) #3d7317
.pf-v6-c-form-control.pf-m-success--pf-v6-c-form-control__select--PaddingInlineEnd
calc((0.875rem * 2) + 0.5rem + 1rem + 1rem)
.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(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.pf-m-warning--pf-v6-c-form-control--after--BorderColor
(In light theme) #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.pf-m-warning--pf-v6-c-form-control__icon--m-status--Color
(In light theme) #dca614
.pf-v6-c-form-control.pf-m-warning--pf-v6-c-form-control__select--PaddingInlineEnd
calc((0.875rem * 2) + 0.5rem + 1rem + 1rem)
.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(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:hover--pf-v6-c-form-control--after--BorderWidth
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 > select--pf-v6-c-form-control--PaddingInlineEnd
1rem
.pf-v6-c-form-control > select--pf-v6-c-form-control--PaddingInlineStart
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.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
select ~ .pf-v6-c-form-control__utilities--pf-v6-c-form-control__utilities--PaddingInlineEnd
0

View source on GitHub
Red Hat
Copyright © 2014-2024 Red Hat, Inc.
Privacy statementTerms of useAll policies and guidelines