Basic

Documentation of basic form components such as inputs, textarea, checkboxes, radios and selects.

Files

app/styles/forms/*/config.scss
app/styles/forms/*/style.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">

<div class="form-control form-control--input-icon">
  <input class="input is-error" type="text" placeholder="Error" value="Error">
  <svg class="icon icon-close text-color-error">...</svg>
</div>

<div class="form-control form-control--input-icon">
  <input class="input" type="text">
  <svg class="icon icon-check text-color-success">...</svg>
</div>

Text input states

States can be set by attributes and classes like .is-active, [disabled], .is-disabled, [readonly], .readonly and .is-error.

Example:
Code:
<input placeholder="Focus" class="input is-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>

WYSIWYG

Example:
Kurzmeldung
Language:
Word count: 45
Code:
<div class="bar mb-tiny">
  <div class="bar__item">
    <div class="h3">Kurzmeldung</div>
  </div>
  <div class="bar__item">
    <button type="button" class="btn btn--link-grey btn--small btn--equal">
      //icon
    </button>
    ...
  </div>
  <div class="bar__item bar__item--fill text-right mr-none">Language:</div>
  <div class="bar__item">
    <select class="js-select">
      <option>GER</option>
      <option>ENG</option>
    </select>
  </div>
</div>
<div class="form-control form-control--textarea mb-tiny">
  <textarea class="input" rows="6"></textarea>
</div>
<div class="text-small"><span class="text-color-grey">Word count:</span> <b>45</b></div>

Checkbox / Radio / Switch

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 forgetd to spicify ID for native <input> element and [for] attribute for custom element.

Example:
Code:
<div class="checkbox">
  <input id="..." name="..." class="radiocheck__input" type="checkbox">
  <label for="..." class="radiocheck__control"></label>
  <label for="..." class="radiocheck__label">Checkbox</label>
</div>

<div class="radio">
  <input id="..." name="..." class="radiocheck__input" type="radio">
  <label for="..." class="radiocheck__control"></label>
  <label for="..." class="radiocheck__label">Radio</label>
</div>

Checkbox states

States can be set by using attributes and classes like .is-active, [disabled], .is-disabled, [readonly], .readonly and .is-error on hidden native input element.

Example:
Code:
<div class="checkbox">
  <input id="..." name="..." checked="" class="radiocheck__input is-active" type="checkbox">
  <label for="..." class="radiocheck__control"></label>
  <label for="..." class="radiocheck__label">Focus</label>
</div>

<div class="checkbox">
  <input id="..." name="..." disabled="" checked="" class="radiocheck__input" type="checkbox">
  <label for="..." class="radiocheck__control"></label>
  <label for="..." class="radiocheck__label">Disabled</label>
</div>

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

<div class="checkbox">
  <input id="..." name="..." checked="" class="radiocheck__input error" type="checkbox">
  ...
</div>

Radio states

States can be set same way as for checkboxes.

Example:
Code:
<div class="radio">
  <input id="..." name="..." checked="" class="radiocheck__input is-active" type="radio">
  <label for="..." class="radiocheck__control"></label>
  <label for="..." class="radiocheck__label">Focus</label>
</div>

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

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

<div class="radio">
  <input id="..." name="..." checked="" class="radiocheck__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:

Checkbox group

Radio group

Code:
<div class="radiocheck-group">
  <div class="checkbox">
    <input id="..." name="..." class="radiocheck__input" type="checkbox">
    <label for="..." class="radiocheck__control"></label>
    <label for="..." class="radiocheck__label">Checkbox 1</label>
  </div>
  <div class="checkbox">
    ...
  </div>
  <div class="checkbox">
    ...
  </div>
</div>

<div class="radiocheck-group">
  <div class="radio">
    <input id="..." name="..." class="radiocheck__input" type="radio">
    <label for="..." class="radiocheck__control"></label>
    <label for="..." class="radiocheck__label">Radio 1</label>
  </div>
  <div class="radio">
    ...
  </div>
  <div class="radio">
    ...
  </div>
</div>

Switch input

A switch input can be either a checkbox or a radio.

Example:

States

Group

Radio group

Code:
<div class="form-control form-control--switch">
  <div class="switch">
    <input class="switch__input" id="switch" name="switch" type="checkbox">
    <label class="switch__control" for="switch"></label>
    <label class="switch__label" for="switch">Focus</label>
  </div>
</div>

...

