Labels

Documentation of labels, help texts 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:
<!-- input -->
<div class="form-control form-control--input">
  <div class="form-label">
    <label for="...">Form label:</label>
  </div>
  <input type="text" class="input" id="...">
</div>

<!-- textarea -->
<div class="form-control form-control--textarea">
  <div class="form-label">
    <label for="...">Form label:</label>
  </div>
  <textarea type="text" class="input" id="..." rows="3">
</div>

<!-- checkbox -->
<div class="form-control form-control--checkbox">
  <div class="form-label">
    <label for="...">Form label:</label>
  </div>
  <div class="checkbox">...</div>
</div>

<!-- radiogroup -->
<div class="form-control form-control--group">
  <div class="radiocheck-group">
    <div class="form-label">
      <label>Form label:</label>
    </div>
    <div class="form-control form-control--radio">
      <div class="radio">...</div>
    </div>
    ...
  </div>
</div>

<!-- select -->
<div class="form-control form-control--select">
  <div class="form-label">
    <label>Form label:</label>
  </div>
  <select class="js-select">...</select>
</div>

Form label states

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

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

<!-- error -->
...
  <div class="form-label error">
    <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:
<!-- large -->
...
  <div class="form-label form-label--large">
    <label for="...">Form label large:</label>
  </div>
...

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

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

Form text

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

Example:

Lorem ipsum Elit anim tempor aliquip tempor mollit.

Lorem ipsum Elit anim tempor aliquip tempor mollit.

Lorem ipsum Sit eu velit.

Lorem ipsum Anim nisi et in dolor.

Lorem ipsum Sed est culpa nulla sit laboris sed aliqua aute nostrud dolore consectetur dolor sed dolore dolore et dolor tempor laboris.

Code:
<!-- input -->
<div class="form-control form-control--input">
  <input type="text" class="input" id="...">
  <p class="form-text">...</p>
</div>

<!-- textarea -->
<div class="form-control form-control--textarea">
  <textarea type="text" class="input" id="..." rows="3">
  <p class="form-text">...</p>
</div>

<!-- checkbox -->
<div class="form-control form-control--checkbox">
  <div class="checkbox">...</div>
  <p class="form-text">...</p>
</div>

<!-- radiogroup -->
<div class="form-control form-control--group">
  <div class="radiocheck-group">
    <div class="form-control form-control--radio">
      <div class="radio">...</div>
    </div>
    ...
    <p class="form-text">...</p>
  </div>
</div>

<!-- select -->
<div class="form-control form-control--select">
  <select class="js-select">...</select>
  <p class="form-text">...</p>
</div>
...

Form error

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

Example:

Lorem ipsum Elit anim tempor aliquip tempor mollit.

Lorem ipsum Elit anim tempor aliquip tempor mollit.

Lorem ipsum Sit eu velit.

Lorem ipsum Anim nisi et in dolor.

Lorem ipsum Sed est culpa nulla sit laboris sed aliqua aute nostrud dolore consectetur dolor sed dolore dolore et dolor tempor laboris.

Code:
<!-- input -->
<div class="form-control form-control--input">
  <div class="form-label error">
    <label for="...">Form label:</label>
  </div>
  <input type="text" class="input" id="...">
  <p class="form-text.is-error">...</p>
</div>

<!-- textarea -->
<div class="form-control form-control--textarea">
  <div class="form-label error">
    <label for="...">Form label:</label>
  </div>
  <textarea type="text" class="input" id="..." rows="3">
  <p class="form-text.is-error">...</p>
</div>

<!-- checkbox -->
<div class="form-control form-control--checkbox">
  <div class="form-label error">
    <label for="...">Form label:</label>
  </div>
  <div class="checkbox">...</div>
  <p class="form-text.is-error">...</p>
</div>

<!-- radiogroup -->
<div class="form-control form-control--group">
  <div class="radiocheck-group">
    <div class="form-label error">
      <label for="...">Form label:</label>
    </div>
    <div class="form-control form-control--radio">
      <div class="radio">...</div>
    </div>
    ...
    <p class="form-text.is-error">...</p>
  </div>
</div>

<!-- select -->
<div class="form-control form-control--select">
  <div class="form-label error">
    <label for="...">Form label:</label>
  </div>
  <select class="js-select">...</select>
  <p class="form-text.is-error">...</p>
</div>
...