D.School Component Library

Checkbox Group: Error 

<div class="o-checkbox-group o-form__item">
      <label>
          Label
      </label>
      <div class="o-checkbox-group__items">
          <div class="o-checkbox o-form__item">
              <input id="checkbox-value-01" name="checkbox-name" value="checkbox-value-01" type="checkbox">
              <label for="checkbox-value-01">Checkbox selection</label>
          </div>
          <div class="o-checkbox o-form__item">
              <input id="checkbox-value-02" name="checkbox-name" value="checkbox-value-02" type="checkbox">
              <label for="checkbox-value-02">Checkbox selection</label>
          </div>
          <div class="o-checkbox o-form__item">
              <input id="checkbox-value-03" name="checkbox-name" value="checkbox-value-03" type="checkbox">
              <label for="checkbox-value-03">Checkbox selection</label>
          </div>
      </div>
      <span class="o-notification">
          <span class="o-notification__icon"><svg width="25" height="25" viewBox="0 0 25 25" fill="currentcolor" xmlns="http://www.w3.org/2000/svg">
                  <path d="M12.5 23C18.3 23 23 18.3 23 12.5C23 6.7 18.3 2 12.5 2C6.7 2 2 6.7 2 12.5C2 18.3 6.7 23 12.5 23ZM12.5 18.7C11.67 18.7 11 18.03 11 17.2C11 16.37 11.67 15.7 12.5 15.7C13.33 15.7 14 16.37 14 17.2C14 18.03 13.33 18.7 12.5 18.7ZM11.5 6.25H13.5L14.24 7.11L13.24 13.86H11.76L10.76 7.11L11.5 6.25Z" />
              </svg>
          </span>
          This is an error message.
      </span>
  </div>
 
{% set base_class = checkbox_group.base_class|default('o-checkbox-group') %}
{% if checkbox_group.items %}
  <div class="{{ bem(base_class, checkbox_group.element, checkbox_group.modifiers, checkbox_group.extra) }} o-form__item">
    {% if checkbox_group.label %}
      <label{{ checkbox_group.label_hidden ? ' class="is-visually-hidden"' }}>
        {{ checkbox_group.label }}
        {% if checkbox_group.attributes.required %}
          <span class="o-asterisk">*</span>
        {% endif %}
      </label>
    {% endif %}
    <div class="{{ bem(base_class, 'items') }}">
      {% for checkbox in checkbox_group.items %}
        {% include "@checkbox" with checkbox %}
      {% endfor %}
    </div>
    {% include "@field-note" with checkbox_group %}
    {% include "@notification" with checkbox_group %}
  </div>
{% endif %}
 
{
  "checkbox_group": {
    "label": "Label",
    "items": [
      {
        "name": "checkbox-name",
        "label": "Checkbox selection",
        "value": "checkbox-value-01"
      },
      {
        "name": "checkbox-name",
        "label": "Checkbox selection",
        "value": "checkbox-value-02"
      },
      {
        "name": "checkbox-name",
        "label": "Checkbox selection",
        "value": "checkbox-value-03"
      }
    ],
    "field_note": false,
    "error": true,
    "notification": {
      "text": "This is an error message."
    }
  }
}

No notes defined.