Forms

Form

Out of the box, our form fields have a margin-top added to them. This spacing should work just fine for smaller, simple forms. For larger, responsive forms, we recommend that you utilize the block layout and our spacers to build the perfect form.

Form Level Modifiers

Modifiers

Modifier †	Behavior
`form--fancy`	Adds placeholder/label animation.
`form--bordered`	Adds input borders.
`form--rounded`	Adds circular borders to inputs.
`form--light`	Changes form to white including labels and placeholders.

† The base class is always required.

All of the following form elements must be nested inside the form class to get the desired look.

Error Styles

If there is an error on a specific input after submission, add the error class to the specific form__field.

Demo

Markup

<form class="form">
  <div class="form__field error">
    <input type="text"/>
  </div>
</form>

If you add the error class to a form__field that contains check boxes or radios, each input in that field will receive the error styling. However, if you only want to highlight on specific check or radio, simply add error to the proper input. This will give the icon as well as the corresponding label the error style.

Has Icon

has-icon provides space for an icon on the left of an input. If you would like the icon to be on the right side of the input, add the class has-icon--right to the form__field class instead.

Demo

Markup

<form action="" class="form block-container tablet-up-3 laptop-up-4 desktop-up-6 blocks mb-3 p-2">
  <div class="block">
    <label for="dob-g" class="form__field has-icon--right">Birthday<input id="dob-g" type="date"/><i class="pi-calendar background--white"></i></label>
  </div>
  <div class="block">
    <label for="date-g" class="form__field has-icon">Date<input id="date-g" type="date"/><i class="pi-calendar text--med-blue background--white"></i></label>
  </div>
  <div class="block">
    <label for="time-g" class="form__field has-icon--right">Your Time<input id="time-g" type="time" placeholder="10:00 AM"/><i class="pi-clock"></i></label>
  </div>
</form>

Checkbox

For better semantics, it would be best to wrap the checkboxes in a fieldset using this element as your form__field then adding a legend. See the example below.

Demo

Markup

<form class="form block-container">
  <div class="block block-5">
    <fieldset class="form__field">
      <legend>Choose</legend>
        <input id="choose-this-one" type="checkbox"/>
        <label for="choose-this-one">
          <div class="input-icons">
            <i class="pi-circle pi-lg"></i>
            <i class="pi-check pi-heavy"></i>
          </div>
          Option 1
        </label>
        <input id="choose-that-one" type="checkbox"/>
        <label for="choose-that-one">
          <div class="input-icons">
            <i class="pi-circle pi-lg"></i>
            <i class="pi-check pi-heavy"></i>
          </div>
          Option 2
        </label>   
    </fieldset>
  </div>
</form>

Radio

For better semantics, it would be best to wrap the radios in a fieldset using this element as your form__field then adding a legend.

Demo

Markup

<form action="" class="form block-container">
  <div class="block block-4">
    <fieldset class="form__field">
      <legend>Pick one</legend>
      <div class="form__option-group">
        <input id="choose-big" type="radio" name="choose-one"/>
        <label for="choose-big">
          <div class="input-icons">
            <i class="pi-circle pi-lg"></i>
            <i class="pi-circle-solid"></i>
          </div>
          Big
        </label>
        <input id="choose-small" type="radio" name="choose-one"/>
        <label for="choose-small">
          <div class="input-icons">
            <i class="pi-circle pi-lg"></i>
            <i class="pi-circle-solid"></i>
          </div>
          Small
        </label>
        <input id="choose-bigger" type="radio" name="choose-one"/>
        <label for="choose-bigger">
          <div class="input-icons">
            <i class="pi-circle pi-lg"></i>
            <i class="pi-circle-solid"></i>
          </div>
          Bigger
        </label>
        <input id="choose-smaller" type="radio" name="choose-one"/>
        <label for="choose-smaller">
          <div class="input-icons">
            <i class="pi-circle pi-lg"></i>
            <i class="pi-circle-solid"></i>
          </div>
          Smaller
        </label>
      </div>
    </fieldset>
  </div>
</form>

Select

Demo

Markup

<form action="" class="form block-container">
  <div class="block block-4">
    <label for="option" class="form__field">Option
      <div class="form__select-wrapper">
        <select name="Option Select" id="option">
          <option value="Option1">Option 1</option>
          <option value="Option2">Option 2</option>
        </select>
      </div>
    </label>
  </div>
</form>

Toggle

Demo

Markup

  <form class="form">
    <div class="block-container">
      <fieldset class="form__field block-4">
        <legend>Are You</legend>
        <div class="toggle">
          <input id="Tall-2" type="radio" checked name="height"/>
          <label for="Tall-2">
            <i class="pi-check pi-heavy"></i> Tall
          </label>
          <input id="Short-2" type="radio" name="height"/>
          <label for="Short-2">
            <i class="pi-check pi-heavy"></i> Short
          </label>
        </div>
      </fieldset>
    </div>
  </form>

Switch

For a smaller widget variation of the toggle use the class switch. This is a great option for a checkbox.

Demo

Markup

  <form class="form">
    <div class="block-container">
      <fieldset class="form__field block-4">
        <legend></legend>
        <div class="toggle-small">
          <input id="active" type="checkbox" name="active"/>
          <label for="active">
          </label>
        </div>
      </fieldset>
    </div>
  </form>