Section 5 #Forms
Forms

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.

Example:

Markup:

<form action="" class="pui-form">
  <label for="first-name-a" class="pui-form__field">First Name
    <input id="first-name-a" type="text" placeholder="First Name">
  </label>
  <label for="last-name" class="pui-form__field">Last Name
    <input id="last-name" type="text" placeholder="Last Name">
  </label>
</form>
Source: sass/_forms.scss, line 8

Section 5.1 #Forms.Border
Form Border

This modifier class adds a full border to each input within the form. Just add pui-form--bordered

Example:

Markup:

<form action="" class="pui-form pui-form--bordered block-container tablet-up-3 laptop-up-4 desktop-up-6 blocks mb-3 p-2">
  <div class="block">
    <label for="first-name" class="pui-form__field">First Name
      <input id="first-name" type="text" placeholder="First Name">
    </label>
  </div>
  <div class="block">
    <label for="last-name" class="pui-form__field">Last Name
      <input id="last-name" type="text" placeholder="Last Name">
    </label>
  </div>
  <div class="block">
    <label for="dob" class="pui-form__field">Age or DOB
      <input id="dob" type="date">
    </label>
  </div>
  <div class="block">
    <label for="zipcode" class="pui-form__field">ZIP Code
      <input id="zipcode" type="tel" placeholder="e.g.90012" pattern="^\d{5,6}(?:[-\s]\d{4})?$">
    </label>
  </div>
</form>
Source: sass/_forms.scss, line 69

Section 5.2 #Forms.Error
Error styles

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

Example:

Markup:

<form action="" class="pui-form block-container tablet-up-3 laptop-up-4 desktop-up-6 blocks mb-3 p-2">
  <div class="block">
    <label for="first-name" class="pui-form__field">First Name
      <input id="first-name" type="text" placeholder="First Name">
    </label>
  </div>
  <div class="block">
    <label for="last-name" class="pui-form__field error">Last Name
      <input id="last-name" type="text" placeholder="Last Name">
    </label>
  </div>
  <div class="block">
    <label for="dob" class="pui-form__field">Age or DOB
      <input id="dob" type="date">
    </label>
  </div>
  <div class="block">
    <label for="zipcode" class="pui-form__field">ZIP Code
      <input id="zipcode" type="tel" placeholder="e.g.90012" pattern="^\d{5,6}(?:[-\s]\d{4})?$">
    </label>
  </div>
</form>
Source: sass/_forms.scss, line 129

Section 5.3 #Forms.Fancy
Fancy Forms

You want a fancy form that animates the label? You got it. To get the animation, add the class pui-form__field--fancy to the pui-form__field. You will also need to change the markup slightly. Instead of a label the pui-form__field should now be a div put the label under the input as a sibling of the pui-form__field div. See markup below.

Note: Firefox does not have a way to hide the date and time placeholder for those inputs. This style of form would probably be best for a simple form that has text inputs.

Example:

Markup:

<form action="" class="pui-form">
  <div class="pui-form__field pui-form__field--fancy">
    <input id="first-name" type="text" required placeholder="Jane">
    <label for="first-name">First Name</label>
  </div>
  <div class="pui-form__field pui-form__field--fancy">
    <input id="last-name" type="text" required placeholder="Smith">
    <label for="last-name">Last Name</label>
  </div>
  <div class="pui-form__field pui-form__field--fancy">
    <input id="zipcode" type="tel" pattern="^\d{5,6}(?:[-\s]\d{4})?$" required placeholder="12345">
    <label for="zipcode">ZIP Code</label>
  </div>
  <div class="pui-form__field pui-form__field--fancy">
    <div class="pui-form__select-wrapper">
      <select name="County Select" id="county" required placeholder="County">
        <option value=""></option>
        <option value="County1">County 1</option>
        <option value="County2">County 2</option>
        <option value="County3">County 3</option>
        <option value="County4">County 4</option>
        <option value="County5">County 5</option>
        <option value="County6">County 6</option>
      </select>
      <label for="county">County</label>
    </div>
  </div>
</form>
Source: sass/_forms.scss, line 26

Section 5.4 #Forms.HasIcon
Has Icon

If you would like the icon to be on the right side of the input, add the class has-icon--right to the pui-form__field class.

Example:

Markup:

