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

description
component variations
demo code
style scss

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

This is optional

<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

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 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

This might be bad.

<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

This is bad and you need to do something.

<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>

Date field

Open on blank page

<div class="m-form-field">
  <div class="a-date-input">
    <input type="date" id="date-input-date-1" name="Date field" />
    <button type="button" class="a-date-input__button" aria-label="open dialog">
      <i class="a-icon boschicon-bosch-ic-calendar-clock"></i>
    </button>
  </div>
</div>

Date field with notification

Open on blank page

This is optional

<div class="m-form-field">
  <div class="a-date-input">
    <input
      type="date"
      id="date-input-date-2"
      name="Date field with notification"
    />
    <button type="button" class="a-date-input__button" aria-label="open dialog">
      <i class="a-icon boschicon-bosch-ic-calendar-clock"></i>
    </button>
  </div>
  <div
    class="a-notification a-notification--text -neutral"
    id="frontend-kit-notification-date-2"
    role="alert"
  >
    <div id="date-2-label" class="a-notification__content">
      This is optional
    </div>
  </div>
</div>

Date field with success notification

Open on blank page

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 class="m-form-field">
  <div class="a-date-input">
    <input
      type="date"
      id="date-input-date-4"
      name="Date field with success notification"
    />
    <button type="button" class="a-date-input__button" aria-label="open dialog">
      <i class="a-icon boschicon-bosch-ic-calendar-clock"></i>
    </button>
  </div>
  <div
    class="a-notification a-notification--text -success"
    id="frontend-kit-notification-date-4"
    role="alert"
  >
    <i class="a-icon ui-ic-alert-success"></i>
    <div id="date-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>

Date field with warning notification

Open on blank page

This might be bad.

<div class="m-form-field">
  <div class="a-date-input">
    <input
      type="date"
      id="date-input-date-5"
      name="Date field with warning notification"
    />
    <button type="button" class="a-date-input__button" aria-label="open dialog">
      <i class="a-icon boschicon-bosch-ic-calendar-clock"></i>
    </button>
  </div>
  <div
    class="a-notification a-notification--text -warning"
    id="frontend-kit-notification-date-5"
    role="alert"
  >
    <i class="a-icon ui-ic-alert-warning"></i>
    <div id="date-5-label" class="a-notification__content">
      This might be bad.
    </div>
  </div>
</div>

Date field with error notification

Open on blank page

This is bad and you need to do something.

<div class="m-form-field">
  <div class="a-date-input">
    <input
      type="date"
      id="date-input-date-6"
      name="Date field with error notification"
    />
    <button type="button" class="a-date-input__button" aria-label="open dialog">
      <i class="a-icon boschicon-bosch-ic-calendar-clock"></i>
    </button>
  </div>
  <div
    class="a-notification a-notification--text -error"
    id="frontend-kit-notification-date-6"
    role="alert"
  >
    <i class="a-icon ui-ic-alert-error"></i>
    <div id="date-6-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

This is optional

<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

Good job!

<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

This might be bad.

<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

This is bad and you need to do something.

<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

Checkbox Label

<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

Checkbox Label

This is optional

<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

Checkbox label

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 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

Checkbox Label

This might be bad.

<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

Checkbox Label

This is bad and you need to do something.

<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

Radio button Label

<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

Radio button Label

This is optional

<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

Radio button Label

Good job!

<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

Radio button Label

This might be bad.

<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

Radio button Label

This is bad and you need to do something.

<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>

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>

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>

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>

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>

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

Toggle label

<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

Toggle label

This is optional

<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

Toggle label

Good job!

<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

Toggle label

This might be bad.

<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

Toggle label

This is bad and you need to do something.

<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

This is optional!

<div class="m-form-field m-form-field--value">
  <div class="a-value-modificator">
    <input
      type="number"
      id="value-modificator-value-modificator-1"
      min="0"
      max="100"
      step="5"
    />
    <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

Good job!

<div class="m-form-field m-form-field--value">
  <div class="a-value-modificator">
    <input
      type="number"
      id="value-modificator-value-modificator-2"
      min="0"
      max="100"
      step="5"
    />
    <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

This might be bad.

<div class="m-form-field m-form-field--value">
  <div class="a-value-modificator">
    <input
      type="number"
      id="value-modificator-value-modificator-3"
      min="0"
      max="100"
      step="5"
    />
    <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

This is bad and you need to do something.

<div class="m-form-field m-form-field--value">
  <div class="a-value-modificator">
    <input
      type="number"
      id="value-modificator-value-modificator-4"
      min="0"
      max="100"
      step="5"
    />
    <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>

Date 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-date-input">
      <input
        type="date"
        id="date-input-date-field-demo"
        name="Date field API demonstration"
      />
      <button
        type="button"
        class="a-date-input__button"
        aria-label="open dialog"
      >
        <i class="a-icon boschicon-bosch-ic-calendar-clock"></i>
      </button>
    </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

Checkbox Label

<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

Radio button Label

<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>

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

toggle Label

<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"
        id="value-modificator-value-demo"
        min="0"
        max="100"
        step="5"
      />
      <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

.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;
    }
  }
}

form field

component variations

Default Form Field

Text field with notification

Text field with success notification

Text field with warning notification

Text field with error notification

Date field

Date field with notification

Date field with success notification

Date field with warning notification

Date field with error notification

Text area

Text area with notification

Text area with success notification

Text area with warning notification

Text area with error notification

Checkbox

Checkbox with notification

Checkbox with success notification

Checkbox with warning notification

Checkbox with error notification

Radio button

Radio button with notification

Radio button with success notification

Radio button with warning notification

Radio button with error notification

Dropdown

Dropdown with notification

Dropdown with success notification

Dropdown with warning notification

Dropdown with error notification

Toggle

Toggle with notification

Toggle with success notification

Toggle with warning notification

Toggle with error notification

Input Value Modificator with notification

Input Value Modificator with success notification

Input Value Modificator with warning notification

Input Value Modificator with error notification

Text field API demonstration

Date field API demonstration

Text area API demonstration

Checkbox API demonstration

Radio button API demonstration

Dropdown API demonstration

Toggle API demonstration

Input Value Modificator API demonstration

additional content

demo

styles SCSS