Light - Styleguide

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 .active, [disabled], .disabled, [readonly], .readonly and .error.

Example:

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

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:

Checkbox

Radio

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:

Focus

Disabled

Readonly

Error

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:

Focus

Disabled

Readonly

Error

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 sizes

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

Example:

Checkbox

Large

Medium

Small

Radio

Large

Medium

Small

Code:

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

<div class="radio radio-large">
  <input id="..." name="..." class="radio-input" type="radio">
  ...
</div>
<div class="radio">
  <input id="..." name="..." class="radio-input" type="radio">
  ...
</div>
<div class="radio radio-small">
  <input id="..." name="..." class="radio-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

Checkbox 1

Checkbox 2

Checkbox 3

Radio group

Radio 1

Radio 2

Radio 3

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>

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:

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

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