form field

The form field molecule wraps the input atoms and provides an optional notification. Used atoms:

It also features an API for state management, see examples and API documentation below.

According to the Web Content Accessibility Guidelines (WCAG), it is highly reccomended to use a label together with the form field.
table of content

component variations

Default Form Field

Open on blank page
<div class="m-form-field">
  <div class="a-text-field">
    <input type="text" id="text-input-undefined" />
  </div>
</div>

Text field with notification

Open on blank page
<div class="m-form-field">
  <div class="a-text-field"><input type="text" id="text-input-1" /></div>
  <div
    class="a-notification a-notification--text -neutral"
    id="frontend-kit-notification-1"
    role="alert"
  >
    <div id="1-label" class="a-notification__content">This is optional</div>
  </div>
</div>

Text field with success notification

Open on blank page
<div class="m-form-field">
  <div class="a-text-field"><input type="text" id="text-input-3" /></div>
  <div
    class="a-notification a-notification--text -success"
    id="frontend-kit-notification-3"
    role="alert"
  >
    <i class="a-icon ui-ic-alert-success"></i>
    <div id="3-label" class="a-notification__content">
      Good job! Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nobis
      architecto illum eveniet molestiae dicta neque aut sapiente voluptate
      atque, voluptatum illo! Ad fugit harum enim.
    </div>
  </div>
</div>

Text field with warning notification

Open on blank page
<div class="m-form-field">
  <div class="a-text-field"><input type="text" id="text-input-4" /></div>
  <div
    class="a-notification a-notification--text -warning"
    id="frontend-kit-notification-4"
    role="alert"
  >
    <i class="a-icon ui-ic-alert-warning"></i>
    <div id="4-label" class="a-notification__content">This might be bad.</div>
  </div>
</div>

Text field with error notification

Open on blank page
<div class="m-form-field">
  <div class="a-text-field"><input type="text" id="text-input-5" /></div>
  <div
    class="a-notification a-notification--text -error"
    id="frontend-kit-notification-5"
    role="alert"
  >
    <i class="a-icon ui-ic-alert-error"></i>
    <div id="5-label" class="a-notification__content">
      This is bad and you need to do something.
    </div>
  </div>
</div>

Text area

Open on blank page
<div class="m-form-field">
  <div class="a-text-area"><textarea id="text-area-1"></textarea></div>
</div>

Text area with notification

Open on blank page
<div class="m-form-field">
  <div class="a-text-area"><textarea id="text-area-2"></textarea></div>
  <div
    class="a-notification a-notification--text -neutral"
    id="frontend-kit-notification-text-area-2"
    role="alert"
  >
    <div id="text-area-2-label" class="a-notification__content">
      This is optional
    </div>
  </div>
</div>

Text area with success notification

Open on blank page
<div class="m-form-field">
  <div class="a-text-area"><textarea id="text-area-3"></textarea></div>
  <div
    class="a-notification a-notification--text -success"
    id="frontend-kit-notification-text-area-3"
    role="alert"
  >
    <i class="a-icon ui-ic-alert-success"></i>
    <div id="text-area-3-label" class="a-notification__content">Good job!</div>
  </div>
</div>

Text area with warning notification

Open on blank page
<div class="m-form-field">
  <div class="a-text-area"><textarea id="text-area-4"></textarea></div>
  <div
    class="a-notification a-notification--text -warning"
    id="frontend-kit-notification-text-area-4"
    role="alert"
  >
    <i class="a-icon ui-ic-alert-warning"></i>
    <div id="text-area-4-label" class="a-notification__content">
      This might be bad.
    </div>
  </div>
</div>

Text area with error notification

Open on blank page
<div class="m-form-field">
  <div class="a-text-area"><textarea id="text-area-5"></textarea></div>
  <div
    class="a-notification a-notification--text -error"
    id="frontend-kit-notification-text-area-5"
    role="alert"
  >
    <i class="a-icon ui-ic-alert-error"></i>
    <div id="text-area-5-label" class="a-notification__content">
      This is bad and you need to do something.
    </div>
  </div>
</div>

Checkbox

Open on blank page
<div class="m-form-field m-form-field--checkbox">
  <div class="a-checkbox">
    <input type="checkbox" id="checkbox-checkbox-1" />
    <label for="checkbox-checkbox-1">Checkbox Label</label>
  </div>
</div>

Checkbox with notification

