Form Note

A form note adds a note under an input, a select, a checkbox, a switch or a radio.

A space below the input/select field is always reserved for the note.

The following code examples shows how to use input:

<!-- input + note -->
<div class="form-note">
  <input class="input" type="text" id="example-1">
  <label class="form-note__info" for="example-1">I am an info note.</label>
</div>

<!-- select + note -->
<div class="form-note">
  <select class="select" id="example-2">
    <option class="select__option" value="1">Item 1</option>
    <option class="select__option" value="2">Item 2</option>
  </select>
  <label class="form-note__info" for="example-2">I am an info note.</label>
</div>

<!-- checkbox + note -->
<div class="form-note form-note--info">
  <div class="checkbox" tabindex="1">
    <input class="checkbox__input" type="checkbox" id="example-3">
    <label class="checkbox__label" for="example-3">Hello World</label>
  </div>
  <label class="form-note__info" for="example-3">I am an info note.</label>
</div>

<!-- switch + note -->
<div class="form-note form-note--info">
  <label class="switch" for="example-4" tabindex="1">
    <input class="switch__checkbox" type="checkbox" id="example-4" />
    <span class="switch__label">Hello World</span>
  </label>
  <label class="form-note__info" for="example-4">I am an info note.</label>
</div>

<!-- radio + note -->
<div class="form-note form-note--info">
  <div class="radio" tabindex="1">
    <input class="radio__input" type="radio" id="example-5" name="demo">
    <label class="radio__label" for="example-5">Hello World</label>
  </div>
  <label class="form-note__info" for="example-4">I am an info note.</label>
</div>

The following list describe all existing block/element/modifier classes of the component.

• .form-note - required the block class, that contains the input/select and the note label
• .form-note__info - is an info note below the form element
• .form-note__success - is an success note below the form element, could be active by [pattern] attribute
• .form-note__danger - is an danger note below the form element, could be active by [require] attribute
• Modifier
  • .form-note--info - shows the info note
  • .form-note--success - shows the success note
  • .form-note--danger - shows the danger note
  • .form-note--stretch use width 100%
  • .form-note--stretch-{SCREEN_SIZE} width 100% until the screen size
  • .form-note--scale-{SCALE} scale the size of the input
  • .form-note--scale-{SCALE}-{SCREEN_SIZE} scale until the screen size

The variables are:

• SCREEN_SIZE lg, md, sm, xs
• SCALE x0.750, x0.875, x1.000, x1.125, x1.250, x1.375, x1.500

Basic Example:

Multiple notes

You can add multiple notes below the form element, but only show one.

Modifier

A form note can be customized using class modifiers. The following sub-chapters list all existing classes of form note modifier.

Scale

An form note with this modifier scale the complete component with text/height/width and every thing else that is based on em units.

The values are to be interpreted as percentages, i.e. a .form note--scaling-x0.875 form note is smaller as the normal form note, while a .form note--scaling-x1.500 is larger.

DEPRECATED the old {SCALE} values were 0750, 0875, 1000, 1125, 1250, 1375, 1500

Stretch

The following examples show the stretched select.