GNWT Base Theme Style Guide

6.6 forms.form-item--radio Form item (radio)

Toggle example guides Toggle HTML markup

Checkboxes and radios require slightly different markup; their label is after their widget instead of before. Uses the .form-item--radio class variant of the normal form item and is placed on each of the nested form items.

Examples
Default styling
Form group description.
Form item description.
Form item description.
.is-error
Highlight the form elements that caused a form submission error.
Form group description.
Form item description.
Form item description.
Markup: forms/form-item/form-item--radio.twig
<div class="form-item">
  <label class="form-item__label" for="group">Label for the group</label>
  <div class="form-item__description">
    Form group description.
  </div>
  <div class="form-item__group" id="group">
    <div class="form-item--radio {{modifier_class}}">
      <input class="form-item__widget" type="checkbox" id="option-1" value="1">
      <label class="form-item__label" for="option-1">Option 1</label>
      <div class="form-item__description">
        Form item description.
      </div>
    </div>
    <div class="form-item--radio {{modifier_class}}">
      <input class="form-item__widget" type="checkbox" id="option-2" value="2">
      <label class="form-item__label" for="option-2">Option 2</label>
      <div class="form-item__description">
        Form item description.
      </div>
    </div>
  </div>
</div>
Source: sass/forms/form-item/_form-item.scss, line 17