⬅

Forms

Form Labels

Use the .formLabel class to get our custom styling for form labels. 

<form>
  <label class="formLabel">Your email</label>
  <label class="formLabel">Your email <span class="u-txtQuiet">(optional)</span></label>
</form>

Text Inputs

Use the .formControl class to get default styling for text inputs. Text inputs are always paired with a label to give users context. Placeholder text is used for additional context when necessary.

Keep in mind, formControl spans a width of 100% by default.

<form>
  <label class="formLabel">Add your name</label>
  <input class="formControl" type="text">
</form>

Helper Text

When necessary, place additional helper text beneath inputs in a label with a .form-helper class.

<form>
  <label class="formLabel">Add your website</label>
  <input class="formControl" type="url">
  <label class="u-txtQuiet  u-txtSmall">Please include http://</label>
</form>

Textarea

Textarea’s also use the .formControl class.

<form>
  <label class="formLabel">Add a Comment</label>
  <textarea class="formControl"></textarea>
</form>

Select

Extend the .formControl class with .formControl--select to get default styling for select fields. Optionally, use a form label above your select if the default text is not descriptive enough, if the default is one of the valid select options, or if the selection will be saved and viewable again later.

<form>
  <select class="formControl  formControl--select">
    <option value="" selected disabled>How are you feeling?</option>
    <option value="amazing">Amazing</option>
    <option value="boring">Boring</option>
    <option value="fun">Fun</option>
  </select>
</form>

Radio Buttons

Wrap a radio input with a label element and give it a class of .formRadio.

Make them inline by adding the .formInline class on the form element.

<form>
  <label class="formRadio">
    <input id="visa" name="cardtype" type="radio">
    VISA
  </label>

  <label class="formRadio">
    <input id="mastercard" name="cardtype" type="radio">
    Mastercard
  </label>

  <label class="formRadio">
    <input id="amex" name="cardtype" type="radio">
    AMEX
  </label>
</form>

<p>Make them inline by adding the <code>.formInline</code> class on the form element.</p>

<form class="formInline">
  <label class="formRadio">
    <input id="visa" name="cardtype" type="radio">
    VISA
  </label>

  <label class="formRadio">
    <input id="mastercard" name="cardtype" type="radio">
    Mastercard
  </label>

  <label class="formRadio">
    <input id="amex" name="cardtype" type="radio">
    AMEX
  </label>
</form>

Checkboxes

Wrap a checkbox input with a label element and give it a class of .formCheck.

Make them inline by adding the .formInline class on the form element.

<form>
  <label class="formCheck">
    <input id="visa2" name="cardtype2" type="checkbox">
    VISA
  </label>

  <label class="formCheck">
    <input id="mastercard2" name="cardtype2" type="checkbox">
    Mastercard
  </label>

  <label class="formCheck">
    <input id="amex2" name="cardtype2" type="checkbox">
    AMEX
  </label>
</form>

<p>Make them inline by adding the <code>.formInline</code> class on the form element.</p>

<form class="formInline">
  <label class="formCheck">
    <input id="visa2" name="cardtype2" type="checkbox">
    VISA
  </label>

  <label class="formCheck">
    <input id="mastercard2" name="cardtype2" type="checkbox">
    Mastercard
  </label>

  <label class="formCheck">
    <input id="amex2" name="cardtype2" type="checkbox">
    AMEX
  </label>
</form>

Disabled States

Add the disabled boolean attribute on an input to prevent user interactions. Disabled items appear lighter and add a not-allowed cursor.

For just the look of disabled, use the is-disabled class.

<form>
  <fieldset class="u-mb4">
    <label class="formLabel" for="sFirstName">First Name</label>
    <input id="sFirstName" class="formControl" name="sFirstName" type="text" required disabled>
  </fieldset>

  <fieldset class="u-mb4">
    <select class="formControl  formControl--select" name="iEmployees" disabled>
      <option value="" selected disabled>Select number of users</option>
      <option value="7">100+</option>
      <option value="6">51-99</option>
      <option value="9">6-50</option>
      <option value="2">1-5</option>
    </select>
  </fieldset>

  <fieldset class="u-mb4">
    <button class="button  button--primary" type="submit" disabled>Submit</button>
  </fieldset>
</form>

Validation States

<form>
  <fieldset class="u-mb4">
    <label class="formLabel" for="sFirstName2">First Name</label>
    <input id="sFirstName2" class="formControl  is-valid" name="sFirstName2" type="email" required>
  </fieldset>

  <fieldset class="u-mb4">
    <select class="formControl  formControl--select" name="iEmployees2" required>
      <option value="" selected disabled>Select number of users</option>
      <option value="7">100+</option>
      <option value="6">51-99</option>
      <option value="9">6-50</option>
      <option value="2">1-5</option>
    </select>
  </fieldset>

  <fieldset class="u-mb4">
    <button class="button  button--primary" type="submit">Submit</button>
  </fieldset>
</form>