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], .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="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.

Note

Checkbox can be simple (check icon) or crossed with addition of .checkbox-cross class.

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="checkbox checkbox-cross">
  ...
</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: 
<!-- active -->
<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>

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

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

<!-- error -->
<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: 
<!-- active -->
<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>

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

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

<!-- error -->
<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 a checkbox with different styling, to resemble a switch button.

Example:code
Code: 
<label class="switch">
  <input id="switch-1" name="switch-1" type="checkbox" checked="" class="switch_input">
  <span class="switch_control"></span>
</label>

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 custom select plugin: app/scripts/plugins/customselect/dist/js/bootstrap-select.js.

To ensure correct animation for select dropdown use SelectDropdownFade javascript in app/scripts/main.js

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, .readonly and .error on hidden native select element.

Warning

Readonly state must be set through class .readonly.

Example:code
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>