City of Ghent Style Guide

Radios

When to use this component

Use the radios component when users should only be able to select one option and no more.

When not to use this component

Do not use the radios component when you need to help users:

  • Select one or more options.
  • Toggle a single option on or off.

In these cases, use the checkboxes component (for a single option or a short list of options) or the checkboxes with filter component (for a long list of options) instead.

When users should be able to select one option and no more from a long list of options:

  • Try to reduce and simplify the list of options to present fewer options to the user.
  • When there are no better alternatives, use the select component.

How it works

  • Radios are grouped in a fieldset.
  • The fieldset uses a legend to present a description for the radios. This is typically a question.
  • Users should be able to select only one option and no more. Once they selected an option, they can only select another one, and the one that was selected should become deselected. Furthermore, users cannot go back to having no option selected, except when refreshing their browser window.
  • Do not select radios by default as users might not notice this, resulting in not realising they missed a question and/or sending a wrong answer.
  • The options should have short but clearly different labels. There’s no need to name the action “Select this radio to…” because it is already a radio. Avoid repeating words at the start of the labels for the options so that the options are easiliy scannable.

Usage, behavior, layout and validation

The radios component is a form element that should always be used in a form. For a description of the usage, the behavior, the layout and validation of form elements, see the form component examples and documentation.

Radios 

<fieldset class="form-item {{ modifier }}">
  <legend>
    <span class="legend-title">{{ label }}</span>
    {% if label_optional %}
      <span class="label-optional">({{ label_optional }})</span>
    {% endif %}
  </legend>
  <div class="form-item">
    {% if field_description %}
      {% include '@field-message' with {
        "field_message": field_description,
        "id": id ~ '-description',
        "modifier": null
      } %}
    {% endif %}
    <div class="form-columns">
      <div class="form-item-column">
        {% for option in options %}
          {% include '@input' with {
            "id": "input-" ~ id ~ "-" ~ modifier ~ "-" ~ option.id,
            "type": "radio",
            "name": option.name,
            "label": option.label,
            "modifier": modifier,
            "attributes": option.attributes
          } %}
        {% endfor %}
      </div>
      <div class="form-item-column">
        {% if modifier == 'error' %}
          {% include '@field-message' with {
            "id": id ~ '-validation',
            "modifier": "error"
          } %}
        {% endif %}

        {% if modifier == 'success' %}
          {% include '@field-message' with {
            "id": id ~ '-validation',
            "modifier": "success"
          } %}
        {% endif %}
      </div>
    </div>
  </div>
</fieldset>
 
<!-- Default -->
<fieldset class="form-item ">
    <legend>
        <span class="legend-title">radio buttons</span>
    </legend>
    <div class="form-item">
        <div class="form-columns">
            <div class="form-item-column">
                <div class="radio">

                    <input type="radio" id="input-input-radio--radio-1" name="radiogroup" class="radio" />
                    <label for="input-input-radio--radio-1">Radio option 1</label>
                </div>
                <div class="radio">

                    <input type="radio" id="input-input-radio--radio-2" name="radiogroup" class="radio" />
                    <label for="input-input-radio--radio-2">Radio option 2</label>
                </div>
            </div>
            <div class="form-item-column">

            </div>
        </div>
    </div>
</fieldset>


<!-- With Error -->
<fieldset class="form-item error">
    <legend>
        <span class="legend-title">input radio with error</span>
    </legend>
    <div class="form-item">
        <div class="field-message " id="input-radio--error-description">
            You can add an optional field description here.
            <div class="accolade "></div>
        </div>
        <div class="form-columns">
            <div class="form-item-column">
                <div class="radio">

                    <input type="radio" id="input-input-radio--error-error-radio-error-1" name="radiogroup-error" class="radio error" />
                    <label for="input-input-radio--error-error-radio-error-1">Radio option 1</label>
                </div>
                <div class="radio">

                    <input type="radio" id="input-input-radio--error-error-radio-error-2" name="radiogroup-error" class="radio error" />
                    <label for="input-input-radio--error-error-radio-error-2">Radio option 2</label>
                </div>
            </div>
            <div class="form-item-column">
                <div class="field-message error" role="alert" id="input-radio--error-validation">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec laoreet, urna sit amet convallis rhoncus, felis ex.
                    <div class="accolade "></div>
                </div>

            </div>
        </div>
    </div>
