The humble form

We've set out to create an easy and powerful form system. Minimal markup combined with our grid system makes layout fun and intuitive.

Forms need love too

Forms are everywhere. We love good forms, and we dislike bad ones even more. A lot goes into designing good forms and a bad form can ruin user experience. For tips and information on designing better forms we recommend Web Form Design and Defensive Design for the Web.

Basic example

<form class='col-sm-9 col-xs-12'>
  <fieldset>
    <label for='input1'>Input Label</label>
    <input id='input1' type='text' class='stretch' placeholder='.stretch' />
  </fieldset>
  <fieldset>
    <label for='datepicker'>Datepicker</label>
    <input id='datepicker' type='text' class='stretch' placeholder='.stretch' />
  </fieldset>
  <fieldset class='col-sm-6 pad0r'>
    <label for='input2'>.col-sm-6</label>
    <input id='input2' type='text' class='stretch'>
  </fieldset>
  <fieldset class='col-sm-6 pad0l'>
    <label for='input3'>.col-sm-6</label>
    <input id='input3' type='text' class='stretch'>
  </fieldset>
  <fieldset>
    <label for='input4'>Select Box</label>
    <div class='input-group col-xs-12'>
      <select id='input4' class='stretch'>
        <option>
          Please select a security question...
        </option>
        <option>
          What's your password?
        </option>
      </select>
      <i class='icon icon-chevron-down'></i>
    </div>
  </fieldset>
  <div class='checkbox space-bottom'>
    <input id='agree' type='checkbox' checked='checked'>
    <label for='agree' class='small icon icon-ok col-xs-12'>I agree with the terms and conditions</label>
  </div>              
  <fieldset>
    <label>Will you go out with me? Circle yes or no.</label>
    <div class='radio space-bottom1'>
      <input type='radio' name='radios' id='radio1' value='yes'>
      <label for='radio1' class='icon-radio-checked'>
        Yes
      </label>
    </div>
    <div class='radio space-bottom1'>
      <input type='radio' name='radios' id='radio2' value='no' checked='checked'>
      <label for='radio2' class='icon-radio-checked'>
        No
      </label>
    </div>            
  </fieldset>              
  <fieldset>
    <label for='input5'>What is love?</label>
    <textarea id='input5' class='stretch'></textarea>
  </fieldset>              
  <fieldset class='col-sm-6 pad0r'>
    <label for='depart'>Depart</label>
    <input id='depart' class='datepicker stretch' type='text'>
  </fieldset>
  <fieldset class='col-sm-6 pad0l'>
    <label for='arrive'>Arrive</label>
    <input id='arrive' class='datepicker stretch' type='text'>
  </fieldset>
  <fieldset>
    <label for='privacy-off'>Airplane Mode</label>
    <div class='rounded-toggle inline'>
      <input id='privacy-off' type='radio' name='rtoggle' value='off' checked='checked'>
      <label for='privacy-off'>Off</label>
      <input id='privacy-on' type='radio' name='rtoggle' value='on'>
      <label for='privacy-on'>On</label>
    </div>                  
  </fieldset>
</form>
<script>
  $('.datepicker').each(function(index, value) {
    new Pikaday({ field: value });
  });
</script>

Text Input

Text inputs support a wide variety of types and sizes. Combine them with label and fieldset elements to pick up additional styling.

input.stretch
input.short
<form>
  <fieldset>
    <label>First Name</label>
    <input type='text'>
  </fieldset>
</form>

<form>
  <fieldset>
    <label>Name</label>
    <input type='text' class='stretch'>
  </fieldset>
</form>

<form>
  <fieldset>
    <label>Age</label>
    <input type='text' class='short'>
  </fieldset>
</form>

Text Area

Form control which supports multiple lines of text. Change rows attribute as necessary.

<fieldset>
  <label>Enter a description</label>
  <textarea class='stretch'></textarea>
</fieldset>

Checkboxes

Checkboxes are visual representations of a boolean field, where the value is either true or false. They can be stacked using the grid system to add a nice visual effect.

stacked
<div class='pad2 checkbox'>
  <input type='checkbox' id='gift' checked='checked'>
  <label for='gift' class='small icon icon-ok'>This is a gift</label>
</div>

