Forms

Standard Form Theme

This is the standard form theme.

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.

Select Fields

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

<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.

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.

<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>

Submit Buttons

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

Dropdown Links

You can use select lists as dropdown links when there is no further action required to confirm the selection. A good example of such a use case would be sorting, where a sorting option needs to be selected to get an ordered list.

Dropdown links have a select which is wrapped in a surrounding div.dropdown-link.

Additionally, you can add an icon to the dropdown by adding a span with class dropdown-link-icon along with font-icon classes (like fa-* and icon-*).

If you have very little space to work with, you can hide the text labels and show only the icon using the dropdown-link-icon-only class. You can also apply this behavior only to small devices with palm-dropdown-link-icon-only.

Errors

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

<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.

Disabled Inputs

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