What Is A Form?

The <form> element represents a document section that contains interactive controls for submitting information to a web server. Our design system also utilizes the <form> element to render a form's design on the screen.

Input Fields

The <input> element is used to create interactive controls for web-based forms in order to accept data from the user.

The <input> element is very flexible and can be adjusted to accept many different types of specific data including, but not limited to: email address, telephone number, text, numbers, passwords, and more.

Design Sample

Legend

Error message Label

Notes

All <input> fields should be built with the <html> structure seen here to enable both semantic delivery and user experience design functions.

When the user clicks or taps the <input> the <label> uses css transformations to move out of place and expose the <placeholder>.

All <input> fields (including <button>) must also include both the .error-message and .valid <span> in order to render the vertical spacing properly and eliminate jank.

html

<fieldset>
  <legend>Legend</legend>
  <div class="field"> <!-- change to 'field valid' or 'field invalid' as necessary -->
    <span class="error-message">Error message</span>
    <input type="text" name="input-example-1" id="input-example-1" placeholder="Placeholder">
    <label for="input-example-1">Label</label>
    <span class="valid"><i class="la la-check-circle-o"></i></span>
  </div>
</fieldset>

Input Validation and Error Messages

As with other elements of our design system, it is possible to add validation conditions to any <input>. Simply add a .valid or .invalid class to the .field class.

Design Sample

Legend

Error message Label

Legend

Error message Label

html

<fieldset>
  <legend>Legend</legend>
  <div class="field valid"> <!-- change to 'field valid' or 'field invalid' as necessary -->
    <span class="error-message">Error message</span>
    <input type="text" name="input-example-2" id="input-example-2" value="This is a valid input">
    <label for="input-example-2">Label</label>
    <span class="valid"><i class="la la-check-circle-o"></i></span>
  </div>
</fieldset>
<fieldset>
  <legend>Legend</legend>
  <div class="field invalid"> <!-- change to 'field valid' or 'field invalid' as necessary -->
    <span class="error-message">Error message</span>
    <input type="text" name="input-example-3" id="input-example-3" value="This input has an error">
    <label for="input-example-3">Label</label>
    <span class="valid"><i class="la la-check-circle-o"></i></span>
  </div>
</fieldset>

Select Input

Design Sample

Legend

Error message

Label

Notes

As with other components in the design system, it is possible to add validation conditions to any <select> component. Simply add a .valid or .invalid class to the .field class. CSS does the rest.

html

<fieldset>
  <legend>Legend</legend>
  <div class="field"> <!-- change to 'field valid' or 'field invalid' as necessary -->
    <span class="error-message">Error message</span>
    <select name="select-example" id="select-example">
      <option value="0">Choose a option</option>
      <option value="Option 1">Option 1</option>
      <option value="Option 2">Option 2</option>
      <option value="Option 3">Option 3</option>
      <option value="Option 4">Option 4</option>
      <option value="Option 5">Option 5</option>
    </select>
    <div class="select-icon"><i class="la la-angle-down"></i></div>
    <span class="select valid"><i class="la la-check-circle-o"></i></span>
    <label for="select-example">Label</label>
  </div>
</fieldset>

Check Boxes

A check box <input> allows values to be selected and deselected.

Design Sample

Check Box Example

Error message Check Box label

Notes

html

<fieldset>
  <legend>Check Box Example</legend>
  <div class="field"> <!-- change class to 'field valid' or 'field invalid' as necessary -->
    <span class="error-message checkbox">Error message</span>
    <input type="checkbox" name="one" id="one">
    <label class="checkbox" for="one">Check Box label</label>
  </div>
</fieldset>

Radio Buttons

Radio Buttons allow only a single value to be selected out of multiple choices.

Design Sample

Radio Buttons

You must select one option On

You must select one option Off

Notes

As with other components in the design system, it is possible to add validation conditions to any Radio Button. Simply add a .valid or .invalid class to the .field class. CSS does the rest.

html

<fieldset>
  <legend>Radio Buttons</legend>
  <div class="small">
    <div class="field"> <!-- change class to 'field valid' or 'field invalid' as necessary -->
      <span class="error-message radio">You must select one option</span>
      <input type="radio" name="radio-one" id="radio-one-option-one" checked>
      <label class="radio" for="radio-one-option-one">On</label>
    </div>
    <div class="field"> <!-- change class to 'field valid' or 'field invalid' as necessary -->
      <span class="error-message radio">You must select one option</span>
      <input type="radio" name="radio-one" id="radio-one-option-two">
      <label class="radio" for="radio-one-option-two">Off</label>
    </div>
  </div>
</fieldset>

Switches

A switch is an <input> toggle that turns a value on and off.

Design Sample

Toggle Switch

This is an error message Label

Notes

As with other components in the design system, it is possible to add validation conditions to any <input>. Simply add a .valid or .invalid class to the .field class.

html

<fieldset>
  <legend>Toggle Switch</legend>
  <div class="field">
    <span class="error-message">This is an error message</span>
    <input type="checkbox" name="toggle" class="toggle" id="toggle-one">
    <label class="toggle" for="toggle-one">Label</label>
  </div>
</fieldset>