Forms

Individual form controls automatically receive some global styling. All textual <input>, <textarea>, and <select> elements are set to width: 100%, with a maximum of 400px by default. Wrap labels and controls in .form-item for optimum spacing.

Form fields are wrapped in a .form-wrapper, for visual distance from other blocks.

Form buttons are wrapped in a .form-actions so we can align them horizontally.

Basic forms

In this example you can see the most used form elements and their default styling. Scroll further down to see each form element explained.

This is a description.
  <div class='form-wrapper'>
    <div class='form-item'>
      <label class='form-label' for='edit-name'>
        Text input
        <span class='form-required' title='This field is required.'>*</span>
      </label>
      <div class='form-description'>This is a description.</div>
      <input class='form-text' type='text' placeholder='type your input here' />
    </div>
    <div class='form-item'>
      <label class='form-label' for='edit-password'>
        Password
        <span class='form-required' title='This field is required.'>*</span>
      </label>
      <input class='form-text' type='password' placeholder='type your input here' />
    </div>
    <div class='form-item'>
      <label class='form-label'>Radios</label>
      <div class='form-radios'>
        <div class='form-type-radio'>
          <input checked='checked' class='form-radio' id='one' name='radio' type='radio' value='one'>
          <label class='option' for='one'>Option 1</label>
        </div>
        <div class='form-type-radio'>
          <input class='form-radio' id='two' name='radio' type='radio' value='two'>
          <label class='option' for='two'>Option 2</label>
        </div>
      </div>
    </div>
    <div class='form-item form-type-checkbox'>
      <input checked='checked' class='form-checkbox' id='checkexample' type='checkbox'>
      <label class='option' for='checkexample'>checkbox field that is checked by default</label>
    </div>
    <div class='form-item'>
      <label class='form-label'>Select field</label>
      <select class='form-select'>
        <option value=''>Please select</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
        <option>5</option>
      </select>
    </div>
    <div class='form-item'>
      <label>Textarea</label>
      <textarea rows="3" placeholder="Write your comment here..."> </textarea>
    </div>
  </div>
  <div class='form-actions form-wrapper'>
    <input class='button btn-primary' type='submit' value='Submit'>
    <input class='button ' type='submit' value='Cancel'>
  </div>

Horizontal form (inline)

Adding the class .row alongside .form-wrapper display those forms inline-block with vertical align in the middle, and the classes .form-item inside display inline-table.

input description, comes before the input.
input description, comes before the input.
  <div class='form-wrapper row'>
    <div class='form-item'>
      <label for='edit-text2'> input type text 1
        <span class='form-required' title='This field is required.'>*</span>
      </label>
      <div class='form-description'> input description, comes before the input.</div>
      <input class='form-text' id='edit-text2' type='text' value=''>
    </div>
    <div class='form-item'>
      <label for='edit-text3'> input type text 2
        <span class='form-required' title='This field is required.'>*</span>
      </label>
      <div class='form-description'> input description, comes before the input.</div>
      <input class='form-text' id='edit-text3' type='text' value=''>
    </div>
  </div>
  <div class='form-actions form-wrapper row'>
    <input class='button btn-primary' type='submit' value='Submit'>
    <input class='button' type='reset' value='Cancel'>
  </div>

Inputs

All inputs must be placed inside a .form-item and have the class .form-text. Placeholders are optional, and these may never replace labels.

  <div class='form-item'>
    <input type='text' class="form-text" placeholder="text input" value="" />
  </div>

Date input

The date type is used for input fields that should contain a date. Currently only Chrome, Safari and Opera support this input type. For browsers that do not support the date input field, it will behave just like a text input. With Modernizr we detect the support for this feature and load the Date picker script.

An icon is placed inside the field to notify users they can select something.

  <div class='form-item'>
    <input type='date' class="form-text pickadate" placeholder="Pick a date" value="" />
  </div>

Input with autocomplete

Autocomplete fields need to be set from Drupal, because they need to be linked to a list of taxonomies and we use a Drupal module for this. In this demo you can see the styling for this component. On the website the suggestion list is updated on each keypress.

This demo does not respond to your input, it is a static suggestion list
  • Arctic Ocean
  • Atlantic Ocean
  • Indian Ocean
  • Pacific Ocean
  • Southern Ocean
  <div class='form-item'>
    <label> Type anything to see the demo
    <input type='text' class="form-text form-autocomplete" placeholder="text input" value="" />
    <input type="hidden" id="example-autocomplete" value="#link-to-taxonomy-list" disabled="disabled" class="autocomplete">
  </div>

Textarea