<div class="form-control form-control--switch">
  <div class="switch">
    <input class="switch__input" id="switch" name="switch" type="radio">
    <label class="switch__control" for="switch"></label>
    <label class="switch__label" for="switch">Focus</label>
  </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 is wrapper plugin around Choices.js with customized initalization. All methods and events are supported.

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

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>

Select placeholder

If you want placeholder as default selected option, add option with attributes [selected disabled placeholder] as shown on example below.

Example:
Code:
<select class="js-select">
  <option selected disabled placeholder>This is a placeholder</option>
  <option>Option 1</option>
  ...
</select>

Select clearable

By default, select can't be clear to placeholder or empty value. This behavior can be enabled with additional attribute [data-clearable].

Example:
Code:
<select class="js-select" data-clearable>
  <option selected disabled placeholder>This is a placeholder</option>
  <option>Option 1</option>
</select>

Multiselect

Select can be created by using native <select multiple> element with class .js-select. Then javascript will dynamicaly inject HTML DOM for custom select.

Javascript dependency

Select component requires plugin: Choices.js

Example:
Code:
<select class="js-select" multiple>
  <option>Option 1</option>
  <option>Option 2</option>
  ...
</select>

Multiselect 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" multiple>
  <option>Option 1</option>
  ...
</select>

<!-- medium -->
<select class="js-select" multiple>
  <option>Option 1</option>
  ...
</select>

<!-- small -->
<select class="js-select select--small" multiple>
  <option>Option 1</option>
  ...
</select>

Custom select/multiselect

Custom templates can be invoked by passing the template name during custom initalization. This is due to custom properties being passed along with select options.

The abbreviationBadges template requires a badge custom property, containing the desired badge text. badgeClasses is an optional property and passes additional class names to the badge.

Example:
Code:
<select id="select-1" data-select-tag multiple>
</select>

<select id="select-2" data-select-tag>
</select>

<script>
  var select1 = new window.myApp.Select('#select-1', {
      placeholder: false,
      shouldSort: false,
      searchEnabled: true,
      searchFields: ['label', 'value', 'customProperties.tag'],
      template: 'abbreviationBadges',
  })[0].setChoices([{
      label: 'Recently used',
      id: 1,
      disabled: false,
      choices: [
          {
              value: 'Erste Bank',
              label: 'Erste Bank',
              selected: true,
              customProperties: {
                  badge: 'EB',
              }
          },
          {
              value: 'Credit Suisse',
              label: 'Credit Suisse',
              customProperties: {
                  badge: 'CS',
                  badgeClasses: 'badge--transparent text-color-success',
              }
          },
          {
              value: 'HSBC UK',
              label: 'HSBC UK',
              customProperties: {
                  badge: 'HSBC',
                  badgeClasses: 'badge--primary',
              }
          },
          {
              value: 'Allianz',
              label: 'Allianz',
              customProperties: {
                  badge: 'A'
              }
          },
      ]
  },
  {
      label: 'All codes',
      id: 2,
      disabled: false,
      choices: [
          {
              value: 'Erste Bank',
              label: 'Erste Bank',
              customProperties: {
                  badge: 'EB',
                  badgeClasses: "badge--darkgrey"
              }
          },
          {
              value: 'Credit Suisse',
              label: 'Credit Suisse',
              customProperties: {
                  badge: 'CS',
                  badgeClasses: "badge--success"
              }
          },
          {
              value: 'HSBC UK',
              label: 'HSBC UK',
              customProperties: {
                  badge: 'HSBC'
              }
          },
          {
              value: 'Allianz',
              label: 'Allianz',
              customProperties: {
                  badge: 'A'
              }
          },
          {
              value: 'Erste Bank',
              label: 'Erste Bank',
              customProperties: {
                  badge: 'EB'
              }
          },
          {
              value: 'Credit Suisse',
              label: 'Credit Suisse',
              customProperties: {
                  badge: 'CS'
              }
          },
          {
              value: 'HSBC UK',
              label: 'HSBC UK',
              customProperties: {
                  badge: 'HSBC'
              }
          },
          {
              value: 'Allianz',
              label: 'Allianz',
              customProperties: {
                  badge: 'A'
              }
          },
      ]
  }], 'value', 'label', false);

  var select2 = new window.myApp.Select('#select-2', {
      placeholder: false,
      shouldSort: false,
      searchEnabled: false,
      template: 'abbreviationBadges',
  })[0].setChoices([{....}], 'value', 'label', false);
</script>