Basic

Documentation of basic form components such as inputs, textarea, checkboxes, radios and selects.

Files

app/styles/modules/_forms.scss

Text input

Text inputs are basic form components and can be created by using class .input on <input> element.

Example:
Code:
<input placeholder="Input" class="input" type="text">

Text input states

States can be set by attributes and classes like .is-active, [disabled], .is-disabled, [readonly], .readonly and .is-error.

Example:
Code:
<input placeholder="Focus" class="input is-active" type="text">
<input placeholder="Disabled" disabled="" class="input" type="text">
<input placeholder="Readonly" readonly="" class="input" type="text">
<input placeholder="Error" class="input error" type="text">

Text input sizes

There are three main sizes of text inputs: medium (default), large .input--large and small .input--small.

Example:
Code:
<input placeholder="Large" class="input input--large" type="text">
<input placeholder="Medium" class="input" type="text">
<input placeholder="Small" class="input input--small" type="text">

Textarea

Textarea can be styled by using class .input on <textarea> tag. Height can be specified with [rows] attribute. States for textarea are same as for input.

Example:
Code:
<textarea rows="4" class="input"></textarea>

Checkbox / Radio

Checkbox or radio element can be created by wrapping native <inuput> element and <label> with specific class as shown in examples below.

Warning

To proper function of checkbox or radio, do not forget to spicify ID for native <input> element and [for] attribute for custom element.

Example:
Code:
<div class="checkbox">
  <input id="..." name="..." class="radiocheck__input" type="checkbox">
  <label for="..." class="radiocheck__control"></label>
  <label for="..." class="radiocheck__label">Checkbox</label>
</div>

<div class="radio">
  <input id="..." name="..." class="radiocheck__input" type="radio">
  <label for="..." class="radiocheck__control"></label>
  <label for="..." class="radiocheck__label">Radio</label>
</div>

Checkbox states

States can be set by using attributes and classes like .is-active, [disabled], .is-disabled, [readonly], .readonly and .is-error on hidden native input element.

Example:
Code:
<div class="checkbox">
  <input id="..." name="..." checked="" class="radiocheck__input is-active" type="checkbox">
  <label for="..." class="radiocheck__control"></label>
  <label for="..." class="radiocheck__label">Focus</label>
</div>

<div class="checkbox">
  <input id="..." name="..." disabled="" checked="" class="radiocheck__input" type="checkbox">
  <label for="..." class="radiocheck__control"></label>
  <label for="..." class="radiocheck__label">Disabled</label>
</div>

<div class="checkbox">
  <input id="..." name="..." readonly="" checked="" class="radiocheck__input" type="checkbox">
  ...
</div>

<div class="checkbox">
  <input id="..." name="..." checked="" class="radiocheck__input error" type="checkbox">
  ...
</div>

Radio states

States can be set same way as for checkboxes.

Example:
Code:
<div class="radio">
  <input id="..." name="..." checked="" class="radiocheck__input is-active" type="radio">
  <label for="..." class="radiocheck__control"></label>
  <label for="..." class="radiocheck__label">Focus</label>
</div>

<div class="radio">
  <input id="..." name="..." disabled="" checked="" class="radiocheck__input" type="radio">
  ...
</div>

<div class="radio">
  <input id="..." name="..." readonly="" checked="" class="radiocheck__input" type="radio">
  ...
</div>

<div class="radio">
  <input id="..." name="..." checked="" class="radiocheck__input error" type="radio">
  ...
</div>

Checkbox / Radio sizes

Size of checkbox or radio can be set by using classes like .radiocheck-[size] on wrapper element.

Example:

Checkbox

Radio

Code:
<div class="checkbox checkbox--large">
  <input id="..." name="..." class="radiocheck__input" type="checkbox">
  ...
</div>
<div class="checkbox">
  <input id="..." name="..." class="radiocheck__input" type="checkbox">
  ...
</div>
<div class="checkbox checkbox--small">
  <input id="..." name="..." class="radiocheck__input" type="checkbox">
  ...
