D.School Component Library

Checkbox Group: Required 

<div class="o-checkbox-group o-form__item">
      <label>
          Label
          <span class="o-asterisk">*</span>
      </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-field-note">
          This is a field note.
      </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": {
      "text": "This is a field note."
    },
    "attributes": {
      "required": true
    }
  }
}

No notes defined.