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
    2. Select Fields
    3. Input Controls
      1. Radio Buttons
      2. Checkboxes
      3. Toggle Switches
    4. Submit Buttons
    5. Cancel Link
    6. Errors
    7. Required and Optional Labels
    8. Disabled Inputs
    9. Optimizations for Mobile Users
  5. Status Messages
  6. HTML5 Validation

Form Wrapper

If you want to build a standard form, you will need to apply the class form to your form element.

Form wrapper 
<form action="#" class="form"></form>

Form Themes

Appliy a form theme with the form-theme-* class on the form element. Currently, only form-theme-standard is available.

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
<form action="#" class="form form-theme-standard">
  <h4>Standard Form</h4>
  <fieldset>
    <div class="grid grid-flex gutter-form">
      <div class="grid-item one-whole">
        <input type="text" class="input-text" />
      </div>
    </div>
  </fieldset>
  <fieldset>
    <div class="grid grid-flex gutter-form grid-justify-end">
      <div class="grid-item">
        <input type="submit" class="button-primary" value="Submit" />
      </div>
    </div>
  </fieldset>
</form>

Standard Form

Form Structure

Forms are structured using the grid(-flex) layout. To make inputs 100% wide, use one-whole.

Basic form using the grid grid-flex layout
<form action="#" class="form form-theme-standard">
  <h3>Demo Form</h3>
  <fieldset>
    <div class="grid grid-flex gutter-form">
      <div class="grid-item one-whole">
        <label for="input1">Label 1</label>
        <div class="select-container">
          <select id="input1" class="select">
            <option>Option</option>
            <option>Awption</option>
          </select>
        </div>
      </div>
      <div class="grid-item one-whole">
        <label for="input2">Label 2</label>
        <div class="input-text-container">
          <input type="text" id="input2" class="input-text" />
        </div>
      </div>
      <div class="grid-item one-whole">
        <label for="input3">Label 3</label>
        <div class="input-text-container">
          <input type="text" id="input3" class="input-text" />
        </div>
      </div>
      <div class="grid-item one-whole">
        <div class="checkbox-container">
          <input class="input-checkbox" type="checkbox" id="input4" />
          <label for="input4" class="label-checkbox">Label 4</label>
        </div>
        <div class="checkbox-container">
          <input class="input-checkbox" type="checkbox" id="input5" />
          <label for="input5" class="label-checkbox">Label 5</label>
        </div>
      </div>
    </div>
  </fieldset>
  <fieldset>
    <div class="grid grid-flex gutter-form">
      <div class="grid-item one-half">
        <label for="input6">Lbl 6</label>
        <div class="input-text-container">
          <input type="text" id="input6" class="input-text" />
        </div>
      </div>
      <div class="grid-item one-half">
        <label for="input7">Lbl 7</label>
        <div class="input-text-container">
          <input type="text" id="input7" class="input-text" />
        </div>
      </div>
      <div class="grid-item one-half">
        <label for="input8">Lbl 8</label>
        <div class="input-text-container">
          <input type="text" id="input8" class="input-text" />
        </div>
      </div>
      <div class="grid-item one-half">
        <label for="input9">Lbl 9</label>
        <div class="input-text-container">
          <input type="text" id="input9" class="input-text" />
        </div>
      </div>
    </div>
  </fieldset>
  <fieldset>
    <div class="grid grid-flex gutter-form grid-justify-end">
      <div class="grid-item">
        <a href="#" class="button button-margin-right cancel">Back</a>
      </div>
      <div class="grid-item">
        <input type="submit" class="button-primary" value="Submit" />
      </div>
    </div>
  </fieldset>
</form>

Demo Form

Back

Form Elements

There are standard definitions for all common form elements. The sections below will show examples of each.

Text Inputs

All text inputs get the class input-text. Additionally, each input should have a label that helps the user understand which input is asked from them. labels should contain a word or two only. If you need to give additional explanation, use input-label-helper-text. input-label-helper-text needs to be put after the input for correct alignment. Wrap text inputs in a surrounding input-text-container.