Open on blank page
<div class="m-form-field m-form-field--checkbox">
  <div class="a-checkbox">
    <input type="checkbox" id="checkbox-checkbox-2" />
    <label for="checkbox-checkbox-2">Checkbox Label</label>
  </div>
  <div
    class="a-notification a-notification--text -neutral"
    id="frontend-kit-notification-checkbox-2"
    role="alert"
  >
    <div id="checkbox-2-label" class="a-notification__content">
      This is optional
    </div>
  </div>
</div>

Checkbox with success notification

Open on blank page
<div class="m-form-field m-form-field--checkbox">
  <div class="a-checkbox">
    <input type="checkbox" id="checkbox-checkbox-4" />
    <label for="checkbox-checkbox-4">Checkbox label</label>
  </div>
  <div
    class="a-notification a-notification--text -success"
    id="frontend-kit-notification-checkbox-4"
    role="alert"
  >
    <i class="a-icon ui-ic-alert-success"></i>
    <div id="checkbox-4-label" class="a-notification__content">
      Good job! Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nobis
      architecto illum eveniet molestiae dicta neque aut sapiente voluptate
      atque, voluptatum illo! Ad fugit harum enim.
    </div>
  </div>
</div>

Checkbox with warning notification

Open on blank page
<div class="m-form-field m-form-field--checkbox">
  <div class="a-checkbox">
    <input type="checkbox" id="checkbox-checkbox-5" />
    <label for="checkbox-checkbox-5">Checkbox Label</label>
  </div>
  <div
    class="a-notification a-notification--text -warning"
    id="frontend-kit-notification-checkbox-5"
    role="alert"
  >
    <i class="a-icon ui-ic-alert-warning"></i>
    <div id="checkbox-5-label" class="a-notification__content">
      This might be bad.
    </div>
  </div>
</div>

Checkbox with error notification

Open on blank page
<div class="m-form-field m-form-field--checkbox">
  <div class="a-checkbox">
    <input type="checkbox" id="checkbox-checkbox-6" />
    <label for="checkbox-checkbox-6">Checkbox Label</label>
  </div>
  <div
    class="a-notification a-notification--text -error"
    id="frontend-kit-notification-checkbox-6"
    role="alert"
  >
    <i class="a-icon ui-ic-alert-error"></i>
    <div id="checkbox-6-label" class="a-notification__content">
      This is bad and you need to do something.
    </div>
  </div>
</div>

Radio button

Open on blank page
<div class="m-form-field m-form-field--radio">
  <div class="a-radio-button">
    <input type="radio" id="radio-button-radio-button-1" name="Radio button" />
    <label for="radio-button-radio-button-1">Radio button Label</label>
  </div>
</div>

Radio button with notification

Open on blank page
<div class="m-form-field m-form-field--radio">
  <div class="a-radio-button">
    <input
      type="radio"
      id="radio-button-radio-button-2"
      name="Radio button with notification"
    />
    <label for="radio-button-radio-button-2">Radio button Label</label>
  </div>
  <div
    class="a-notification a-notification--text -neutral"
    id="frontend-kit-notification-radio-button-2"
    role="alert"
  >
    <div id="radio-button-2-label" class="a-notification__content">
      This is optional
    </div>
  </div>
</div>

Radio button with success notification

Open on blank page
<div class="m-form-field m-form-field--radio">
  <div class="a-radio-button">
    <input
      type="radio"
      id="radio-button-radio-button-3"
      name="Radio button with success notification"
    />
    <label for="radio-button-radio-button-3">Radio button Label</label>
  </div>
  <div
    class="a-notification a-notification--text -success"
    id="frontend-kit-notification-radio-button-3"
    role="alert"
  >
    <i class="a-icon ui-ic-alert-success"></i>
    <div id="radio-button-3-label" class="a-notification__content">
      Good job!
    </div>
  </div>
</div>

Radio button with warning notification

Open on blank page
<div class="m-form-field m-form-field--radio">
  <div class="a-radio-button">
    <input
      type="radio"
      id="radio-button-radio-button-4"
      name="Radio button with warning notification"
    />
    <label for="radio-button-radio-button-4">Radio button Label</label>
  </div>
  <div
    class="a-notification a-notification--text -warning"
    id="frontend-kit-notification-radio-button-4"
    role="alert"
  >
    <i class="a-icon ui-ic-alert-warning"></i>
    <div id="radio-button-4-label" class="a-notification__content">
      This might be bad.
    </div>
  </div>
