HTML

Form

ExamplesDocumentationCSS Variables

Examples

Vertically aligned labels

Horizontally aligned labels



Help text

This is helper text

This is helper text for an invalid input

This is helper text for success input

Action group

Documentation

Accessibility

AttributeApplied toOutcome
for<label>Each <label> must have a for attribute that matches its form field id. Required
id<input type="radio/checkbox/text">, <select>, <textarea>Each <form> field must have an id attribute that matches its label's for value. Required
required<input>, <select>, <textarea>Required fields must include these attributes.
id="{helper_text_id}".pf-c-form__helper-textForm fields with related .pf-c-form__helper-text require this attribute. Usage <p class="pf-c-form__helper-text" id="{helper_text_id}">.
aria-describedby="{helper_text_id}"<input>, <select>, <textarea>Form fields with related .pf-c-form__helper-text require this attribute. Usage <input aria-describedby="{helper_text_id}">.
aria-invalid="true" aria-describedby="{helper_text_id}"<input>, <select>, <textarea>When form validation fails aria-describedby is used to communicate the error to the user. These attributes need to be handled with Javascript so that aria-describedby only references help text that explains the error, and so that aria-invalid="true" is only present when validation fails. For proper styling of errors aria-invalid="true" is required.
aria-hidden="true".pf-c-form__label-requiredHides the required indicator from assistive technologies.

Usage

ClassApplied toOutcome
.pf-c-form<form>Initiates a standard form. Required
.pf-c-form__label<label>Initiates a form label. Required
.pf-c-form__label-text<span>Initiates a form label text. Required
.pf-c-form__label-required<span>Initiates a form label required indicator.
.pf-c-form__helper-text<span>Initiates a form helper text block.
.pf-c-form__group<div>Wraps form fields <label> + <field> + .form-helper-text.
.pf-c-form__horizontal-group<div>Wraps .pf-c-form-control when using .pf-m-horizontal on .pf-c-form to provide proper spacing for longer labels.
.pf-c-form__actions<div>Iniates a row of actions.
.pf-m-action.pf-c-form__groupModifies form group margin-top.
.pf-m-error.pf-c-form__helper-textModifies text color of helper text for error state.
.pf-m-success.pf-c-form__helper-textModifies text color of helper text for success state.
.pf-m-inactive.pf-c-form__helper-textModifies display of helper text to none.
.pf-m-border.pf-c-form__sectionModifies form element border-bottom.
.pf-m-disabled.pf-c-form__labelModifies form label to show disabled state.
.pf-m-no-padding-top.pf-c-form__labelRemoves top padding from the label element for labels adjacent to an element that isn't a form control.
.pf-m-inline.pf-c-form__groupModifies form group children to be inline (this is primarily for radio buttons and checkboxes).

CSS Variables