</fieldset>


<!-- With Success -->
<fieldset class="form-item success">
    <legend>
        <span class="legend-title">input radio with success</span>
    </legend>
    <div class="form-item">
        <div class="field-message " id="input-radio--success-description">
            You can add an optional field description here.
            <div class="accolade "></div>
        </div>
        <div class="form-columns">
            <div class="form-item-column">
                <div class="radio">

                    <input type="radio" id="input-input-radio--success-success-radio-success-1" name="radiogroup-success" class="radio success" />
                    <label for="input-input-radio--success-success-radio-success-1">Radio option 1</label>
                </div>
                <div class="radio">

                    <input type="radio" id="input-input-radio--success-success-radio-success-2" name="radiogroup-success" class="radio success" />
                    <label for="input-input-radio--success-success-radio-success-2">Radio option 2</label>
                </div>
            </div>
            <div class="form-item-column">

                <div class="field-message success" role="alert" id="input-radio--success-validation">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec laoreet, urna sit amet convallis rhoncus, felis ex.
                    <div class="accolade "></div>
                </div>
            </div>
        </div>
    </div>
</fieldset>


<!-- Disabled -->
<fieldset class="form-item disabled">
    <legend>
        <span class="legend-title">input radio disabled</span>
    </legend>
    <div class="form-item">
        <div class="field-message " id="input-radio--disabled-description">
            You can add an optional field description here.
            <div class="accolade "></div>
        </div>
        <div class="form-columns">
            <div class="form-item-column">
                <div class="radio">

                    <input type="radio" id="input-input-radio--disabled-disabled-radio-disabled-1" name="radiogroup-disabled" class="radio disabled" disabled="disabled" />
                    <label for="input-input-radio--disabled-disabled-radio-disabled-1">Radio option 1</label>
                </div>
                <div class="radio">

                    <input type="radio" id="input-input-radio--disabled-disabled-radio-disabled-2" checked="checked" name="radiogroup-disabled" class="radio disabled" disabled="disabled" />
                    <label for="input-input-radio--disabled-disabled-radio-disabled-2">Radio option 2</label>
                </div>
            </div>
            <div class="form-item-column">

            </div>
        </div>
    </div>
</fieldset>


/* Default */
{
  "id": "input-radio",
  "label": "radio buttons",
  "options": [
    {
      "label": "Radio option 1",
      "name": "radiogroup",
      "id": "radio-1"
    },
    {
      "label": "Radio option 2",
      "name": "radiogroup",
      "id": "radio-2"
    }
  ]
}


/* With Error */
{
  "id": "input-radio--error",
  "label": "input radio with error",
  "options": [
    {
      "label": "Radio option 1",
      "name": "radiogroup-error",
      "id": "radio-error-1"
    },
    {
      "label": "Radio option 2",
      "name": "radiogroup-error",
      "id": "radio-error-2"
    }
  ],
  "modifier": "error",
  "field_description": "You can add an optional field description here.",
  "field_message": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec laoreet, urna sit amet convallis rhoncus, felis ex."
}


/* With Success */
{
  "id": "input-radio--success",
  "label": "input radio with success",
  "options": [
    {
      "label": "Radio option 1",
      "name": "radiogroup-success",
      "id": "radio-success-1"
    },
    {
      "label": "Radio option 2",
      "name": "radiogroup-success",
      "id": "radio-success-2"
    }
  ],
  "modifier": "success",
  "field_description": "You can add an optional field description here.",
  "field_message": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec laoreet, urna sit amet convallis rhoncus, felis ex."
}


/* Disabled */
{
  "id": "input-radio--disabled",
  "label": "input radio disabled",
  "options": [
    {
      "label": "Radio option 1",
      "name": "radiogroup-disabled",
      "id": "radio-disabled-1"
    },
    {
      "label": "Radio option 2",
      "name": "radiogroup-disabled",
      "id": "radio-disabled-2",
      "attributes": "checked=\"checked\""
    }
  ],
  "modifier": "disabled",
  "disabled": true,
  "field_description": "You can add an optional field description here.",
  "field_message": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec laoreet, urna sit amet convallis rhoncus, felis ex."
}