</div>

Radio button with error notification

Open on blank page
<div class="m-form-field m-form-field--radio">
  <div class="a-radio-button">
    <input
      type="radio"
      id="radio-button-radio-button-5"
      name="Radio button with error notification"
    />
    <label for="radio-button-radio-button-5">Radio button Label</label>
  </div>
  <div
    class="a-notification a-notification--text -error"
    id="frontend-kit-notification-radio-button-5"
    role="alert"
  >
    <i class="a-icon ui-ic-alert-error"></i>
    <div id="radio-button-5-label" class="a-notification__content">
      This is bad and you need to do something.
    </div>
  </div>
</div>

Dropdown

Open on blank page
<div class="m-form-field m-form-field--dropdown">
  <div class="a-dropdown">
    <select
      id="dropdown-1"
      aria-label="here goes the aria label for the dropwdown"
    >
      <option value='"value1"'>Option 1</option>
      <option value='"value2"'>Option 2</option>
      <option value='"value3"'>Option 3</option>
    </select>
  </div>
</div>

Dropdown with notification

Open on blank page
<div class="m-form-field m-form-field--dropdown">
  <div class="a-dropdown">
    <select
      id="dropdown-2"
      aria-label="here goes the aria label for the dropwdown"
    >
      <option value='"value1"'>Option 1</option>
      <option value='"value2"'>Option 2</option>
      <option value='"value3"'>Option 3</option>
    </select>
  </div>
  <div
    class="a-notification a-notification--text -neutral"
    id="frontend-kit-notification-dropdown-2"
    role="alert"
  >
    <div id="dropdown-2-label" class="a-notification__content">
      This is optional
    </div>
  </div>
</div>

Dropdown with success notification

Open on blank page
<div class="m-form-field m-form-field--dropdown">
  <div class="a-dropdown">
    <select
      id="dropdown-3"
      aria-label="here goes the aria label for the dropwdown"
    >
      <option value='"value1"'>Option 1</option>
      <option value='"value2"'>Option 2</option>
      <option value='"value3"'>Option 3</option>
    </select>
  </div>
  <div
    class="a-notification a-notification--text -success"
    id="frontend-kit-notification-dropdown-3"
    role="alert"
  >
    <i class="a-icon ui-ic-alert-success"></i>
    <div id="dropdown-3-label" class="a-notification__content">
      This is optional
    </div>
  </div>
</div>

Dropdown with warning notification

Open on blank page
<div class="m-form-field m-form-field--dropdown">
  <div class="a-dropdown">
    <select
      id="dropdown-4"
      aria-label="here goes the aria label for the dropwdown"
    >
      <option value='"value1"'>Option 1</option>
      <option value='"value2"'>Option 2</option>
      <option value='"value3"'>Option 3</option>
    </select>
  </div>
  <div
    class="a-notification a-notification--text -warning"
    id="frontend-kit-notification-dropdown-4"
    role="alert"
  >
    <i class="a-icon ui-ic-alert-warning"></i>
    <div id="dropdown-4-label" class="a-notification__content">
      This is optional
    </div>
  </div>
</div>

Dropdown with error notification

Open on blank page
<div class="m-form-field m-form-field--dropdown">
  <div class="a-dropdown">
    <select
      id="dropdown-5"
      aria-label="here goes the aria label for the dropwdown"
    >
      <option value='"value1"'>Option 1</option>
      <option value='"value2"'>Option 2</option>
      <option value='"value3"'>Option 3</option>
    </select>
  </div>
  <div
    class="a-notification a-notification--text -error"
    id="frontend-kit-notification-dropdown-5"
    role="alert"
  >
    <i class="a-icon ui-ic-alert-error"></i>
    <div id="dropdown-5-label" class="a-notification__content">
      This is optional
    </div>
  </div>
</div>

Toggle

Open on blank page
<div class="m-form-field m-form-field--toggle">
  <div class="a-toggle">
    <label>
      <input id="toggle-input-toggle-1" type="checkbox" role="switch" />
      <div class="a-toggle__trigger"></div>
      <span class="a-toggle__label a-toggle__label--right">Toggle label</span>
    </label>
  </div>
</div>

Toggle with notification

