D.School Component Library

Radio Group: Required 

<div class="o-radio-group o-form__item">
      <label>
          Label
          <span class="o-asterisk">*</span>
      </label>
      <div class="o-radio-group__items">
          <div class="o-radio o-form__item">
              <input id="radio-value-01" name="radio-name" value="radio-value-01" type="radio">
              <label for="radio-value-01">Radio option</label>
          </div>
          <div class="o-radio o-form__item">
              <input id="radio-value-02" name="radio-name" value="radio-value-02" type="radio">
              <label for="radio-value-02">Radio option</label>
          </div>
          <div class="o-radio o-form__item">
              <input id="radio-value-03" name="radio-name" value="radio-value-03" type="radio">
              <label for="radio-value-03">Radio option</label>
          </div>
      </div>
      <span class="o-field-note">
          This is a field note.
      </span>
  </div>
 
{% set base_class = radio_group.base_class|default('o-radio-group') %}
{% if radio_group.items %}
  <div class="{{ bem(base_class, radio_group.element, radio_group.modifiers, radio_group.extra) }} o-form__item">
    {% if radio_group.label %}
      <label{{ radio_group.label_hidden ? ' class="is-visually-hidden"' }}>
        {{ radio_group.label }}
        {% if radio_group.attributes.required %}
          <span class="o-asterisk">*</span>
        {% endif %}
      </label>
    {% endif %}
    <div class="{{ bem(base_class, 'items') }}">
      {% for radio in radio_group.items %}
        {% include "@radio" with radio %}
      {% endfor %}
    </div>
    {% include "@field-note" with radio_group %}
    {% include "@notification" with radio_group %}
  </div>
{% endif %}
 
{
  "radio_group": {
    "label": "Label",
    "items": [
      {
        "name": "radio-name",
        "label": "Radio option",
        "value": "radio-value-01"
      },
      {
        "name": "radio-name",
        "label": "Radio option",
        "value": "radio-value-02"
      },
      {
        "name": "radio-name",
        "label": "Radio option",
        "value": "radio-value-03"
      }
    ],
    "field_note": {
      "text": "This is a field note."
    },
    "attributes": {
      "required": true
    }
  }
}

No notes defined.