Forms

The Core style set lets you easily construct forms that follow the standard form layout and design.

Note: This documentation assumes that you have an understanding of how HTML forms work. It will not go into detail as to how forms are constructed, but rather explain the specifics of the Core-related form styles.

  1. Form Wrapper
  2. Form Themes
    1. Standard Form Theme
  3. Form Structure
  4. Form Elements
    1. Text Inputs
      1. Optimizations for Mobile Users
    2. Select Fields
    3. Inputs with Icons
    4. Input Controls
      1. Radio Buttons
      2. Checkboxes
      3. Toggle Switches
    5. Submit Buttons
    6. Dropdown links
    7. Errors
    8. Required and Optional Labels
    9. Disabled Inputs
  5. Status Messages
  6. HTML5 Validation
  7. Troubleshooting

Form Wrapper

To build a standard form, apply the class form to your form element.

Form wrapper

				

Form Themes

Apply a form theme with a form-theme-* class on the form element.

With no specific theme defined, your form will have a transparent background.

Standard Form Theme

This is the standard form theme.

Form with standard theme

					

Standard Form

Form Structure

Forms are structured using the grid layout. Use the gutter-form gutter on your grid to apply the appropriate spacing between form elements.

Basic form using the grid layout

				

Demo Form

Form Elements

Text Inputs

All text inputs get the class input-text, and are wrapped in a surrounding input-text-container.

Additionally, each input should have a label that helps the user understand which kind of input is asked from them. Labels should contain no more than one or two words.

If you need to provide additional explanation, use the input-label-helper-text element. Place the helper text after the input in the markup.

Text inputs

					
Helper text

Optimizations for Mobile Users

Try to always use the appropriate input type for the use case to allow mobile phones to choose the best suited keyboard, toggle auto capitalization, etc.

For example, use type="tel" for phone numbers and type="email" for email addresses. If you're uncertain which type to use (such as with house numbers, where type="number" might be too restrictive), stick with type="text".

For more information, follow Apple's "Text Programming Guide for iOS" or this article from treehouse.

Text inputs with specific types

						

						

						

Select Fields

Select fields get the class select and are wrapped in a select-container element.

Select fields
<div class="select-container">
  <label class="input-label" for="main-ingredient">Main ingredient</label>
  <select id="main-ingredient" class="select">
    <optgroup label="Fruit">
      <option>Apples</option>
      <option>Bananas</option>
      <option>Carrots</option>
    </optgroup>
    <optgroup label="Vegetables!">
      <option>Potatoes</option>
      <option>Radishes</option>
	</optgroup>
  </select>
</div>

Inputs with Icons

You can place icons on text inputs and select fields to provide an additional hint about what type of input is required. To place an icon, insert the appropriate icon element before the input field and apply either input-icon-left or input-icon-right.

Make sure to place the icon before the actual form field so that the input field can reserve the appropriate space.

Text input with icons

					
Select field with icons

					

Input Controls

Input controls are radio buttons, checkboxes, and toggle switches. Each of these is comprised of a container element, the input itself, and the corresponding label.

Collections of input controls can be shown in two styles: The default style, where each input stands by itself, and a long-list style, which helps readability in long lists of inputs.

Note: Make sure to provide proper labels to all of your controls, otherwise users will not be able to interact with them. Also, place your input before your label, otherwise the checkbox will not be clickable.

Radio Buttons

Create a radio button with the input-radio, label-radio, and radio-container elements.

Optionally, apply the radio-list class on the surrounding list to use the long-list format.

Radio buttons, default and long-list style

						
<ul class="radio-list">
  <li class="radio-container">
    <input type="radio" class="input-radio" id="apple-2" name="fruit-2" checked />
    <label for="apple-2" class="label-radio">Apple</label>
  </li>
  <li class="radio-container">
    <input type="radio" class="input-radio" id="banana-2" name="fruit-2" />
    <label for="banana-2" class="label-radio">Banana</label>
  </li>
</ul>

Checkboxes

Create a checkbox with the input-checkbox, label-checkbox, and checkbox-container elements.

Optionally, apply the checkbox-list class on the surrounding list to use the long-list format.

Checkboxes, default and long-list style

						

						

Toggle Switches

Create a toggle switch with the input-toggle-switch, label-toggle-switch, and toggle-switch-container elements.

Optionally, apply the toggle-switch-list class on the surrounding list to use the long-list format.

Toggle switches, default and long-list style

						

						

Submit Buttons

You can use any of the globally available buttons as form submit buttons. Please see the Buttons section for more information.

Form with submit button

					

Errors

Highlight faulty input by adding the error class to an input field or label.

Inputs with errors
<label for="input-error" class="input-label error" >Label</label>
<input id="input-error" type="text" class="input-text error" />
<div class="select-container">
  <label for="select-error" class="input-label">Label</label>
  <select id="select-error" class="select error">
    <option>Option</option>
  </select>
</div>

					

					

Required and Optional Labels

Mark required and optional inputs with the label-required and label-optional classes, respectively.

Note that required inputs do not get their own visual designation because required inputs are the norm, while optional inputs appear less often.

Required Label

					
Optional Label

					

Disabled Inputs

For the sake of usability, please do not deactivate form inputs. Make sure all of your input fields are usable.

Status Messages

To give feedback to the user, use one of the status messages.

Form with error message

				

Error

The email address you provided appears to be incorrect.

Erroneous Form Data

HTML5 Validation

We recommend to use the HTML5 Constraint Validation API to validate a user's form input on the client side.

Form with HTML5 Contraint Validation

A Form

The thing that people you know call you by

Troubleshooting

Why is my radio button, checkbox, or toggle switch not clickable?

  • Linking label and input control via id and for makes the label area clickable.
  • Still not clickable? Make sure your input appears before your label.