Open on blank page
<div class="m-form-field m-form-field--toggle">
  <div class="a-toggle">
    <label>
      <input id="toggle-input-toggle-2" type="checkbox" role="switch" />
      <div class="a-toggle__trigger"></div>
      <span class="a-toggle__label a-toggle__label--right">Toggle label</span>
    </label>
  </div>
  <div
    class="a-notification a-notification--text -neutral"
    id="frontend-kit-notification-toggle-2"
    role="alert"
  >
    <div id="toggle-2-label" class="a-notification__content">
      This is optional
    </div>
  </div>
</div>

Toggle with success notification

Open on blank page
<div class="m-form-field m-form-field--toggle">
  <div class="a-toggle">
    <label>
      <input id="toggle-input-toggle-3" type="checkbox" role="switch" />
      <div class="a-toggle__trigger"></div>
      <span class="a-toggle__label a-toggle__label--right">Toggle label</span>
    </label>
  </div>
  <div
    class="a-notification a-notification--text -success"
    id="frontend-kit-notification-toggle-3"
    role="alert"
  >
    <i class="a-icon ui-ic-alert-success"></i>
    <div id="toggle-3-label" class="a-notification__content">Good job!</div>
  </div>
</div>

Toggle with warning notification

Open on blank page
<div class="m-form-field m-form-field--toggle">
  <div class="a-toggle">
    <label>
      <input id="toggle-input-toggle-4" type="checkbox" role="switch" />
      <div class="a-toggle__trigger"></div>
      <span class="a-toggle__label a-toggle__label--right">Toggle label</span>
    </label>
  </div>
  <div
    class="a-notification a-notification--text -warning"
    id="frontend-kit-notification-toggle-4"
    role="alert"
  >
    <i class="a-icon ui-ic-alert-warning"></i>
    <div id="toggle-4-label" class="a-notification__content">
      This might be bad.
    </div>
  </div>
</div>

Toggle with error notification

Open on blank page
<div class="m-form-field m-form-field--toggle">
  <div class="a-toggle">
    <label>
      <input id="toggle-input-toggle-5" type="checkbox" role="switch" />
      <div class="a-toggle__trigger"></div>
      <span class="a-toggle__label a-toggle__label--right">Toggle label</span>
    </label>
  </div>
  <div
    class="a-notification a-notification--text -error"
    id="frontend-kit-notification-toggle-5"
    role="alert"
  >
    <i class="a-icon ui-ic-alert-error"></i>
    <div id="toggle-5-label" class="a-notification__content">
      This is bad and you need to do something.
    </div>
  </div>
</div>

Input Value Modificator with notification

Open on blank page
<div class="m-form-field m-form-field--value">
  <div class="a-value-modificator">
    <input type="number" min="0" max="100" step="5" id="value-modificator-1" />
    <button
      type="button"
      class="a-value-modificator__minus-button"
      aria-label="Minus"
    >
      <i class="a-icon boschicon-bosch-ic-less-minimize"></i>
    </button>
    <button
      type="button"
      class="a-value-modificator__plus-button"
      aria-label="Plus"
    >
      <i class="a-icon boschicon-bosch-ic-add"></i>
    </button>
  </div>
  <div
    class="a-notification a-notification--text -neutral"
    id="frontend-kit-notification-value-modificator-1"
    role="alert"
  >
    <div id="value-modificator-1-label" class="a-notification__content">
      This is optional!
    </div>
  </div>
</div>

Input Value Modificator with success notification

Open on blank page
<div class="m-form-field m-form-field--value">
  <div class="a-value-modificator">
    <input type="number" min="0" max="100" step="5" id="value-modificator-2" />
    <button
      type="button"
      class="a-value-modificator__minus-button"
      aria-label="Minus"
    >
      <i class="a-icon boschicon-bosch-ic-less-minimize"></i>
    </button>
    <button
      type="button"
      class="a-value-modificator__plus-button"
      aria-label="Plus"
    >
      <i class="a-icon boschicon-bosch-ic-add"></i>
    </button>
  </div>
  <div
    class="a-notification a-notification--text -success"
    id="frontend-kit-notification-value-modificator-2"
    role="alert"
  >
    <i class="a-icon ui-ic-alert-success"></i>
    <div id="value-modificator-2-label" class="a-notification__content">
      Good job!
    </div>
  </div>
</div>

Input Value Modificator with warning notification

