Pattern Library

Form Elements

Form elements range from buttons to inputs, checkboxes, selects and popovers. These are most commonly found in forms, but are also present in many other aspects of an interface.

Text inputs

Text inputs are accompanied by a label and typically wrapped inside a fieldset. The :hover and :focus styles follow our brand colors.

<form class="form">
  <div class="row">
    <div class="col-md-6">
      <label for="exampleTextInput">Your name</label>
      <input type="text" placeholder="Type your name" id="exampleTextInput">
    </div>
    <div class="col-md-6">
      <label for="exampleEmailInput">Your email</label>
      <input type="email" placeholder="test@mailbox.com" id="exampleEmailInput">
    </div>
  </div>
  <label for="exampleMessage">Message</label>
  <textarea placeholder="Hi Dave…" id="exampleMessage"></textarea>
</form>

Validation feedback

Input fields that have not passed validation are updated with an invalid class. The invalid-error message is placed right after the input field.

Email address is a required field.
Favorite cephalopod is a required field.
<form class="form">
  <div class="row">
    <div class="col-md-6">
      <label for="email">Email address</label>
      <input type="email" placeholder="example@mailbox.com" id="email" class="invalid">
      <div class="invalid-error">Email address is a required field.</div>
    </div>
    <div class="col-md-6">
      <label for="exampleSelect">Favorite cephalopod</label>
      <select id="exampleSelect" class="invalid">
        <option value="Option 1">Octopus</option>
        <option value="Option 2">Cuttlefish</option>
        <option value="Option 3">Nautilus</option>
        <option value="Option 4">Squid</option>
      </select>
      <div class="invalid-error">Favorite cephalopod is a required field.</div>
    </div>
  </div>
</form>

Single action input

A style of input combined with an action. Useful for when there is only a single input to submit, such as copying a link or entering an email address to subscribe to a newsletter.

<form class="actionInput">
  <input placeholder="Enter your email" type="email" class="actionInput__input">
  <button class="actionInput__button button button--primary">Sign up free</button>
</form>

Selects

Selects should be used inline with other inputs like text fields. On mobile devices native selects are better styled for interactions and are tightly coupled with the OS itself. Popovers should be used for more complex content like interactive elements or icons.

<div class="select">
  <label class="select__label">Reason for contacting</label>
  <select class="select__input">
    <option value="Option 1">Questions</option>
    <option value="Option 2">Admiration</option>
    <option value="Option 3">Can I get your number?</option>
  </select>
</div>

Checkboxes & Radios

Native Selects should be used inline with other inputs like text fields. On mobile devices native selects are better styled for interactions and are tightly coupled with the OS itself.

<!-- Checkboxes -->
<label class="checkbox">
  <input class="checkbox__input" name="checkbox" type="checkbox" checked>
  <span class="checkbox__indicator"></span>
  <span class="checkbox__text">Track plain-text clicks</span>
</label>

<label class="checkbox">
  <input class="checkbox__input" name="checkbox" type="checkbox">
  <span class="checkbox__indicator"></span>
  <span class="checkbox__text">Track plain-text clicks</span>
</label>

<label class="checkbox checkbox--disabled">
  <input class="checkbox__input" name="checkbox" type="checkbox" disabled>
  <span class="checkbox__indicator"></span>
  <span class="checkbox__text">I'm disabled</span>
</label>

<!-- Radios -->
<label class="radio">
  <input class="radio__input" name="radio" type="radio" checked>
  <span class="radio__indicator"></span>
  <span class="radio__text">Track plain-text clicks</span>
</label>

<label class="radio">
  <input class="radio__input" name="radio" type="radio">
  <span class="radio__indicator"></span>
  <span class="radio__text">Track plain-text clicks</span>
</label>

<label class="radio radio--disabled">
  <input class="radio__input" name="radio" type="radio" disabled>
  <span class="radio__indicator"></span>
  <span class="radio__text">I'm disabled</span>
</label>

Switches

Use switches to toggle between two mutually exclusive states. A label should be included to indicate what the switch is toggling.

<label class="switch">
  <input class="switch__checkbox" checked type="checkbox"/>
  <div class="switch__handle"></div>
  <span class="switch__label">Allow multiple attempts</span>
</label>

<label class="switch">
  <input class="switch__checkbox" type="checkbox"/>
  <div class="switch__handle"></div>
  <span class="switch__label">Send notification messages</span>
</label>