Text inputs
<div class="input-text-container">
  <label class="input-label" for="text-input-1">First name</label>
  <input type="text" id="text-input-1" class="input-text" placeholder="John" value="" />
  <p class="input-label-helper-text">Helper text</p>
</div>

Helper text

You can attach icons to your text inputs to give the user an additional hint about what is asked of her. To apply an icon, insert a FontAwesome icon inside the container, using input-icon-left or input-icon-right accordingly. Make sure you put the icons before input-text, otherwise the input field will not have the correct padding.

Text input with icon
<label class="input-label" for="text-input-2">First name</label>
<div class="input-text-container">
  <span class="input-icon-left fa fa-user"></span>
  <span class="input-icon-right fa fa-eur"></span>
  <input type="text" id="text-input-2" class="input-text" placeholder="John" value="" />
</div>

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>

Input Controls

Input controls are radio buttons, checkboxes, and toggle switches. For each of these, two styles are available: the default style and the long list style. For each input control, labels are needed to show what the input control refers to.

Inside, apply a class to the input, such as input-checkbox, and for the label a class like label-checkbox.

Default Style

For each input control, use a container element with a corresponding class, i.e. for checkboxes checkbox-container.

  • use the default style if you have little space or few options
  • don't use it if there are many selection controls on a page

Make use of the list tag ul, the -list class, i.e. radio-list for radio buttons, and an li item underneath.

List Style

  • use the list style if you have many choices on a page
  • the list style gives more overview to users compared to the default style
  • it clearly differentiates selections from each other through padding and outline

Why is my input control not clickable?

Linking the label and the input control via id and for makes the label area clickable. In our case, this means the whole row can be clicked. In standard HTML without the linking, only the input control itself is clickable. In CoreCSS, an unlinked input control is not clickable at all.

Radio Buttons

Radio buttons, default style
  <div class="radio-container">
    <input type="radio" class="input-radio" id="apple-1" name="fruit-1" checked />
    <label for="apple-1" class="label-radio">Apple</label>
  </div>
  <div class="radio-container">
    <input type="radio" class="input-radio" id="banana-1" name="fruit-1" />
    <label for="banana-1" class="label-radio">Banana</label>
  </div>
Radio buttons, 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

Checkboxes, default style
<div class="checkbox-container">
  <input type="checkbox" class="input-checkbox" id="pears-1" checked />
  <label for="pears-1" class="label-checkbox">Pears</label>
</div>
<div class="checkbox-container">
  <input type="checkbox" class="input-checkbox" id="cheese-1" />
  <label for="cheese-1" class="label-checkbox">Cheese</label>
</div>
<div class="checkbox-container">
  <input type="checkbox" class="input-checkbox" id="car-battery-1" />
  <label for="car-battery-1" class="label-checkbox">Car battery</label>
</div>
Checkboxes, list style
<ul class="checkbox-list">
  <li class="checkbox-container">
    <input type="checkbox" class="input-checkbox" id="pears-2" checked />
    <label for="pears-2" class="label-checkbox"><span>Pears</span></label>
  </li>
  <li class="checkbox-container">
    <input type="checkbox" class="input-checkbox" id="cheese-2" />
    <label for="cheese-2" class="label-checkbox">Cheese</label>
  </li>
  <li class="checkbox-container">
    <input type="checkbox" class="input-checkbox" id="car-battery-2" />
    <label for="car-battery-2" class="label-checkbox">Car battery</label>
  </li>
</ul>

Toggle Switches

Toggle switches
<div class="toggle-switch-container">
  <input type="checkbox" class="input-toggle-switch" id="newly-renovated-1" checked />
  <label for="newly-renovated-1" class="label-toggle-switch">Newly renovated</label>
</div>
<div class="toggle-switch-container">
  <input type="checkbox" class="input-toggle-switch" id="balcony-1" />
  <label for="balcony-1" class="label-toggle-switch">Balcony</label>
</div>
<div class="toggle-switch-container">
  <input type="checkbox" class="input-toggle-switch" id="garage-1" />
  <label for="garage-1" class="label-toggle-switch">Garage</label>