--pf-c-form__actions--child--MarginBottomc_form__actions_child_MarginBottom
0.5rem
--pf-c-form__actions--child--MarginLeftc_form__actions_child_MarginLeft
0.5rem
--pf-c-form__actions--child--MarginRightc_form__actions_child_MarginRight
0.5rem
--pf-c-form__actions--child--MarginTopc_form__actions_child_MarginTop
0.5rem
--pf-c-form__actions--MarginBottomc_form__actions_MarginBottom
calc(0.5rem*-1)
--pf-c-form__actions--MarginLeftc_form__actions_MarginLeft
calc(0.5rem*-1)
--pf-c-form__actions--MarginRightc_form__actions_MarginRight
calc(0.5rem*-1)
--pf-c-form__actions--MarginTopc_form__actions_MarginTop
calc(0.5rem*-1)
--pf-c-form__group--m-action--MarginTopc_form__group_m_action_MarginTop
2rem
--pf-c-form__group--MarginLeftc_form__group_MarginLeft
0.5rem
--pf-c-form__helper-text--Colorc_form__helper_text_Color
#486b00
--pf-c-form__helper-text--FontSizec_form__helper_text_FontSize
0.875rem
--pf-c-form__helper-text--MarginTopc_form__helper_text_MarginTop
0.25rem
--pf-c-form__label--Colorc_form__label_Color
#737679
--pf-c-form__label--FontSizec_form__label_FontSize
0.875rem
--pf-c-form__label--FontWeightc_form__label_FontWeight
400
--pf-c-form__label--LineHeightc_form__label_LineHeight
1.3
--pf-c-form__label--m-disabled--Colorc_form__label_m_disabled_Color
#737679
--pf-c-form__label--PaddingBottomc_form__label_PaddingBottom
0.5rem
--pf-c-form__label--PaddingTopc_form__label_PaddingTop
0.5rem
--pf-c-form__label-required--Colorc_form__label_required_Color
#c9190b
--pf-c-form__label-required--FontSizec_form__label_required_FontSize
0.875rem
--pf-c-form__label-required--MarginLeftc_form__label_required_MarginLeft
0.25rem
--pf-c-form__label-text--FontWeightc_form__label_text_FontWeight
700
--pf-c-form-control__select--arrow--Backgroundc_form_control__select_arrow_Background
#fff url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath fill='%23urrentColor' d='M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z'/%3E%3C/svg%3E") calc(100% - 0.5rem) center/0.875rem no-repeat
--pf-c-form-control__select--Backgroundc_form_control__select_Background
#fff url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath fill='%23urrentColor' d='M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z'/%3E%3C/svg%3E") calc(100% - 0.5rem) center/0.875rem no-repeat
--pf-c-form-control__select--BackgroundPositionc_form_control__select_BackgroundPosition
calc(100% - 0.5rem) center
--pf-c-form-control__select--BackgroundSizec_form_control__select_BackgroundSize
0.875rem
--pf-c-form-control__select--BackgroundUrlc_form_control__select_BackgroundUrl
url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath fill='%23urrentColor' d='M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z'/%3E%3C/svg%3E")
--pf-c-form-control__select--invalid--Backgroundc_form_control__select_invalid_Background
url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23c9190b' d='M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zm-248 50c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z'/%3E%3C/svg%3E") calc(100% - 0.5rem) 0.5rem/1rem 1rem no-repeat,#fff url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath fill='%23urrentColor' d='M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z'/%3E%3C/svg%3E") calc(100% - 0.5rem) center/0.875rem no-repeat
--pf-c-form-control__select--invalid--PaddingRightc_form_control__select_invalid_PaddingRight
calc(0.5rem + 3rem)
--pf-c-form-control__select--PaddingRightc_form_control__select_PaddingRight
1.5rem
--pf-c-form-control__select--success--Backgroundc_form_control__select_success_Background
url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%2392d400' d='M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z'/%3E%3C/svg%3E") calc(100% - 0.5rem) 0.5rem/1rem 1rem no-repeat,#fff url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath fill='%23urrentColor' d='M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z'/%3E%3C/svg%3E") calc(100% - 0.5rem) center/0.875rem no-repeat
--pf-c-form-control__select--success--PaddingRightc_form_control__select_success_PaddingRight
calc(0.5rem + 3rem)
--pf-c-form-control--BackgroundColorc_form_control_BackgroundColor
#ededed
--pf-c-form-control--BorderBottomColorc_form_control_BorderBottomColor
#92d400
--pf-c-form-control--BorderLeftColorc_form_control_BorderLeftColor
#ededed
--pf-c-form-control--BorderRadiusc_form_control_BorderRadius
0
--pf-c-form-control--BorderRightColorc_form_control_BorderRightColor
#ededed
--pf-c-form-control--BorderTopColorc_form_control_BorderTopColor
#ededed
--pf-c-form-control--BorderWidthc_form_control_BorderWidth
1px
--pf-c-form-control--Colorc_form_control_Color
#737679
--pf-c-form-control--disabled--BackgroundColorc_form_control_disabled_BackgroundColor
#ededed
--pf-c-form-control--disabled--BorderColorc_form_control_disabled_BorderColor
transparent
--pf-c-form-control--disabled--Colorc_form_control_disabled_Color
#737679
--pf-c-form-control--focus--BorderBottomColorc_form_control_focus_BorderBottomColor
#06c
--pf-c-form-control--focus--BorderBottomWidthc_form_control_focus_BorderBottomWidth
2px
--pf-c-form-control--focus--PaddingBottomc_form_control_focus_PaddingBottom
calc(0.375rem - 2px)
--pf-c-form-control--FontSizec_form_control_FontSize
1rem
--pf-c-form-control--Heightc_form_control_Height
calc(1rem*1.5 + 1px*2 + calc(0.375rem - 1px) + calc(0.375rem - 1px))
--pf-c-form-control--hover--BorderBottomColorc_form_control_hover_BorderBottomColor
#06c
--pf-c-form-control--invalid--Backgroundc_form_control_invalid_Background
url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23c9190b' d='M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zm-248 50c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z'/%3E%3C/svg%3E") calc(100% - 0.5rem) 0.5rem/1rem 1rem no-repeat,#fff url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath fill='%23urrentColor' d='M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z'/%3E%3C/svg%3E") calc(100% - 0.5rem) center/0.875rem no-repeat
--pf-c-form-control--invalid--BackgroundPositionc_form_control_invalid_BackgroundPosition
calc(100% - 0.5rem - 1.5rem)
--pf-c-form-control--invalid--BackgroundSizec_form_control_invalid_BackgroundSize
1rem 1rem
--pf-c-form-control--invalid--BackgroundUrlc_form_control_invalid_BackgroundUrl
url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23c9190b' d='M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zm-248 50c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z'/%3E%3C/svg%3E")
--pf-c-form-control--invalid--BorderBottomColorc_form_control_invalid_BorderBottomColor
#c9190b
--pf-c-form-control--invalid--BorderBottomWidthc_form_control_invalid_BorderBottomWidth
2px
--pf-c-form-control--invalid--exclamation--Backgroundc_form_control_invalid_exclamation_Background
url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23c9190b' d='M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zm-248 50c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z'/%3E%3C/svg%3E") calc(100% - 0.5rem) 0.5rem/1rem 1rem no-repeat
--pf-c-form-control--invalid--PaddingBottomc_form_control_invalid_PaddingBottom
calc(0.375rem - 2px)
--pf-c-form-control--invalid--PaddingRightc_form_control_invalid_PaddingRight
2rem
--pf-c-form-control--LineHeightc_form_control_LineHeight
1.5
--pf-c-form-control--PaddingBottomc_form_control_PaddingBottom
calc(0.375rem - 1px)
--pf-c-form-control--PaddingLeftc_form_control_PaddingLeft
0.5rem
--pf-c-form-control--PaddingRightc_form_control_PaddingRight
calc(0.5rem + 3rem)
--pf-c-form-control--PaddingTopc_form_control_PaddingTop
calc(0.375rem - 1px)
--pf-c-form-control--placeholder--Colorc_form_control_placeholder_Color
#737679
--pf-c-form-control--readonly--focus--BackgroundColorc_form_control_readonly_focus_BackgroundColor
#ededed
--pf-c-form-control--readonly--focus--BorderBottomColorc_form_control_readonly_focus_BorderBottomColor
#737679
--pf-c-form-control--readonly--focus--BorderBottomWidthc_form_control_readonly_focus_BorderBottomWidth
1px
--pf-c-form-control--readonly--focus--PaddingBottomc_form_control_readonly_focus_PaddingBottom
calc(0.375rem - 1px)
--pf-c-form-control--success--Backgroundc_form_control_success_Background
url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%2392d400' d='M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z'/%3E%3C/svg%3E") calc(100% - 0.5rem) 0.5rem/1rem 1rem no-repeat,#fff url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath fill='%23urrentColor' d='M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z'/%3E%3C/svg%3E") calc(100% - 0.5rem) center/0.875rem no-repeat
--pf-c-form-control--success--BackgroundPositionc_form_control_success_BackgroundPosition
calc(100% - 0.5rem - 1.5rem)
--pf-c-form-control--success--BackgroundSizec_form_control_success_BackgroundSize
1rem 1rem
--pf-c-form-control--success--BackgroundUrlc_form_control_success_BackgroundUrl
url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%2392d400' d='M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z'/%3E%3C/svg%3E")
--pf-c-form-control--success--BorderBottomColorc_form_control_success_BorderBottomColor
#92d400
--pf-c-form-control--success--BorderBottomWidthc_form_control_success_BorderBottomWidth
2px
--pf-c-form-control--success--check--Backgroundc_form_control_success_check_Background
url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%2392d400' d='M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z'/%3E%3C/svg%3E") calc(100% - 0.5rem) 0.5rem/1rem 1rem no-repeat
--pf-c-form-control--success--PaddingBottomc_form_control_success_PaddingBottom
calc(0.375rem - 2px)
--pf-c-form-control--success--PaddingRightc_form_control_success_PaddingRight
2rem
--pf-c-form--GridGapc_form_GridGap
1.5rem
--pf-c-form--m-error--Colorc_form_m_error_Color
#c9190b
--pf-c-form--m-horizontal--md__group--GridTemplateColumnsc_form_m_horizontal_md__group_GridTemplateColumns
150px 1fr
--pf-c-form--m-inline--MarginRightc_form_m_inline_MarginRight
1.5rem
--pf-c-form--m-success--Colorc_form_m_success_Color
#486b00