<form>
  <fieldset>
    <label>Which games do you want to play?</label>
    <div class='checkbox'>
      <input type='checkbox' id='football' checked='checked'>
      <label for='football' class='small icon icon-ok col-sm-6 col-xs-12'>
        Football
      </label>
    </div>            
    <div class='checkbox'>
      <input type='checkbox' id='basketball' checked='checked'>
      <label for='basketball' class='small icon icon-ok col-sm-6 col-xs-12'>
        Basketball
      </label>
    </div>            
    <div class='checkbox'>
      <input type='checkbox' id='baseball' checked='checked'>
      <label for='baseball' class='small icon icon-ok col-sm-6 col-xs-12'>
        Baseball
      </label>
    </div>                            
    <div class='checkbox'>
      <input type='checkbox' id='soccer' checked='checked'>
      <label for='soccer' class='small icon icon-ok col-sm-6 col-xs-12'>
        Soccer
      </label>
    </div>            
    <div class='checkbox'>
      <input type='checkbox' id='wow' checked='checked'>
      <label for='wow' class='small icon icon-ok col-sm-6 col-xs-12'>
        World of Warcraft
      </label>
    </div>            
  </fieldset>
</form>

Radios

Radios are for selecting one option from many. They are given a large click radius to make selection easier on small devices.

<form>
  <fieldset>
    <label>Can you make it to my birthday party?</label>
    <div class='radio space-bottom1'>
      <input type='radio' name='birthday' id='birthday-yes' value='yes' checked>
      <label for='birthday-yes' class='icon-radio-checked'>
        Yeah!
      </label>
    </div>
    <div class='radio space-bottom1'>
      <input type='radio' name='birthday' id='birthday-no' value='no'>
      <label for='birthday-no' class='icon-radio-checked'>
        Nah bruh
      </label>
    </div>
    <div class='radio space-bottom1'>
      <input type='radio' name='birthday' id='birthday-maybe' value='maybe' checked>
      <label for='birthday-maybe' class='icon-radio-checked'>
        Maybe?
      </label>
    </div>
  </fieldset>
</form>

Switches

Switches are toggle elements that switch between an Off and On state on tap or click. They make use of radio buttons and require no javascript.

<div class='rounded-toggle inline'>
  <input id='no' type='radio' name='rtoggle' value='no' checked='checked'>
  <label for='no'>No</label>
  <input id='yes' type='radio' name='rtoggle' value='yes'>
  <label for='yes'>Yes</label>
</div>

Selects

Use select when there are more than 6 options to choose from.

<form>
  <fieldset>
    <label>Select Box</label>
    <div class='input-group col-xs-12'>
      <select class='stretch'>
        <option>
          Single
        </option>
        <option>
          Group
        </option>
        <option>
          Couple
        </option>
        <option>
          Family
        </option>
        <option>
          Roommate selected
        </option>
        <option>
          Need roommate
        </option>
        <option>
          Without accommodations
        </option>
      </select>
      <i class='icon icon-chevron-down'></i>
    </div>
  </fieldset>
</form>

Datepickers

Restyled Pikaday. See its documentation for a complete list of options.

<form>
  <fieldset>
    <label for='datepicker'>When can you start?</label>
    <input id='datepicker' class='datepicker' type='text'>
  </fieldset>
</form>
<script>
  $('.datepicker').each(function(index, value) {
    new Pikaday({ field: value });
  });
</script>

Inputs with icons

Icons can be added to inputs to assist with the form process.

input.short
<form>
  <fieldset class='with-icon'>
    <span class='icon icon-search'></span>
    <input type='text' />
  </fieldset>                
</form>

<form>
  <fieldset class='with-icon'>
    <span class='icon icon-search small'></span>
    <input type='text' class='short' />
  </fieldset>                
</form>

Column sizing

Control form layout using the grid system. Use padding helpers to create consistent spacing between columns.

2 column
3 column
4 column
<form>
  <fieldset class='col-sm-6 pad0r'>
    <label>.col-sm-6</label>
    <input type='text' class='stretch'>
  </fieldset>
  <fieldset class='col-sm-6 pad0l'>
    <label>.col-sm-6</label>
    <input type='text' class='stretch'>
  </fieldset>
</form>

<form>
  <fieldset class='col-sm-4 pad0r'>
    <label>.col-sm-4</label>
    <input type='text' class='stretch'>
  </fieldset>
  <fieldset class='col-sm-4 pad0x'>
    <label>.col-sm-4</label>
    <input type='text' class='stretch'>
  </fieldset>
  <fieldset class='col-sm-4 pad0l'>
    <label>.col-sm-4</label>
    <input type='text' class='stretch'>
  </fieldset>
</form>

