Labels

Documentation of labels, help and error texts in forms.

Files

app/styles/modules/_forms.scss

Labels

Form labels can be created by wrapping <label> into element with class .form-label. Form label can be also placed beside inputs or stack as shown in form layouts.

Example:code
Code: 
<!-- input -->
<div class="row form-row">
  <div class="form-label col">
    <label for="...">Form label:</label>
  </div>
  <div class="form-controls col">
    <div class="form-control">
      <input placeholder="Input" id="..." class="input" type="text">
    </div>
  </div>
</div>

<!-- textarea -->
<div class="row form-row">
  <div class="form-label col">
    <label for="...">Form label:</label>
  </div>
  <div class="form-controls col">
    <div class="form-control">
      <textarea placeholder="..." id="..." class="input"></textarea>
    </div>
  </div>
</div>

<!-- checkbox -->
<div class="row form-row">
  <div class="form-label col">
    <label>Form label:</label>
  </div>
  <div class="form-controls col">
    <div class="checkbox">
      ...
    </div>
  </div>
</div>

<!-- radiogroup -->
<div class="row form-row">
  <div class="form-label col">
    <label>Form label:</label>
  </div>
  <div class="form-controls col">
    <div class="radio-group">
      <div class="radio">
        ...
      </div>
      <div class="radio">
        ...
      </div>
    </div>
  </div>
</div>

<!-- select -->
<div class="row form-row">
  <div class="form-label col">
    <label>Form label:</label>
  </div>
  <div class="form-controls col">
    <div class="form-control">
      <select style="display: none;" class="js-select">
        ...
      </select>
    </div>
  </div>
</div>

Form label states

Form labels can have two state: default and error state. Error state can be set by using class .error on .form-label element.

Example:code
Code: 
<!-- default -->
...
  <div class="form-label col">
    <label for="...">Form label:</label>
  </div>
...

<!-- error -->
...
  <div class="form-label error col">
    <label for="...">Form label:</label>
  </div>
...

Form label sizes

There are three default sizes of form labels: medium (default), small and large. These can be set by using classes .form-label-[large/small].

Example:code
Code: 
<!-- large -->
...
  <div class="form-label form-label-large col">
    <label for="...">Form label large:</label>
  </div>
...

<!-- medium -->
...
  <div class="form-label col">
    <label for="...">Form label medium:</label>
  </div>
...

<!-- small -->
...
  <div class="form-label form-label-small col">
    <label for="...">Form label small:</label>
  </div>
...

Form help

In case you need to show additional help text for form components you can use form help component. Help text will be then shown under form component. To create form help component you can use <label> tag with class .form-help as shown in example below.

Example:code
Code: 
<!-- input with help -->
...
  <div class="form-controls col">
    <div class="form-control">
      <input placeholder="..." id="..." class="input" type="text">
      <label class="form-help">Lorem ipsum Elit anim tempor aliquip tempor mollit.</label>
    </div>
  </div>
...

<!-- textarea with help -->
...
  <div class="form-controls col">
    <div class="form-control">
      <textarea placeholder="..." id="..." class="input"></textarea>
      <label class="form-help">Lorem ipsum Sit eu velit.</label>
    </div>
  </div>
...

<!-- checkbox with help -->
...
  <div class="form-controls col">
    <div class="checkbox">
      <input id="..." name="..." class="checkbox-input" type="checkbox">
      <label for="..." class="checkbox-custom"></label>
      <label for="..." class="checkbox-label">Checkbox</label>
      <label class="form-help">...</label>
    </div>
  </div>
...

<!-- radio with help -->
...
  <div class="form-controls col">
    <div class="radio-group">
      <div class="radio">
        <input id="..." name="radio-group-withhelp" class="radio-input" type="radio">
        <label for="..." class="radio-custom"></label>
        <label for="..." class="radio-label">Radio 1</label>
      </div>
      <div class="radio">
        ...
      </div>
      <label class="form-help">Lorem ipsum Anim nisi et in dolor.</label>
    </div>
  </div>
...

<!-- select with help -->
...
  <div class="form-controls col">
    <div class="form-control">
      <select style="display: none;" id="..." class="js-select">
        ...
      </select>
      <label class="form-help">...</label>
    </div>
  </div>
...

Form error

In case you need to show additional error text for form components you can use form error component. Error text will be then shown under form component. To create form error component you can use <label> tag with class .form-error as shown in example below.

Example:code
Code: 
<!-- input with error -->
...
  <div class="form-controls col">
    <div class="form-control">
      <input placeholder="..." id="..." class="input error" type="text">
      <label class="form-error">Lorem ipsum Elit anim tempor aliquip tempor mollit.</label>
    </div>
  </div>
...

<!-- textarea with error -->
...
  <div class="form-controls col">
    <div class="form-control">
      <textarea placeholder="..." id="..." class="input error"></textarea>
      <label class="form-error">Lorem ipsum Sit eu velit.</label>
    </div>
  </div>
...

<!-- checkbox with error -->
...
  <div class="form-controls col">
    <div class="checkbox">
      <input id="..." name="..." class="checkbox-input error" type="checkbox">
      <label for="..." class="checkbox-custom"></label>
      <label for="..." class="checkbox-label">Checkbox</label>
      <label class="form-error">...</label>
    </div>
  </div>
...

<!-- radio with error -->
...
  <div class="form-controls col">
    <div class="radio-group">
      <div class="radio">
        <input id="..." name="radio-group-withhelp" class="radio-input error" type="radio">
        <label for="..." class="radio-custom"></label>
        <label for="..." class="radio-label">Radio 1</label>
      </div>
      <div class="radio">
        ...
      </div>
      <label class="form-error">Lorem ipsum Anim nisi et in dolor.</label>
    </div>
  </div>
...

<!-- select with error -->
...
  <div class="form-controls col">
    <div class="form-control">
      <select style="display: none;" id="..." class="error js-select">
        ...
      </select>
      <label class="form-error">...</label>
    </div>
  </div>
...