Skip to Content
Patternfly Logo

Form

A form is a group of elements used to collect information from a user. Related design guidelines: Forms

ExamplesDocumentationCSS Variables

Examples

Vertically aligned labels

Horizontally aligned labels



Help text

This is helper text

This is helper text for a warning input

This is helper text for an invalid input

This is helper text for success input

This is helper text with an icon.

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__group<div>Initiates a form group section.
.pf-c-form__group-label<div>Initiates a form group label section.
.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__group-label-help<button>Initiates a field level help button.
.pf-c-form__group-control<div>Initiates a form group control section.
.pf-c-form__actions<div>Iniates a row of actions.
.pf-c-form__helper-text<p>Initiates a form helper text block.
.pf-c-form__helper-text-icon<span>Initiates a form helper text icon.
.pf-m-horizontal.pf-c-formModifies form for a horizontal layout.
.pf-m-action.pf-c-form__groupModifies form group margin-top.
.pf-m-success.pf-c-form__helper-textModifies text color of helper text for success state.
.pf-m-warning.pf-c-form__helper-textModifies text color of helper text for warning state.
.pf-m-error.pf-c-form__helper-textModifies text color of helper text for error state.
.pf-m-inactive.pf-c-form__helper-textModifies display of helper text to none.
.pf-m-disabled.pf-c-form__labelModifies form label to show disabled state.
.pf-m-no-padding-top.pf-c-form__group-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__group-controlModifies form group children to be inline (this is primarily for radio buttons and checkboxes).

CSS Variables

.pf-c-form--pf-c-form--GridGapc_form_GridGap
1.5rem
.pf-c-form--pf-c-form__group--m-action--MarginTopc_form__group_m_action_MarginTop
2rem
.pf-c-form--pf-c-form--m-horizontal__group-label--md--GridColumnWidthc_form_m_horizontal__group_label_md_GridColumnWidth
9.375rem
.pf-c-form--pf-c-form--m-horizontal__group-label--md--GridColumnGapc_form_m_horizontal__group_label_md_GridColumnGap
1rem
.pf-c-form--pf-c-form--m-horizontal__group-control--md--GridColumnWidthc_form_m_horizontal__group_control_md_GridColumnWidth
1fr
.pf-c-form--pf-c-form--m-horizontal__group-label--md--PaddingTopc_form_m_horizontal__group_label_md_PaddingTop
0.5rem
.pf-c-form--pf-c-form__group-label--PaddingBottomc_form__group_label_PaddingBottom
0.5rem
.pf-c-form--pf-c-form__label--FontSizec_form__label_FontSize
0.875rem
.pf-c-form--pf-c-form__label--LineHeightc_form__label_LineHeight
1.3
.pf-c-form--pf-c-form__label--m-disabled--Colorc_form__label_m_disabled_Color
#6a6e73
.pf-c-form--pf-c-form__label-text--FontWeightc_form__label_text_FontWeight
700
.pf-c-form--pf-c-form__label-required--MarginLeftc_form__label_required_MarginLeft
0.25rem
.pf-c-form--pf-c-form__label-required--FontSizec_form__label_required_FontSize
0.875rem
.pf-c-form--pf-c-form__label-required--Colorc_form__label_required_Color
#c9190b
.pf-c-form--pf-c-form__group-label-help--PaddingTopc_form__group_label_help_PaddingTop
0.25rem
.pf-c-form--pf-c-form__group-label-help--PaddingRightc_form__group_label_help_PaddingRight
0.25rem
.pf-c-form--pf-c-form__group-label-help--PaddingBottomc_form__group_label_help_PaddingBottom
0.25rem
.pf-c-form--pf-c-form__group-label-help--PaddingLeftc_form__group_label_help_PaddingLeft
0.25rem
.pf-c-form--pf-c-form__group-label-help--MarginTopc_form__group_label_help_MarginTop
calc(0.25rem * -1)
.pf-c-form--pf-c-form__group-label-help--MarginRightc_form__group_label_help_MarginRight
calc(0.25rem * -1)
.pf-c-form--pf-c-form__group-label-help--MarginBottomc_form__group_label_help_MarginBottom
calc(0.25rem * -1)
.pf-c-form--pf-c-form__group-label-help--MarginLeftc_form__group_label_help_MarginLeft
calc(0.25rem * -1 + 0.25rem)
.pf-c-form--pf-c-form__group-label-help--FontSizec_form__group_label_help_FontSize
0.875rem
.pf-c-form--pf-c-form__group-label-help--TranslateYc_form__group_label_help_TranslateY
0.125rem
.pf-c-form--pf-c-form__group-control--m-inline--child--MarginRightc_form__group_control_m_inline_child_MarginRight
1.5rem
.pf-c-form--pf-c-form__actions--child--MarginTopc_form__actions_child_MarginTop
0.5rem
.pf-c-form--pf-c-form__actions--child--MarginRightc_form__actions_child_MarginRight
0.5rem
.pf-c-form--pf-c-form__actions--child--MarginBottomc_form__actions_child_MarginBottom
0.5rem
.pf-c-form--pf-c-form__actions--child--MarginLeftc_form__actions_child_MarginLeft
0.5rem
.pf-c-form--pf-c-form__actions--MarginTopc_form__actions_MarginTop
calc(0.5rem * -1)
.pf-c-form--pf-c-form__actions--MarginRightc_form__actions_MarginRight
calc(0.5rem * -1)
.pf-c-form--pf-c-form__actions--MarginBottomc_form__actions_MarginBottom
calc(0.5rem * -1)
.pf-c-form--pf-c-form__actions--MarginLeftc_form__actions_MarginLeft
calc(0.5rem * -1)
.pf-c-form--pf-c-form__helper-text--MarginTopc_form__helper_text_MarginTop
0.25rem
.pf-c-form--pf-c-form__helper-text--FontSizec_form__helper_text_FontSize
0.875rem
.pf-c-form--pf-c-form__helper-text--Colorc_form__helper_text_Color
#151515
.pf-c-form--pf-c-form__helper-text-icon--FontSizec_form__helper_text_icon_FontSize
1rem
.pf-c-form--pf-c-form__helper-text-icon--MarginRightc_form__helper_text_icon_MarginRight
0.25rem
.pf-c-form--pf-c-form__helper-text--m-success--Colorc_form__helper_text_m_success_Color
#0f280d
.pf-c-form--pf-c-form__helper-text--m-warning--Colorc_form__helper_text_m_warning_Color
#795600
.pf-c-form--pf-c-form__helper-text--m-error--Colorc_form__helper_text_m_error_Color
#c9190b
.pf-c-form.pf-m-horizontal--pf-c-form__group-label--PaddingBottomc_form__group_label_PaddingBottom
0
.pf-c-form__helper-text.pf-m-error--pf-c-form__helper-text--Colorc_form__helper_text_Color
#c9190b
.pf-c-form__helper-text.pf-m-success--pf-c-form__helper-text--Colorc_form__helper_text_Color
#0f280d
.pf-c-form__helper-text.pf-m-warning--pf-c-form__helper-text--Colorc_form__helper_text_Color
#795600