PF Next

Simple Form Demo

Preview

Please provide your full name

<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-describedby="simple-form-name-helper-1"></input>
    <p class="pf-c-form__helper-text" id="simple-form-name-helper-1" aria-live="polite">
      Please provide your full name</p>
  </div>
  <div class="pf-c-form__group">
    <label class="pf-c-form__label" required for="simple-form-email">
      Email <span class="pf-c-form__label__required" aria-hidden="true">&#42;</span>
    </label>
    <input class="pf-c-form-control" required input="true" type="email" id="simple-form-email" name="simple-form-email"></input>
  </div>
  <div class="pf-c-form__group">
    <label class="pf-c-form__label" for="simple-form-number">
      Phone Number</label>
    <input class="pf-c-form-control" input="true" type="tel" id="simple-form-number" name="simple-form-number" placeholder="555-555-5555"></input>
  </div>
  <div class="pf-c-form__group pf-m-inline">
    <label class="pf-c-form__label" required for="inlineradio1">
      How can we contact you? <span class="pf-c-form__label__required" aria-hidden="true">&#42;</span>
    </label>
    <div class="pf-c-check">
      <input class="pf-c-check__input" type="radio" id="inlineradio1" name="inlineradios" required>
      <label class="pf-c-check__label" for="inlineradio1">
        Email</label>
    </div>
    <div class="pf-c-check">
      <input class="pf-c-check__input" type="radio" id="inlineradio2" name="inlineradios">
      <label class="pf-c-check__label" for="inlineradio2">
        Phone</label>
    </div>
    <div class="pf-c-check">
      <input class="pf-c-check__input" type="radio" id="inlineradio3" name="inlineradios">
      <label class="pf-c-check__label" for="inlineradio3">
        Please don't contact me</label>
    </div>
  </div>
  <div class="pf-c-form__group">
    <div class="pf-c-check">
      <input class="pf-c-check__input" type="checkbox" id="checkbox1" name="checkbox1">
      <label class="pf-c-check__label" for="checkbox1">
        I'd like updates via email</label>
    </div>
  </div>
  <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>

Horizontal Form Demo

Preview

Please provide your full name

<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" required input="true" type="text" id="horizontal-form-name" name="horizontal-form-name" aria-describedby="horizontal-form-name-helper2"></input>
      <p class="pf-c-form__helper-text" id="horizontal-form-name-helper2" aria-live="polite">
        Please provide your full name</p>
    </div>
  </div>
  <div class="pf-c-form__group">
    <label class="pf-c-form__label" for="horizontal-form-email">
      Email</label>
    <div class="pf-c-form__horizontal-group">
      <input class="pf-c-form-control" input="true" type="email" id="horizontal-form-email" name="horizontal-form-email"></input>
    </div>
  </div>
  <div class="pf-c-form__group">
    <label class="pf-c-form__label" for="horizontal-form-title">
      Your title</label>
    <div class="pf-c-form__horizontal-group">
      <select class="pf-c-form-control" id="horizontal-form-title" name="horizontal-form-title">
        <option value="" selected>Please choose</option>
        <option value="Mr">Mr</option>
        <option value="Miss">Miss</option>
        <option value="Mrs">Mrs</option>
        <option value="Ms">Ms</option>
        <option value="Dr">Dr</option>
        <option value="Other">Other</option>
      </select>
    </div>
  </div>
  <div class="pf-c-form__group">
    <label class="pf-c-form__label" for="horizontal-form-exp">
      Your experience</label>
    <div class="pf-c-form__horizontal-group">
      <textarea class="pf-c-form-control" name="horizontal-form-exp" id="horizontal-form-exp"></textarea>
    </div>
  </div>
  <div class="pf-c-form__group">
    <label class="pf-c-form__label" for="horizontal-radio1">
      Can we follow up via email?</label>
    <div class="pf-c-form__horizontal-group">
      <div class="pf-c-check">
        <input class="pf-c-check__input" type="radio" id="horizontal-radio1" name="horizontal-radios">
        <label class="pf-c-check__label" for="horizontal-radio1">
          Yes</label>
      </div>
      <div class="pf-c-check">
        <input class="pf-c-check__input" type="radio" id="horizontal-radio2" name="horizontal-radios">
        <label class="pf-c-check__label" for="horizontal-radio2">
          No</label>
      </div>
    </div>
  </div>
  <div class="pf-c-form__group pf-m-action">
    <div class="pf-c-form__horizontal-group">
      <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 class="pf-l-toolbar__group">
          <div class="pf-l-toolbar__item">
            <div class="pf-c-check">
              <input class="pf-c-check__input" type="checkbox" id="alt-form-checkbox" name="alt-form-checkbox">
              <label class="pf-c-check__label" for="alt-form-checkbox">
                Remember my password for 30 days</label>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</form>

Alternative Form Demo

Preview

Must be a minimum of 6 alpha-numeric characters.

<form class="pf-c-form">
  <div class="pf-c-form__group">
    <label class="pf-c-form__label" required for="alt-form-git-repo">
      Email <span class="pf-c-form__label__required" aria-hidden="true">&#42;</span>
    </label>
    <input class="pf-c-form-control pf-m-form-control-alt" required input="true" type="email" id="alt-form-git-repo" name="simple-form-git-repo"></input>
  </div>
  <div class="pf-c-form__group">
    <label class="pf-c-form__label" required for="alt-form-password">
      Password <span class="pf-c-form__label__required" aria-hidden="true">&#42;</span>
    </label>
    <input class="pf-c-form-control pf-m-form-control-alt" required input="true" type="password" id="alt-form-password" name="alt-form-password" aria-describedby="alt-helper3"></input>
    <p class="pf-c-form__helper-text" id="alt-helper3" aria-live="polite">
      Must be a minimum of 6 alpha-numeric characters.</p>
  </div>
  <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 class="pf-l-toolbar__group">
        <div class="pf-l-toolbar__item">
          <div class="pf-c-check">
            <input class="pf-c-check__input" type="checkbox" id="alt-form-checkbox" name="alt-form-checkbox">
            <label class="pf-c-check__label" for="alt-form-checkbox">
              Remember my password for 30 days</label>
          </div>
        </div>
      </div>
    </div>
  </div>
</form>

Documentation

Overview

A basic demo of forms.