</div>

<div class="radio radio-large">
  <input id="..." name="..." class="radiocheck__input" type="radio">
  ...
</div>
<div class="radio">
  <input id="..." name="..." class="radiocheck__input" type="radio">
  ...
</div>
<div class="radio radio-small">
  <input id="..." name="..." class="radiocheck__input" type="radio">
  ...
</div>

Checkbox / Radio groups

Checkbox (radio) group can be created by wrapping more checkbox (radio) elements into element with class .checkbox-group or .radio-group.

Warning

States for checkboxes and radios are set individualy on each element.

Example:

Checkbox group

Radio group

Code:
<div class="radiocheck-group">
  <div class="checkbox">
    <input id="..." name="..." class="radiocheck__input" type="checkbox">
    <label for="..." class="radiocheck__control"></label>
    <label for="..." class="radiocheck__label">Checkbox 1</label>
  </div>
  <div class="checkbox">
    ...
  </div>
  <div class="checkbox">
    ...
  </div>
</div>

<div class="radiocheck-group">
  <div class="radio">
    <input id="..." name="..." class="radiocheck__input" type="radio">
    <label for="..." class="radiocheck__control"></label>
    <label for="..." class="radiocheck__label">Radio 1</label>
  </div>
  <div class="radio">
    ...
  </div>
  <div class="radio">
    ...
  </div>
</div>

Select

Select can be created by using native <select> element with class .js-select. Then javascript will dynamicaly inject HTML DOM for custom select.

Javascript dependency

Select component is wrapper plugin around Choices.js with customized initalization. All methods and events are supported.

Example:
Code:
<select class="js-select">
  <option>Option 1</option>
  <option>Option 2</option>
  ...
</select>

Select states

States can be set by using attributes and classes like [disabled], .is-disabled and .is-error on hidden native select element.

Example:
Code:
<!-- disabled -->
<select disabled="" class="js-select">
  <option>Option 1</option>
  ...
</select>

<!-- readonly -->
<select class="js-select readonly">
  <option>Option 1</option>
  ...
</select>

<!-- error -->
<select class="js-select error">
  <option>Option 1</option>
  ...
</select>

Select sizes

There are three default sizes of select: medium, small and large. These can be set by using classes .select--[size] on hidden native select element.

Example:
Code:
<!-- large -->
<select class="js-select select--large">
  <option>Option 1</option>
  ...
</select>

<!-- medium -->
<select class="js-select">
  <option>Option 1</option>
  ...
</select>

<!-- small -->
<select class="js-select select--small">
  <option>Option 1</option>
  ...
</select>

Select placeholder

If you want placeholder as default selected option, add option with attributes [selected disabled placeholder] as shown on example below.

Example:
Code:
<select class="js-select">
  <option selected disabled placeholder>This is a placeholder</option>
  <option>Option 1</option>
  ...
</select>

Select clearable

By default, select can't be clear to placeholder or empty value. This behavior can be enabled with additional attribute [data-clearable].

Example:
Code:
<select class="js-select" data-clearable>
  <option selected disabled placeholder>This is a placeholder</option>
  <option>Option 1</option>
</select>

Multiselect

Select can be created by using native <select multiple> element with class .js-select. Then javascript will dynamicaly inject HTML DOM for custom select.

Javascript dependency

Select component requires plugin: Choices.js

Example:
Code:
<select class="js-select" multiple>
  <option>Option 1</option>
  <option>Option 2</option>
  ...
</select>

Multiselect sizes

There are three default sizes of select: medium, small and large. These can be set by using classes .select--[size] on hidden native select element.

Example:
Code:
<!-- large -->
<select class="js-select select--large" multiple>
  <option>Option 1</option>
  ...
</select>

<!-- medium -->
<select class="js-select" multiple>
  <option>Option 1</option>
  ...
</select>

<!-- small -->
<select class="js-select select--small" multiple>
  <option>Option 1</option>
  ...
</select>