Textarea must be placed inside a `.form-item`

  <div class="form-item">
    <textarea rows="3" placeholder="Write your comment here..."> </textarea>
  </div>

Radio's and checkboxes

  <div class='form-item'>
    <label class='form-label'>Radios</label>
    <div class='form-radios'>
      <div class='form-type-radio'>
        <input checked='checked' class='form-radio' id='radio-one' name='radio' type='radio' value='one'>
        <label class='option' for='radio-one'>Option 1</label>
      </div>
      <div class='form-type-radio'>
        <input class='form-radio' id='radio-two' name='radio' type='radio' value='two'>
        <label class='option' for='radio-two'>Option 2</label>
      </div>
      <div class='form-type-radio'>
        <input class='form-radio' id='radio-three' name='radio' type='radio' value='three'>
        <label class='option' for='radio-three'>Option 3</label>
      </div>
    </div>
  </div>

  <div class='form-item form-type-checkbox'>
    <input checked='checked' class='form-checkbox' id='check1' type='checkbox'>
    <label class='option' for='check1'>checkbox field that is checked by default</label>
  </div>

  <div class='form-item form-type-checkbox'>
    <input class='form-checkbox' id='check2' type='checkbox'>
    <label class='option' for='check2'>checkbox field that is not checked by default</label>
  </div>

Select

Textarea must be placed inside a `.form-item`

  <div class="form-item form-type-select">
    <label class="form-label">Select field</label>
    <select class="form-select">
      <option value="">Please select</option>
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
      <option value="4">4</option>
      <option value="5">5</option>
    </select>
  </div>

Select with autocomplete

For selects with autocomplete's we use the jQuery Chosen plugin. This function is often activated when the list of options is so long that it is more convenient for a user to start typing and give a suggestion of options that match their search.

  <div class="form-item form-type-select">
    <label class="form-label">Select field</label>
    <select class="chosen-select">
      <option value="">Please select</option>
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
      <option value="4">4</option>
      <option value="5">5</option>
    </select>
  </div>

Multiselect with autocomplete

For multiselects we use the jQuery Chosen plugin by default. You need to give the select element the class .chosen-select to activate. The styling of the options should match the small buttons

  <div class='form-item form-type-select'>
    <label class='form-label'>Select field</label>
    <select class='chosen-select' data-placeholder='Choose a Country...' multiple='multiple'>
      <option value=''></option>
      <option value='Belgium'>Belgium</option>
      <option value='France'>France</option>
      <option value='India'>India</option>
      <option value='International'>International</option>
      <option value='Nederland'>Nederland</option>
      <option value='Nordic'>Nordic</option>
      <option value='Russia'>Russia</option>
      <option value='Thailand'>Thailand</option>
      <option value='USA'>USA</option>
      <option value='United Kingdom'>United Kingdom</option>
    </select>
  </div>

Errors

An example of each form element when a user has not filled in the form with valid data. The form element wrapper will get a .has-error by default to indicate in which field the user has made a mistake.

This is a description.
  <div class='form-wrapper'>
    <div class='form-item'>
      <label class='form-label' for='edit-name'>
        Text input
        <span class='form-required' title='This field is required.'>*</span>
      </label>
      <div class='form-description'>This is a description.</div>
      <input class='form-text error' type='text' placeholder='type your input here' />
    </div>
    <div class='form-item'>
      <label class='form-label' for='edit-password'>
        Password
        <span class='form-required' title='This field is required.'>*</span>
      </label>
      <input class='form-text error' type='password' placeholder='type your input here' />
    </div>
    <div class='form-item'>
      <label class='form-label'>Radios</label>
      <div class='form-radios'>
        <div class='form-type-radio'>
          <input checked='checked' class='form-radio error' id='one' name='radio' type='radio' value='one'>
          <label class='option' for='one'>Option 1</label>
        </div>
        <div class='form-type-radio'>
          <input class='form-radio error' id='two' name='radio' type='radio' value='two'>
          <label class='option' for='two'>Option 2</label>
        </div>
      </div>
    </div>
    <div class='form-item form-type-checkbox'>
      <input checked='checked' class='form-checkbox error' id='checkexample' type='checkbox'>
      <label class='option' for='checkexample'>checkbox field that is checked by default</label>
    </div>
    <div class='form-item'>
      <label class='form-label'>Select field</label>
      <select class='form-select error'>
        <option value=''>Please select</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
        <option>5</option>
      </select>
    </div>
    <div class='form-item'>
      <label>Textarea</label>
      <textarea class="error" rows="3" placeholder="Write your comment here..."> </textarea>
    </div>
  </div>