Open on blank page
<div class="m-form-field m-form-field--value">
  <div class="a-value-modificator">
    <input type="number" min="0" max="100" step="5" id="value-modificator-3" />
    <button
      type="button"
      class="a-value-modificator__minus-button"
      aria-label="Minus"
    >
      <i class="a-icon boschicon-bosch-ic-less-minimize"></i>
    </button>
    <button
      type="button"
      class="a-value-modificator__plus-button"
      aria-label="Plus"
    >
      <i class="a-icon boschicon-bosch-ic-add"></i>
    </button>
  </div>
  <div
    class="a-notification a-notification--text -warning"
    id="frontend-kit-notification-value-modificator-3"
    role="alert"
  >
    <i class="a-icon ui-ic-alert-warning"></i>
    <div id="value-modificator-3-label" class="a-notification__content">
      This might be bad.
    </div>
  </div>
</div>

Input Value Modificator with error notification

Open on blank page
<div class="m-form-field m-form-field--value">
  <div class="a-value-modificator">
    <input type="number" min="0" max="100" step="5" id="value-modificator-4" />
    <button
      type="button"
      class="a-value-modificator__minus-button"
      aria-label="Minus"
    >
      <i class="a-icon boschicon-bosch-ic-less-minimize"></i>
    </button>
    <button
      type="button"
      class="a-value-modificator__plus-button"
      aria-label="Plus"
    >
      <i class="a-icon boschicon-bosch-ic-add"></i>
    </button>
  </div>
  <div
    class="a-notification a-notification--text -error"
    id="frontend-kit-notification-value-modificator-4"
    role="alert"
  >
    <i class="a-icon ui-ic-alert-error"></i>
    <div id="value-modificator-4-label" class="a-notification__content">
      This is bad and you need to do something.
    </div>
  </div>
</div>

Text field API demonstration

Open on blank page
<div class="frontend-kit-example_form-field-notification">
  <button
    type="button"
    class="a-button a-button--primary -without-icon"
    data-frok-action="error"
  >
    <span class="a-button__label">Error</span>
  </button>
  <button
    type="button"
    class="a-button a-button--primary -without-icon"
    data-frok-action="warning"
  >
    <span class="a-button__label">Warning</span>
  </button>
  <button
    type="button"
    class="a-button a-button--primary -without-icon"
    data-frok-action="success"
  >
    <span class="a-button__label">Success</span>
  </button>
  <button
    type="button"
    class="a-button a-button--primary -without-icon"
    data-frok-action="neutral"
  >
    <span class="a-button__label">Neutral</span>
  </button>
  <button
    type="button"
    class="a-button a-button--secondary -without-icon"
    data-frok-action="reset"
  >
    <span class="a-button__label">Reset</span>
  </button>
  <hr class="a-divider" />
  <div class="m-form-field">
    <div class="a-text-field">
      <input type="text" id="text-input-text-field-demo" />
    </div>
  </div>
  <style>
    .frontend-kit-example_form-field-notification > .a-button { margin-right: 12px; display: inline-block; }
  </style>
</div>

Text area API demonstration

Open on blank page
<div class="frontend-kit-example_form-field-notification">
  <button
    type="button"
    class="a-button a-button--primary -without-icon"
    data-frok-action="error"
  >
    <span class="a-button__label">Error</span>
  </button>
  <button
    type="button"
    class="a-button a-button--primary -without-icon"
    data-frok-action="warning"
  >
    <span class="a-button__label">Warning</span>
  </button>
  <button
    type="button"
    class="a-button a-button--primary -without-icon"
    data-frok-action="success"
  >
    <span class="a-button__label">Success</span>
  </button>
  <button
    type="button"
    class="a-button a-button--primary -without-icon"
    data-frok-action="neutral"
  >
    <span class="a-button__label">Neutral</span>
  </button>
  <button
    type="button"
    class="a-button a-button--secondary -without-icon"
    data-frok-action="reset"
  >
    <span class="a-button__label">Reset</span>
  </button>
  <hr class="a-divider" />
  <div class="m-form-field">
    <div class="a-text-area"><textarea id="text-area-demo"></textarea></div>
  </div>
  <style>
    .frontend-kit-example_form-field-notification > .a-button { margin-right: 12px; display: inline-block; }
  </style>
</div>

Checkbox API demonstration

