HTML

Form

ExamplesDocumentationCSS Variables

Examples

Vertical aligned labels

Copied to clipboard

Horizontal aligned labels

Copied to clipboard

Help text

This is helper text

This is helper text for an invalid input

Copied to clipboard

Action group

Copied to clipboard

Documentation

Accessibility

Attribute Applied to Outcome
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-text Form 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.

Usage

Class Applied to Outcome
.pf-c-form <form> Initiates a standard form. Required
.pf-c-form__label <label> Initiates a form label. Required
.pf-c-form__helper-text <p> 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__group Modifies form group margin-top.
.pf-m-error .pf-c-form__helper-text Modifies text color of helper text.
.pf-m-inactive .pf-c-form__helper-text Modifies display of helper text to none.
.pf-m-border .pf-c-form__section Modifies form element border-bottom.
.pf-m-disabled .pf-c-form__label Modifies form label to show disabled state.
.pf-m-inline .pf-c-form__group Modifies form group children to be inline (this is primarily for radio buttons and checkboxes).

CSS Variables

--pf-c-form--GridGapc_form_GridGap1.5rem
--pf-c-form__actions--MarginBottomc_form__actions_MarginBottomcalc(0.5rem * -1)
--pf-c-form__actions--MarginLeftc_form__actions_MarginLeftcalc(0.5rem * -1)
--pf-c-form__actions--MarginRightc_form__actions_MarginRightcalc(0.5rem * -1)
--pf-c-form__actions--MarginTopc_form__actions_MarginTopcalc(0.5rem * -1)
--pf-c-form__actions--child--MarginBottomc_form__actions_child_MarginBottom0.5rem
--pf-c-form__actions--child--MarginLeftc_form__actions_child_MarginLeft0.5rem
--pf-c-form__actions--child--MarginRightc_form__actions_child_MarginRight0.5rem
--pf-c-form__actions--child--MarginTopc_form__actions_child_MarginTop0.5rem
--pf-c-form__group--MarginLeftc_form__group_MarginLeft0.5rem
--pf-c-form__group--m-action--MarginTopc_form__group_m_action_MarginTop2rem
--pf-c-form__helper-text--Colorc_form__helper_text_Color#151515
--pf-c-form__helper-text--FontSizec_form__helper_text_FontSize0.875rem
--pf-c-form__helper-text--MarginTopc_form__helper_text_MarginTop0.25rem
--pf-c-form__label--Colorc_form__label_Color#72767b
--pf-c-form__label--FontSizec_form__label_FontSize0.875rem
--pf-c-form__label--FontWeightc_form__label_FontWeight400
--pf-c-form__label--LineHeightc_form__label_LineHeight1.3
--pf-c-form__label--PaddingBottomc_form__label_PaddingBottom0.5rem
--pf-c-form__label--PaddingTopc_form__label_PaddingTop0.5rem
--pf-c-form__label--m-disabled--Colorc_form__label_m_disabled_Color#72767b
--pf-c-form__label-required--Colorc_form__label_required_Color#c9190b
--pf-c-form__label-required--FontSizec_form__label_required_FontSize0.875rem
--pf-c-form__label-required--MarginLeftc_form__label_required_MarginLeft0.25rem
--pf-c-form--m-error--Colorc_form_m_error_Color#c9190b
--pf-c-form--m-horizontal--md__group--GridTemplateColumnsc_form_m_horizontal_md__group_GridTemplateColumns150px 1fr
--pf-c-form--m-inline--MarginRightc_form_m_inline_MarginRight1.5rem