</div>
Toggle switches, list style
<ul class="toggle-switch-list">
  <li class="toggle-switch-container">
    <input type="checkbox" class="input-toggle-switch" id="newly-renovated-2" checked />
    <label for="newly-renovated-2" class="label-toggle-switch">Newly renovated</label>
  </li>
  <li class="toggle-switch-container">
    <input type="checkbox" class="input-toggle-switch" id="balcony-2" />
    <label for="balcony-2" class="label-toggle-switch">Balcony</label>
  </li>
  <li class="toggle-switch-container">
    <input type="checkbox" class="input-toggle-switch" id="garage-2" />
    <label for="garage-2" class="label-toggle-switch">Garage</label>
  </li>
</ul>

Submit Buttons

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

Move buttons around with the float-* classes.

Form with submit button
<form action="#" class="form form-theme-standard">
  <div class="grid grid-flex gutter-form">
    <div class="grid-item one-whole">
      <label for="credit-card-number-1" class="input-label">Credit Card Number</label>
      <input id="credit-card-number-1" type="text" class="input-text" />
    </div>
  </div>
  <div class="grid grid-flex gutter-form grid-justify-end">
    <div class="grid-item">
      <input type="submit" class="button-primary" value="Submit" />
    </div>
  </div>
</form>

Cancel Link

If you wish to offer a way to cancel the form or go back to a previous step, insert a regular link with the cancel class alongside your submit button.

Form with cancel link
<form action="#" class="form form-theme-standard">
  <div class="grid grid-flex gutter-form">
    <div class="grid-item one-whole">
      <label for="credit-card-number-2" class="input-label">Credit Card Number</label>
      <input id="credit-card-number-2" type="text" class="input-text" />
    </div>
  </div>
  <div class="grid grid-flex gutter-form grid-justify-end">
    <div class="grid-item">
      <a href="#" class="cancel button button-margin-right" title="Go back to the previous step">Back</a>
      <input type="submit" class="button-primary" value="Submit" />
    </div>
  </div>
</form>

Errors

You can highlight faulty input by adding the error class to an input field.

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>

<div class="radio-container">
	<input type="radio" id="error-radio" class="input-radio error" />
	<label for="error-radio" class="label-radio error">Label</label>
</div>

<div class="checkbox-container">
	<input type="checkbox" id="error-checkbox" class="input-checkbox error" />
	<label for="error-checkbox" class="label-checkbox error">I hereby give up control of my private data in service of a bigger purpose</label>
</div>

Required and Optional Labels

Mark your optional inputs as optional by adding label-optional to a label. Required inputs will not get a visual designation, stemming from the observation that required inputs are the norm, while optional inputs appear less often.

Required Label
<label for="a-required-input" class="input-label label-optional">Label</label>
<input type="text" id="a-required-input" class="input-text" />
Optional Label
	<label for="an-optional-input" class="input-label label-optional">Label</label>
	<input type="text" id="an-optional-input" class="input-text" />

Disabled Inputs

Please do not use disabled inputs. Make sure all your input fields are usable.

Optimizations for Mobile Users

If possible, make life easier for mobile users by making sure the most appropriate keyboard is shown when they click on an input field and that autocorrect and auto capitalizing is turned off in cases where it is not useful. For example, use type="tel" for phone numbers and type="email" for email addresses. Be careful with type="number", though, since it does not allow alphabetic characters and is therefore not suitable for cases like house numbers. For these cases, it is best to stick with type="text". For more information, follow Apple's "Text Programming Guide for iOS" or this article from treehouse.

Status Messages

If you want a form to give feedback to the user, you may use one of the four status messages.

Please see the Status Messages section for a full description.

Form with error message
<div class="status-message status-error margin-bottom-s">
    <h4>Error</h4>
    <p>
        The email address you provided appears incorrect.
    </p>
</div>

Error

The email address you provided appears incorrect.

Erroneous Form Data

HTML5 Validation

The HTML5 Constraint Validation API brings some powerful (if not yet consistently supported) tools to validate a user's form input on the client side.

We recommend using the Webshims polyfill as a fallback for legacy browsers who do not natively support the HTML5 Validation API.

Form with HTML5 Contraint Validation

A Form

Not the one that your friends always use to refer to you, but rather the name that is mentioned on your birth certificate