Open on blank page
<div class="frontend-kit-example_form-field-notification">
  <button
    type="button"
    class="a-button a-button--primary -without-icon"
    data-frok-action="error"
  >
    <span class="a-button__label">Error</span>
  </button>
  <button
    type="button"
    class="a-button a-button--primary -without-icon"
    data-frok-action="warning"
  >
    <span class="a-button__label">Warning</span>
  </button>
  <button
    type="button"
    class="a-button a-button--primary -without-icon"
    data-frok-action="success"
  >
    <span class="a-button__label">Success</span>
  </button>
  <button
    type="button"
    class="a-button a-button--primary -without-icon"
    data-frok-action="neutral"
  >
    <span class="a-button__label">Neutral</span>
  </button>
  <button
    type="button"
    class="a-button a-button--secondary -without-icon"
    data-frok-action="reset"
  >
    <span class="a-button__label">Reset</span>
  </button>
  <hr class="a-divider" />
  <div class="m-form-field m-form-field--checkbox">
    <div class="a-checkbox">
      <input type="checkbox" id="checkbox-checkbox-demo" />
      <label for="checkbox-checkbox-demo">Checkbox Label</label>
    </div>
  </div>
  <style>
    .frontend-kit-example_form-field-notification > .a-button { margin-right: 12px; display: inline-block; }
  </style>
</div>

Radio button API demonstration

Open on blank page
<div class="frontend-kit-example_form-field-notification">
  <button
    type="button"
    class="a-button a-button--primary -without-icon"
    data-frok-action="error"
  >
    <span class="a-button__label">Error</span>
  </button>
  <button
    type="button"
    class="a-button a-button--primary -without-icon"
    data-frok-action="warning"
  >
    <span class="a-button__label">Warning</span>
  </button>
  <button
    type="button"
    class="a-button a-button--primary -without-icon"
    data-frok-action="success"
  >
    <span class="a-button__label">Success</span>
  </button>
  <button
    type="button"
    class="a-button a-button--primary -without-icon"
    data-frok-action="neutral"
  >
    <span class="a-button__label">Neutral</span>
  </button>
  <button
    type="button"
    class="a-button a-button--secondary -without-icon"
    data-frok-action="reset"
  >
    <span class="a-button__label">Reset</span>
  </button>
  <hr class="a-divider" />
  <div class="m-form-field m-form-field--radio">
    <div class="a-radio-button">
      <input
        type="radio"
        id="radio-button-radio-button-demo"
        name="Radio button API demonstration"
      />
      <label for="radio-button-radio-button-demo">Radio button Label</label>
    </div>
  </div>
  <style>
    .frontend-kit-example_form-field-notification > .a-button { margin-right: 12px; display: inline-block; }
  </style>
</div>

Dropdown API demonstration

Open on blank page
<div class="frontend-kit-example_form-field-notification">
  <button
    type="button"
    class="a-button a-button--primary -without-icon"
    data-frok-action="error"
  >
    <span class="a-button__label">Error</span>
  </button>
  <button
    type="button"
    class="a-button a-button--primary -without-icon"
    data-frok-action="warning"
  >
    <span class="a-button__label">Warning</span>
  </button>
  <button
    type="button"
    class="a-button a-button--primary -without-icon"
    data-frok-action="success"
  >
    <span class="a-button__label">Success</span>
  </button>
  <button
    type="button"
    class="a-button a-button--primary -without-icon"
    data-frok-action="neutral"
  >
    <span class="a-button__label">Neutral</span>
  </button>
  <button
    type="button"
    class="a-button a-button--secondary -without-icon"
    data-frok-action="reset"
  >
    <span class="a-button__label">Reset</span>
  </button>
  <hr class="a-divider" />
  <div class="m-form-field m-form-field--dropdown">
    <div class="a-dropdown">
      <select
        id="dropdown-demo"
        aria-label="here goes the aria label for the dropwdown"
      >
        <option value='"value1"'>Option 1</option>
        <option value='"value2"'>Option 2</option>
        <option value='"value3"'>Option 3</option>
      </select>
    </div>
  </div>
  <style>
    .frontend-kit-example_form-field-notification > .a-button { margin-right: 12px; display: inline-block; }
  </style>
</div>

Toggle API demonstration

