PF Next

Form

Vertical aligned Labels

Preview

<form class="pf-c-form">
  <div class="pf-c-form__group">
    <label class="pf-c-form__label" required for="vertical-form-name">
      Name
      <span class="pf-c-form__label__required" aria-hidden="true">&#42;</span>
    </label>
    <input class="pf-c-form-control" input="true" type="text" id="vertical-form-name" name="vertical-form-name" required="true"></input>
  </div>
</form>

Horizontal aligned Labels

Preview

<form class="pf-c-form pf-m-horizontal">
  <div class="pf-c-form__group">
    <label class="pf-c-form__label" required for="horizontal-form-name">
      Name
      <span class="pf-c-form__label__required" aria-hidden="true">&#42;</span>
    </label>
    <div class="pf-c-form__horizontal-group">
      <input class="pf-c-form-control" input="true" type="text" id="horizontal-form-name" name="horizontal-form-name" required></input>
    </div>
  </div>
</form>

Help text

Preview

This is helper text

This is helper text for an invalid input

<form class="pf-c-form">
  <div class="pf-c-form__group">
    <label class="pf-c-form__label" required for="simple-form-name">
      Name
      <span class="pf-c-form__label__required" aria-hidden="true">&#42;</span>
    </label>
    <input class="pf-c-form-control" required input="true" type="text" id="simple-form-name" name="simple-form-name" aria-errormessage="simple-form-name-helper-1"></input>
    <p class="pf-c-form__helper-text id&#x3D;&quot;simple-form-name-helper-1&quot; aria-live&#x3D;&quot;polite&quot;">
      This is helper text
    </p>
  </div>
  <div class="pf-c-form__group">
    <label class="pf-c-form__label" required for="simple-form-address">
      address
      <span class="pf-c-form__label__required" aria-hidden="true">&#42;</span>
    </label>
    <input class="pf-c-form-control" required input="true" type="text" id="simple-form-name" name="simple-form-name" aria-invalid="true" aria-errormessage="simple-form-name-helper-2"></input>
    <p class="pf-c-form__helper-text pf-m-error" id="simple-form-name-helper-2" aria-live="polite">
      This is helper text for an invalid input
    </p>
  </div>
</form>

Action Group

Preview

<form class="pf-c-form">
  <div class="pf-c-form__group pf-m-action">
    <div class="pf-l-toolbar">
      <div class="pf-l-toolbar__group">
        <div class="pf-l-toolbar__item">
          <button class="pf-c-button pf-m-primary">
            Submit form
          </button>
        </div>
      </div>
      <div class="pf-l-toolbar__group">
        <div class="pf-l-toolbar__item">
          <button class="pf-c-button pf-m-secondary">
            Cancel
          </button>
        </div>
      </div>
    </div>
  </div>
</form>

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 aria-required="true" <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-errormessage="{helper_text_id}" <input>, <select>, <textarea> Where form validation fails, aria-errormessage is used instead of aria-describedby. aria-errormessage and aria-invalid="true" are only present when validation fails so this needs to be handled with Javascript. 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-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-required .pf-c-form__label Modifies form label to show required state.
.pf-m-inline .pf-c-form__group Modifies form group children to be inline (this is primarily for radio buttons and checkboxes).
.pf-m-action .pf-c-form__group Modifies form group margin-top.