<form action="" class="pui-form block-container tablet-up-3 laptop-up-4 desktop-up-6 blocks mb-3 p-2">
  <div class="block">
    <label for="dob" class="pui-form__field has-icon--right">Age or DOB
      <input id="dob" type="date">
      <i class="pi-calendar background-white"></i>
    </label>
  </div>
  <div class="block">
    <label for="dob" class="pui-form__field has-icon">Application Date
      <input id="dob" type="date">
      <i class="pi-calendar text-med-blue background-white"></i>
    </label>
  </div>
  <div class="block">
    <label for="time" class="pui-form__field has-icon--right">Your Time
      <input id="time" type="time" placeholder="10:00 AM">
      <i class="pi-clock"></i>
    </label>
  </div>
  <div class="block">
    <div class="pui-form__field pui-form__button-group">
      <button class="button button--post button--lg">Quote Now</button>
    </div>
  </div>
</form>
Source: sass/_forms.scss, line 161

Section 5.5 #Forms.Putting
Putting it together

Here's an example of a larger responsive form using the block layout.

Choose
Gender
Are You
Source: sass/_forms.scss, line 195

Section 5.6 #Forms.Readonly
Readonly Input

This style is for editable inputs as well as textareas. If you want to display the text or value of an input but disable the ability to edit it, add the readonly attribute as well as the class readonly to the input or textarea. In your javascript only toggle the readonly attribute on or off when the user would select the option to edit the text.

NOTE: The js- classes in the example below are just for test purposes. You do not need them.**

Example:

Markup:

<form action="" class="pui-form">
  <div class="block-container">
    <div class="block block-10">
      <label for="first-name" class="pui-form__field">
        <span class="sr-only">Read only input example</span>
        <input id="first-name" type="text" placeholder="First Name" class="readonly" readonly value="This is a readonly input. When you select edit, the readonly attribute will be removed.">
      </label>
    </div>
    <div class="block block-2 flex flex--align-center flex--justify-end">
      <div class="icon-menu">
        <div class="icon-menu__item">
          <a href="#" class="icon-menu__action text-positive--hover js-edit-readonly" role="button">
            <i class="pi-edit" aria-hidden="hidden"></i>
          </a>
        </div>
        <div class="icon-menu__item">
          <a href="#" class="icon-menu__action text-negative--hover" role="button">
            <i class="pi-trash" aria-hidden="hidden"></i>
          </a>
        </div>
      </div>
    </div>
    </div>
    <div class="block-container">
    <div class="block block-10">
      <label for="message" class="pui-form__field">
        <span class="sr-only">Read only input example</span>
        <textarea id="message" name="message" class="readonly js-textarea" readonly>This is a readonly textarea. When you select edit, the readonly attribute will be removed.</textarea>
      </label>
    </div>
    <div class="block block-2 flex flex--align-center flex--justify-end">
      <div class="icon-menu">
        <div class="icon-menu__item">
          <a href="#" class="icon-menu__action text-positive--hover js-edit-textarea" role="button">
            <i class="pi-edit" aria-hidden="hidden"></i>
          </a>
        </div>
        <div class="icon-menu__item">
          <a href="#" class="icon-menu__action text-negative--hover" role="button">
            <i class="pi-trash" aria-hidden="hidden"></i>
          </a>
        </div>
      </div>
    </div>
  </div>
</form>
Source: sass/_forms.scss, line 864

Section 5.7 #Forms.TimeIcon
Time Icon

The select wrapper displays an arrow down icon. We can change that by adding the class time to the class pui-form__select-wrapper. So the classes would be pui-form__select-wrapper time. This will replace the arrow down icon with a clock icon.

Example:

Markup:

<form action="" class="pui-form block-container">
  <div class="block block-4">
    <label for="task-1-time" class="pui-form__field">
      <span class="sr-only">Time Icon Example</span>
      <div class="pui-form__select-wrapper time" id="task-1-time">
        <select class="px-2" name="Select a time" id="task-1-time-select">
          <option value="8:00 AM">8:00 AM</option>
          <option value="8:30 AM">8:30 AM</option>
          <option value="9:00 AM">9:00 AM</option>
          <option value="9:30 AM">9:30 AM</option>
          <option value="10:00 AM">10:00 AM</option>
          <option value="10:30 AM">10:30 AM</option>
        </select>
        <i class="pi-clock"></i>
      </div>
    </label>
  </div>
</form>
Source: sass/_forms.scss, line 100