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
Code:
<input placeholder="Input" class="input" type="text">

Text input states

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

Example:code
Code:
<input placeholder="Focus" class="input 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">

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
Code:
<textarea rows="3" 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
Code:
<div class="checkbox">
  <input id="..." name="..." class="checkbox-input" type="checkbox">
  <label for="..." class="checkbox-custom"></label>
  <label for="..." class="checkbox-label">Checkbox</label>
</div>

<div class="radio">
  <input id="..." name="..." class="radio-input" type="radio">
  <label for="..." class="radio-custom"></label>
  <label for="..." class="radio-label">Radio</label>
</div>

Checkbox states

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

Example:code
Code:
<div class="checkbox">
  <input id="..." name="..." checked="" class="checkbox-input active" type="checkbox">
  <label for="..." class="checkbox-custom"></label>
  <label for="..." class="checkbox-label">Focus</label>
</div>

<div class="checkbox">
  <input id="..." name="..." disabled="" checked="" class="checkbox-input" type="checkbox">
  <label for="..." class="checkbox-custom"></label>
  <label for="..." class="checkbox-label">Disabled</label>
</div>

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

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

Radio states

States can be set same way as for checkboxes.

Example:code
Code:
<div class="radio">
  <input id="..." name="..." checked="" class="radio-input active" type="radio">
  <label for="..." class="radio-custom"></label>
  <label for="..." class="radio-label">Focus</label>
</div>

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

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

<div class="radio">
  <input id="..." name="..." checked="" class="radio-input error" 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:code

Checkbox group

Radio group

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

<div class="radio-group">
  <div class="radio">
    <input id="..." name="..." class="radio-input" type="radio">
    <label for="..." class="radio-custom"></label>
    <label for="..." class="radio-label">Radio 1</label>
  </div>
  <div class="radio">
    ...
  </div>
  <div class="radio">
    ...
  </div>
</div>

Switch

Switch is basically checkbox with different visual. Result can be achieved by adding .checkbox-switch class on checkbox element and .checkbox-switch_custom instead of checkbox-custom on label.

Example:code
Code:
<div class="checkbox checkbox-switch">
  <input class="checkbox-input" id="..." type="checkbox">
  <label class="checkbox-switch_custom" for="..."></label>
  <label class="checkbox-label" for="...">Switch</label>
</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 requires Select2 plugin.

Note

Documentation of custom Select2 initialization.

Example:code
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], .disabled and .error on hidden native select element.

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

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

Select placeholder

Placeholder can be added via [data-placeholder] attribute with placeholder text and additional empty option element on top of the select options.

Example:code
Code:
<select class="js-select" data-placeholder="Placeholder" >
  <option value="placeholder"></option>
  <option>Option 1</option>
  ...
</select>

Select with live search

Live search can be turned on with class .js-select-search.

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

Select with groups

Live search can be turned on with class.js-select-search.

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

Select with tags

Multiselect can be used to set up fields used for tagging with additional data attribute [data-tags] as shown on example below.

Example:code
Code:
<select class="js-select" multiple="" data-tags>
  <option selected="">Tag 1</option>
  <option selected="">Tag 2</option>
  <option>Tag 3</option>
  <option>Tag 4</option>
  <option>Tag 5</option>
</select>

<select class="select-l js-select" multiple="" data-tags>
  <option selected="">Tag 1</option>
  <option selected="">Tag 2</option>
  <option>Tag 3</option>
  <option>Tag 4</option>
  <option>Tag 5</option>
</select>