<form>
  <fieldset class='col-sm-3 pad0r'>
    <label>.col-sm-3</label>
    <input type='text' class='stretch'>
  </fieldset>
  <fieldset class='col-sm-3 pad0x'>
    <label>.col-sm-3</label>
    <input type='text' class='stretch'>
  </fieldset>
  <fieldset class='col-sm-3 pad0x'>
    <label>.col-sm-3</label>
    <input type='text' class='stretch'>
  </fieldset>
  <fieldset class='col-sm-3 pad0l'>
    <label>.col-sm-3</label>
    <input type='text' class='stretch'>
  </fieldset>
</form>

Horizontal forms

Use our grid system and helper classes to align labels and groups of form controls in a horizontal layout.

<form>
  <fieldset>
    <label class='inline pad1y col-sm-3 col-xs-4'>Enter your name</label>
    <input type='text' class='col-sm-9 col-xs-8'>
  </fieldset>
  <fieldset>
    <label class='inline pad1y col-sm-3 col-xs-4'>Enter your age</label>
    <input type='text' class='col-sm-9 col-xs-8'>
  </fieldset>
</form>

Validations

Call attention to form errors by adding .with-error to a fieldset and including an .error-message underneath the invalid field. Displaying messages next to fields lets users spot corrections and move on quickly.

field is required
field is required
field is required
<form class='col-sm-9 col-xs-12 clearfix'>
  <fieldset class='with-error'>
    <label for='error1'>Input Label</label>
    <input id='error1' type='text' class='stretch' placeholder='.stretch' />
    <small class='error-message'>field is required</small>
  </fieldset>
  <fieldset class='col-sm-6 pad0r with-error'>
    <label for='error2'>.col-sm-6</label>
    <input id='error2' type='text' class='stretch'>
    <small class='error-message'>field is required</small>
  </fieldset>
  <fieldset class='col-sm-6 pad0l with-error'>
    <label for='error3'>.col-sm-6</label>
    <input id='error3' type='text' class='stretch'>
    <small class='error-message'>field is required</small>
  </fieldset>
</form>

Dark variants

Each form control includes a dark version that is styled automatically when its container includes the .dark class. Be sure to combine a .fill-[color] from our colors section.

<div class='pad2 fill-navy dark'>
  <form class='col-sm-9 col-xs-12'>
    <fieldset>
      <label>Input Label</label>
      <input type='text' class='stretch' placeholder='.stretch' />
    </fieldset>
    <fieldset class='col-sm-6 pad0r'>
      <label>.col-sm-6</label>
      <input type='text' class='stretch'>
    </fieldset>
    <fieldset class='col-sm-6 pad0l'>
      <label>.col-sm-6</label>
      <input type='text' class='stretch'>
    </fieldset>
    <fieldset>
      <label>Select Box</label>
      <div class='input-group col-xs-12'>
        <select class='stretch'>
          <option>
            Please select a security question...
          </option>
          <option>
            What's your password?
          </option>
        </select>
        <i class='icon icon-chevron-down'></i>
      </div>
    </fieldset>
    <div class='checkbox space-bottom'>
      <input id='agree-dark' type='checkbox' checked='checked'>
      <label for='agree-dark' class='small icon icon-ok col-xs-12'>I agree with the terms and conditions</label>
    </div>              
    <fieldset>
      <label>Will you go out with me? Circle yes or no.</label>
      <div class='radio space-bottom1'>
        <input type='radio' name='radios' id='radio1-dark' value='yes'>
        <label for='radio1-dark' class='icon-radio-checked'>
          Yes
        </label>
      </div>
      <div class='radio space-bottom1'>
        <input type='radio' name='radios' id='radio2-dark' value='no' checked='checked'>
        <label for='radio2-dark' class='icon-radio-checked'>
          No
        </label>
      </div>            
    </fieldset>              
    <fieldset>
      <label>What is love?</label>
      <textarea class='stretch'></textarea>
    </fieldset> 
    <fieldset class='col-sm-6 pad0r'>
      <label for='depart-dark'>Depart</label>
      <input id='depart-dark' class='datepicker stretch' type='text'>
    </fieldset>
    <fieldset class='col-sm-6 pad0l'>
      <label for='arrive-dark'>Arrive</label>
      <input id='arrive-dark' class='datepicker stretch' type='text'>
    </fieldset>
    <fieldset>
      <label>Airplane Mode</label>
      <div class='rounded-toggle inline'>
        <input id='privacy-off-dark' type='radio' name='rtoggle-dark' value='off' checked='checked'>
        <label for='privacy-off-dark'>Off</label>
        <input id='privacy-on-dark' type='radio' name='rtoggle-dark' value='on'>
        <label for='privacy-on-dark'>On</label>
      </div>                  
    </fieldset>    
  </form>
</div>
Made with in Norcross by the UX Team.