Open on blank page
<div class="frontend-kit-example_form-field-notification">
  <button
    type="button"
    class="a-button a-button--primary -without-icon"
    data-frok-action="error"
  >
    <span class="a-button__label">Error</span>
  </button>
  <button
    type="button"
    class="a-button a-button--primary -without-icon"
    data-frok-action="warning"
  >
    <span class="a-button__label">Warning</span>
  </button>
  <button
    type="button"
    class="a-button a-button--primary -without-icon"
    data-frok-action="success"
  >
    <span class="a-button__label">Success</span>
  </button>
  <button
    type="button"
    class="a-button a-button--primary -without-icon"
    data-frok-action="neutral"
  >
    <span class="a-button__label">Neutral</span>
  </button>
  <button
    type="button"
    class="a-button a-button--secondary -without-icon"
    data-frok-action="reset"
  >
    <span class="a-button__label">Reset</span>
  </button>
  <hr class="a-divider" />
  <div class="m-form-field m-form-field--toggle">
    <div class="a-toggle">
      <label>
        <input id="toggle-input-toggle-demo" type="checkbox" role="switch" />
        <div class="a-toggle__trigger"></div>
        <span class="a-toggle__label a-toggle__label--right">toggle Label</span>
      </label>
    </div>
  </div>
  <style>
    .frontend-kit-example_form-field-notification > .a-button { margin-right: 12px; display: inline-block; }
  </style>
</div>

Input Value Modificator API demonstration

Open on blank page
<div class="frontend-kit-example_form-field-notification">
  <button
    type="button"
    class="a-button a-button--primary -without-icon"
    data-frok-action="error"
  >
    <span class="a-button__label">Error</span>
  </button>
  <button
    type="button"
    class="a-button a-button--primary -without-icon"
    data-frok-action="warning"
  >
    <span class="a-button__label">Warning</span>
  </button>
  <button
    type="button"
    class="a-button a-button--primary -without-icon"
    data-frok-action="success"
  >
    <span class="a-button__label">Success</span>
  </button>
  <button
    type="button"
    class="a-button a-button--primary -without-icon"
    data-frok-action="neutral"
  >
    <span class="a-button__label">Neutral</span>
  </button>
  <button
    type="button"
    class="a-button a-button--secondary -without-icon"
    data-frok-action="reset"
  >
    <span class="a-button__label">Reset</span>
  </button>
  <hr class="a-divider" />
  <div class="m-form-field m-form-field--value">
    <div class="a-value-modificator">
      <input type="number" min="0" max="100" step="5" id="value-demo" />
      <button
        type="button"
        class="a-value-modificator__minus-button"
        aria-label="Minus"
      >
        <i class="a-icon boschicon-bosch-ic-less-minimize"></i>
      </button>
      <button
        type="button"
        class="a-value-modificator__plus-button"
        aria-label="Plus"
      >
        <i class="a-icon boschicon-bosch-ic-add"></i>
      </button>
    </div>
  </div>
  <style>
    .frontend-kit-example_form-field-notification > .a-button { margin-right: 12px; display: inline-block; }
  </style>
</div>

additional content

demo

import ElementWithComponent from '../../ElementWithComponent';
import FormField from './index';

export default (): void => {
  const exampleContainers = document.querySelectorAll(
    '.frontend-kit-example_form-field-notification',
  );

  [...exampleContainers].forEach(container => {
    const exampleButtons = container.querySelectorAll('.a-button');

    const example = container.querySelector(
      '.m-form-field',
    ) as ElementWithComponent<FormField>;

    const formField = example.component;

    [...exampleButtons].forEach(button => {
      const state = button.getAttribute('data-frok-action');
      if (state !== 'reset') {
        button.addEventListener('click', () => {
          formField.setState(state, state);
        });
      } else {
        button.addEventListener('click', () => {
          formField.setState('neutral');
        });
      }
    });
  });
};

styles SCSS

$formFieldSpacing: 1rem;

.m-form-field {
  margin-bottom: $formFieldSpacing;
  flex-shrink: 1;
  flex-grow: 1;

  &.-quarter {
    flex-basis: 25%;
    flex-grow: 0;
  }

  &.-half {
    flex-basis: 50%;
  }

  &--radio,
  &--checkbox,
  &--dropdown,
  &--toggle {
    margin-top: 1.5rem;
  }

  &--radio,
  &--toggle {
    .a-notification {
      margin-top: 1rem;
    }
  }

  &--checkbox {
    label {
      position: unset; // Unset the label on the checkbox's demo
    }

    .a-notification {
      margin-top: 1rem;
    }
  }

  &--value {
    .a-value-modificator {
      margin: 0;
      width: auto;
    }
  }
}