Cookies on ons.gov.uk

Cookies are small files stored on your device when you visit a website. We use some essential cookies to make this website work.

We would like to set additional cookies to remember your settings and understand how you use the site. This helps us to improve our services.

You have accepted all additional cookies. You have rejected all additional cookies. You can change your cookie preferences at any time.

Skip to main content

Radios

Overview

Radios let the user select a single option from a list.

Example Radios contents

Nunjucks

{% from "components/radios/_macro.njk" import onsRadios %}
{% from "components/question/_macro.njk" import onsQuestion %}

{% call onsQuestion({
    "title": "What type of accommodation do you live in?",
    "classes": "ons-u-mt-no",
    "legendIsQuestionTitle": true
}) %}
    {{
        onsRadios({
            "name": "property-type",
            "dontWrap": true,
            "radios": [
                {
                    "id": "house",
                    "label": {
                        "text": "House or bungalow"
                    },
                    "value": "house"
                },
                {
                    "id": "flat",
                    "label": {
                        "text": "Flat, maisonette or apartment"
                    },
                    "value": "flat"
                },
                {
                    "id": "mobile",
                    "label": {
                        "text": "Caravan or other mobile or temporary structure"
                    },
                    "value": "mobile"
                }
            ]
        })
    }}
{% endcall %}

Nunjucks macro options

NameTypeRequiredDescription
idstringfalseThe HTML id for the fieldset
classesstringfalseClasses to add to the fieldset
legendstringtrue (unless dontWrap is set)The HTML <legend> for the fieldset
legendClassesstringfalseClasses to add to the legend
descriptionstringfalseHint text following the fieldset‘s legend to help users answer
borderlessbooleanfalseSet to “true” to remove the border surrounding the input and label
namestringtrueThe name to apply to the radios
radiosarray<Radio>trueSettings for each radio
dontWrapbooleanfalseSet to “true” to prevent the radios from being wrapped in a fieldset component
legendIsQuestionTitlebooleanfalseCreates an h1 inside the legend. Use when the radios are the only fieldset on the page
valuestringfalseSet to “true” to preset the checked radio. This can also be achieved by setting the checked parameter on the Radio item to “true”.
errorError (ref)falseConfiguration for validation errors
orstringfalseText for the “Or” seperator label
clearRadiosobject<ClearRadios>falseSettings for for the clear selection button
Radio
NameTypeRequiredDescription
idstringtrueThe HTML id of the radio. Used for the label’s for attribute.
valuestringfalseThe HTML value attribute for the radio to set a preset value for the input
classesstringfalseClasses to add to the radio
checkedbooleanfalseSet to “true” to select the radio when the page loads
labelLabel (ref)trueSettings for the radio label
otherobject<OtherRadio> with arrays if using Select (ref), Checkboxes (ref) or Radios (ref)falseSettings for a nested input, select, checkboxes or radios to provide other information in addition to the radio answer. Defaults to use input.
attributesobjectfalseHTML attributes (for example, data attributes) to add to the radio input element
OtherRadio
NameTypeRequiredDescription
idstringtrueThe HTML id of the nested input. Used for the label’s for attribute.
classesstringfalseClasses to add to the nested input
namestringfalseThe HTML name attribute for the nested input
valuestringfalseThe HTML value attribute for the nested input to set a preset value for the input
labelLabel (ref)trueSettings for the nested input’s label
widthstringfalseRequired width of the nested text input in number of letters or digits. Will also accept a breakpoint suffix, for example, “7@m”. Defaults to “auto”.
typestringfalseSets the HTML type attribute for the nested <input>. Can be set to either: “number”, “email”, “tel”, “password”, or “search”. Defaults to “text”.
inputClassesstringfalseClasses to apply to the radio input element
otherTypestringfalse (unless alternative input used)Set the type of nested input if not using default text input, using available types: “select”, “checkboxes” or “radios”.
openbooleanfalseSet to “true” to show the nested other input when page loads
selectAllChildrenbooleanfalseSet to “true” when using otherType set to “checkboxes” to show all nested checkboxes pre-selected
attributesobjectfalseHTML attributes (for example, data attributes) to add to the nested input
ClearRadios
NameTypeRequiredDescription
textstringtrueThe text label for the button
namestringfalseThe HTML name attribute for the button
ariaClearTextstringtrueThe text to be announced to screen readers when a radio has been selected. For example, “You can clear your answer using the “clear selection” button after the radio inputs”.
ariaClearedTextstringtrueThe text to be announced to screen readers when the “clear selection” button has been selected. For example, “Your answer has been cleared”.

HTML

<div class="ons-question ons-u-mb-l ons-u-mt-no">
  <div class="ons-question__answer ons-u-mb-m">
    <fieldset class="ons-fieldset">
      <legend class="ons-fieldset__legend ons-u-mb-no">
        <h1 id="fieldset-legend-title" class="ons-fieldset__legend-title">What type of accommodation do you live in?
        </h1>
      </legend>
      <div class="ons-input-items">
        <div class="ons-radios__items">
          <span class="ons-radios__item">
            <span class="ons-radio">
              <input type="radio" id="house" class="ons-radio__input ons-js-radio" value="house" name="property-type">
              <label class=" ons-radio__label " for="house" id="house-label">House or bungalow</label>
            </span>
          </span>
          <br>
          <span class="ons-radios__item">
            <span class="ons-radio">
              <input type="radio" id="flat" class="ons-radio__input ons-js-radio" value="flat" name="property-type">
              <label class=" ons-radio__label " for="flat" id="flat-label">Flat, maisonette or apartment</label>
            </span>
          </span>
          <br>
          <span class="ons-radios__item">
            <span class="ons-radio">
              <input type="radio" id="mobile" class="ons-radio__input ons-js-radio" value="mobile" name="property-type">
              <label class=" ons-radio__label " for="mobile" id="mobile-label">Caravan or other mobile or temporary
                structure</label>
            </span>
          </span>
        </div>
      </div>
    </fieldset>
  </div>
</div>

When not to use this component

If users need to select more than one option from a list, use checkboxes.

How to use this component

Radios are grouped within a fieldset that starts with a <legend> which lets the user know what they need to do.

Variants

Radio with description

Use this to add more context to radio answers.

This context is added by providing a description parameter within the radio’s label parameter.

Answer descriptions are a good way to provide examples to help a user answer a question without disrupting their journey through the survey.

Descriptions are a good way to provide examples to help users answer a question without disrupting their journey.

Answer descriptions should:

  • start with a capital letter
  • be short with no more than 100 characters
  • be relevant to that answer only, not any of the other answers
  • be clearly written
  • not have a full stop on the end

Example Radios With Descriptions contents

Nunjucks
{% from "components/radios/_macro.njk" import onsRadios %}
{% from "components/question/_macro.njk" import onsQuestion %}

{% call onsQuestion({
    "title": "What is your ethnic group or background?",
    "classes": "ons-u-mt-no",
    "legendIsQuestionTitle": true
}) %}
    {{
        onsRadios({
            "dontWrap": true,
            "name": "ethnicity",
            "radios": [
                {
                    "id": "white-example-radio-with-description",
                    "label": {
                        "text": "White",
                        "description": "Includes British, Northern Irish, Irish, Gypsy, Irish Traveller, Roma or any other White background"
                    },
                    "name": "white"
                },
                {
                    "id": "mixed-example-radio-with-description",
                    "label": {
                        "text": "Mixed or Multiple ethnic groups",
                        "description": "Includes White and Black Caribbean, White and Black African, White and Asian or any other Mixed or Multiple background"
                    },
                    "name": "mixed"
                },
                {
                    "id": "asian-example-radio-with-description",
                    "label": {
                        "text": "Asian or Asian British",
                        "description": "Includes Indian, Pakistani, Bangladeshi, Chinese or any other Asian background"
                    },
                    "name": "asian"
                },
                {
                    "id": "black-example-radio-with-description",
                    "label": {
                        "text": "Black, Black British, Caribbean or African",
                        "description": "Includes Black British, Caribbean, African or any other Black background"
                    },
                    "name": "black"
                },
                {
                    "id": "other-example-radio-with-description",
                    "label": {
                        "text": "Other ethnic group",
                        "description": "Includes Arab or any other ethnic group"
                    },
                    "name": "other"
                }
            ]
        })
    }}
{% endcall %}
Nunjucks macro options
NameTypeRequiredDescription
idstringfalseThe HTML id for the fieldset
classesstringfalseClasses to add to the fieldset
legendstringtrue (unless dontWrap is set)The HTML <legend> for the fieldset
legendClassesstringfalseClasses to add to the legend
descriptionstringfalseHint text following the fieldset‘s legend to help users answer
borderlessbooleanfalseSet to “true” to remove the border surrounding the input and label
namestringtrueThe name to apply to the radios
radiosarray<Radio>trueSettings for each radio
dontWrapbooleanfalseSet to “true” to prevent the radios from being wrapped in a fieldset component
legendIsQuestionTitlebooleanfalseCreates an h1 inside the legend. Use when the radios are the only fieldset on the page
valuestringfalseSet to “true” to preset the checked radio. This can also be achieved by setting the checked parameter on the Radio item to “true”.
errorError (ref)falseConfiguration for validation errors
orstringfalseText for the “Or” seperator label
clearRadiosobject<ClearRadios>falseSettings for for the clear selection button
Radio
NameTypeRequiredDescription
idstringtrueThe HTML id of the radio. Used for the label’s for attribute.
valuestringfalseThe HTML value attribute for the radio to set a preset value for the input
classesstringfalseClasses to add to the radio
checkedbooleanfalseSet to “true” to select the radio when the page loads
labelLabel (ref)trueSettings for the radio label
otherobject<OtherRadio> with arrays if using Select (ref), Checkboxes (ref) or Radios (ref)falseSettings for a nested input, select, checkboxes or radios to provide other information in addition to the radio answer. Defaults to use input.
attributesobjectfalseHTML attributes (for example, data attributes) to add to the radio input element
OtherRadio
NameTypeRequiredDescription
idstringtrueThe HTML id of the nested input. Used for the label’s for attribute.
classesstringfalseClasses to add to the nested input
namestringfalseThe HTML name attribute for the nested input
valuestringfalseThe HTML value attribute for the nested input to set a preset value for the input
labelLabel (ref)trueSettings for the nested input’s label
widthstringfalseRequired width of the nested text input in number of letters or digits. Will also accept a breakpoint suffix, for example, “7@m”. Defaults to “auto”.
typestringfalseSets the HTML type attribute for the nested <input>. Can be set to either: “number”, “email”, “tel”, “password”, or “search”. Defaults to “text”.
inputClassesstringfalseClasses to apply to the radio input element
otherTypestringfalse (unless alternative input used)Set the type of nested input if not using default text input, using available types: “select”, “checkboxes” or “radios”.
openbooleanfalseSet to “true” to show the nested other input when page loads
selectAllChildrenbooleanfalseSet to “true” when using otherType set to “checkboxes” to show all nested checkboxes pre-selected
attributesobjectfalseHTML attributes (for example, data attributes) to add to the nested input
ClearRadios
NameTypeRequiredDescription
textstringtrueThe text label for the button
namestringfalseThe HTML name attribute for the button
ariaClearTextstringtrueThe text to be announced to screen readers when a radio has been selected. For example, “You can clear your answer using the “clear selection” button after the radio inputs”.
ariaClearedTextstringtrueThe text to be announced to screen readers when the “clear selection” button has been selected. For example, “Your answer has been cleared”.
HTML
<div class="ons-question ons-u-mb-l ons-u-mt-no">
  <div class="ons-question__answer ons-u-mb-m">
    <fieldset class="ons-fieldset">
      <legend class="ons-fieldset__legend ons-u-mb-no">
        <h1 id="fieldset-legend-title" class="ons-fieldset__legend-title">What is your ethnic group or background?</h1>
      </legend>
      <div class="ons-input-items">
        <div class="ons-radios__items">
          <span class="ons-radios__item">
            <span class="ons-radio">
              <input type="radio" id="white-example-radio-with-description" class="ons-radio__input ons-js-radio"
                value="" name="ethnicity">
              <label class=" ons-radio__label  ons-label--with-description"
                aria-describedby="white-example-radio-with-description-label-description-hint"
                for="white-example-radio-with-description" id="white-example-radio-with-description-label">White<span
                  class="ons-label__aria-hidden-description" aria-hidden="true">
                  <span class="ons-label__description ons-radio__label--with-description">Includes British, Northern
                    Irish, Irish, Gypsy, Irish Traveller, Roma or any other White background</span></span></label>
              <span class="ons-label__visually-hidden-description ons-u-vh"
                id="white-example-radio-with-description-label-description-hint">Includes British, Northern Irish,
                Irish, Gypsy, Irish Traveller, Roma or any other White background</span>
            </span>
          </span>
          <br>
          <span class="ons-radios__item">
            <span class="ons-radio">
              <input type="radio" id="mixed-example-radio-with-description" class="ons-radio__input ons-js-radio"
                value="" name="ethnicity">
              <label class=" ons-radio__label  ons-label--with-description"
                aria-describedby="mixed-example-radio-with-description-label-description-hint"
                for="mixed-example-radio-with-description" id="mixed-example-radio-with-description-label">Mixed or
                Multiple ethnic groups<span class="ons-label__aria-hidden-description" aria-hidden="true">
                  <span class="ons-label__description ons-radio__label--with-description">Includes White and Black
                    Caribbean, White and Black African, White and Asian or any other Mixed or Multiple
                    background</span></span></label>
              <span class="ons-label__visually-hidden-description ons-u-vh"
                id="mixed-example-radio-with-description-label-description-hint">Includes White and Black Caribbean,
                White and Black African, White and Asian or any other Mixed or Multiple background</span>
            </span>
          </span>
          <br>
          <span class="ons-radios__item">
            <span class="ons-radio">
              <input type="radio" id="asian-example-radio-with-description" class="ons-radio__input ons-js-radio"
                value="" name="ethnicity">
              <label class=" ons-radio__label  ons-label--with-description"
                aria-describedby="asian-example-radio-with-description-label-description-hint"
                for="asian-example-radio-with-description" id="asian-example-radio-with-description-label">Asian or
                Asian British<span class="ons-label__aria-hidden-description" aria-hidden="true">
                  <span class="ons-label__description ons-radio__label--with-description">Includes Indian, Pakistani,
                    Bangladeshi, Chinese or any other Asian background</span></span></label>
              <span class="ons-label__visually-hidden-description ons-u-vh"
                id="asian-example-radio-with-description-label-description-hint">Includes Indian, Pakistani,
                Bangladeshi, Chinese or any other Asian background</span>
            </span>
          </span>
          <br>
          <span class="ons-radios__item">
            <span class="ons-radio">
              <input type="radio" id="black-example-radio-with-description" class="ons-radio__input ons-js-radio"
                value="" name="ethnicity">
              <label class=" ons-radio__label  ons-label--with-description"
                aria-describedby="black-example-radio-with-description-label-description-hint"
                for="black-example-radio-with-description" id="black-example-radio-with-description-label">Black, Black
                British, Caribbean or African<span class="ons-label__aria-hidden-description" aria-hidden="true">
                  <span class="ons-label__description ons-radio__label--with-description">Includes Black British,
                    Caribbean, African or any other Black background</span></span></label>
              <span class="ons-label__visually-hidden-description ons-u-vh"
                id="black-example-radio-with-description-label-description-hint">Includes Black British, Caribbean,
                African or any other Black background</span>
            </span>
          </span>
          <br>
          <span class="ons-radios__item">
            <span class="ons-radio">
              <input type="radio" id="other-example-radio-with-description" class="ons-radio__input ons-js-radio"
                value="" name="ethnicity">
              <label class=" ons-radio__label  ons-label--with-description"
                aria-describedby="other-example-radio-with-description-label-description-hint"
                for="other-example-radio-with-description" id="other-example-radio-with-description-label">Other ethnic
                group<span class="ons-label__aria-hidden-description" aria-hidden="true">
                  <span class="ons-label__description ons-radio__label--with-description">Includes Arab or any other
                    ethnic group</span></span></label>
              <span class="ons-label__visually-hidden-description ons-u-vh"
                id="other-example-radio-with-description-label-description-hint">Includes Arab or any other ethnic
                group</span>
            </span>
          </span>
        </div>
      </div>
    </fieldset>
  </div>
</div>

Radio with input

Use this to allow users to provide additional text information about their answer or an answer other than the options displayed in the list.

Radio with visible input

This variant shows the input instead of waiting for the radio to be :checked.

Example Radios With Visible Text Input contents
Nunjucks
{% from "components/radios/_macro.njk" import onsRadios %}
{% from "components/question/_macro.njk" import onsQuestion %}

{% call onsQuestion({
    "title": "Is the gender you identify with the same as your sex registered at birth?",
    "classes": "ons-u-mt-no",
    "legendIsQuestionTitle": true
}) %}
    {{
        onsRadios({
            "dontWrap": true,
            "name": "gender-identity",
            "radios": [
                {
                    "id": "yes-example-radio-with-visible-text",
                    "label": {
                        "text": "Yes"
                    },
                    "value": "yes"
                },
                {
                    "id": "no-example-radio-with-visible-text",
                    "label": {
                        "text": "No"
                    },
                    "value": "no",
                    "other": {
                        "open": true,
                        "otherType": "input",
                        "id": "no-textbox-example-radio-with-visible-text",
                        "name": "no-answer",
                        "label": {
                            "text": "Enter your gender identity"
                        }
                    }
                }
            ]
        })
    }}
{% endcall %}
Nunjucks macro options
NameTypeRequiredDescription
idstringfalseThe HTML id for the fieldset
classesstringfalseClasses to add to the fieldset
legendstringtrue (unless dontWrap is set)The HTML <legend> for the fieldset
legendClassesstringfalseClasses to add to the legend
descriptionstringfalseHint text following the fieldset‘s legend to help users answer
borderlessbooleanfalseSet to “true” to remove the border surrounding the input and label
namestringtrueThe name to apply to the radios
radiosarray<Radio>trueSettings for each radio
dontWrapbooleanfalseSet to “true” to prevent the radios from being wrapped in a fieldset component
legendIsQuestionTitlebooleanfalseCreates an h1 inside the legend. Use when the radios are the only fieldset on the page
valuestringfalseSet to “true” to preset the checked radio. This can also be achieved by setting the checked parameter on the Radio item to “true”.
errorError (ref)falseConfiguration for validation errors
orstringfalseText for the “Or” seperator label
clearRadiosobject<ClearRadios>falseSettings for for the clear selection button
Radio
NameTypeRequiredDescription
idstringtrueThe HTML id of the radio. Used for the label’s for attribute.
valuestringfalseThe HTML value attribute for the radio to set a preset value for the input
classesstringfalseClasses to add to the radio
checkedbooleanfalseSet to “true” to select the radio when the page loads
labelLabel (ref)trueSettings for the radio label
otherobject<OtherRadio> with arrays if using Select (ref), Checkboxes (ref) or Radios (ref)falseSettings for a nested input, select, checkboxes or radios to provide other information in addition to the radio answer. Defaults to use input.
attributesobjectfalseHTML attributes (for example, data attributes) to add to the radio input element
OtherRadio
NameTypeRequiredDescription
idstringtrueThe HTML id of the nested input. Used for the label’s for attribute.
classesstringfalseClasses to add to the nested input
namestringfalseThe HTML name attribute for the nested input
valuestringfalseThe HTML value attribute for the nested input to set a preset value for the input
labelLabel (ref)trueSettings for the nested input’s label
widthstringfalseRequired width of the nested text input in number of letters or digits. Will also accept a breakpoint suffix, for example, “7@m”. Defaults to “auto”.
typestringfalseSets the HTML type attribute for the nested <input>. Can be set to either: “number”, “email”, “tel”, “password”, or “search”. Defaults to “text”.
inputClassesstringfalseClasses to apply to the radio input element
otherTypestringfalse (unless alternative input used)Set the type of nested input if not using default text input, using available types: “select”, “checkboxes” or “radios”.
openbooleanfalseSet to “true” to show the nested other input when page loads
selectAllChildrenbooleanfalseSet to “true” when using otherType set to “checkboxes” to show all nested checkboxes pre-selected
attributesobjectfalseHTML attributes (for example, data attributes) to add to the nested input
ClearRadios
NameTypeRequiredDescription
textstringtrueThe text label for the button
namestringfalseThe HTML name attribute for the button
ariaClearTextstringtrueThe text to be announced to screen readers when a radio has been selected. For example, “You can clear your answer using the “clear selection” button after the radio inputs”.
ariaClearedTextstringtrueThe text to be announced to screen readers when the “clear selection” button has been selected. For example, “Your answer has been cleared”.
HTML
<div class="ons-question ons-u-mb-l ons-u-mt-no">
  <div class="ons-question__answer ons-u-mb-m">
    <fieldset class="ons-fieldset">
      <legend class="ons-fieldset__legend ons-u-mb-no">
        <h1 id="fieldset-legend-title" class="ons-fieldset__legend-title">Is the gender you identify with the same as
          your sex registered at birth?</h1>
      </legend>
      <div class="ons-input-items">
        <div class="ons-radios__items">
          <span class="ons-radios__item">
            <span class="ons-radio">
              <input type="radio" id="yes-example-radio-with-visible-text" class="ons-radio__input ons-js-radio"
                value="yes" name="gender-identity">
              <label class=" ons-radio__label " for="yes-example-radio-with-visible-text"
                id="yes-example-radio-with-visible-text-label">Yes</label>
            </span>
          </span>
          <br>
          <span class="ons-radios__item">
            <span class="ons-radio">
              <input type="radio" id="no-example-radio-with-visible-text"
                class="ons-radio__input ons-js-radio ons-js-other" value="no" name="gender-identity">
              <label class=" ons-radio__label " for="no-example-radio-with-visible-text"
                id="no-example-radio-with-visible-text-label">No</label>
              <span class="ons-radio__other ons-radio__other--open" id="no-example-radio-with-visible-text-other-wrap">
                <label class="ons-label ons-u-fw-n" for="no-textbox-example-radio-with-visible-text"
                  id="no-textbox-example-radio-with-visible-text-label">Enter your gender identity</label>
                <input type="text" id="no-textbox-example-radio-with-visible-text"
                  class="ons-input ons-input--text ons-input-type__input ons-input--w-auto" name="no-answer" />
              </span>
            </span>
          </span>
        </div>
      </div>
    </fieldset>
  </div>
</div>

Radio with revealed input

This input field is hidden until the radio is :checked.

Provide the other parameter and provide the relevant input parameters.

Example Radios With Revealed Text Input contents
Nunjucks
{% from "components/radios/_macro.njk" import onsRadios %}
{% from "components/question/_macro.njk" import onsQuestion %}

{% call onsQuestion({
    "title": "How do you usually travel to work?",
    "classes": "ons-u-mt-no",
    "legendIsQuestionTitle": true
}) %}
    {{
        onsRadios({
            "dontWrap": true,
            "name": "travel",
            "radios": [
                {
                    "id": "home-example-radio-with-revealed-text-input",
                    "label": {
                        "text": "Work mainly from home"
                    },
                    "value": "home"
                },
                {
                    "id": "car-example-radio-with-revealed-text-input",
                    "label": {
                        "text": "Car or van"
                    },
                    "value": "car"
                },
                {
                    "id": "underground-example-radio-with-revealed-text-input",
                    "label": {
                        "text": "Underground, metro, light rail or tram"
                    },
                    "value": "underground"
                },
                {
                    "id": "train-example-radio-with-revealed-text-input",
                    "label": {
                        "text": "Train"
                    },
                    "value": "train"
                },
                {
                    "id": "bus-example-radio-with-revealed-text-input",
                    "label": {
                        "text": "Bus, minibus or coach"
                    },
                    "value": "bus"
                },
                {
                    "id": "bicycle-example-radio-with-revealed-text-input",
                    "label": {
                        "text": "Bicycle"
                    },
                    "value": "bicycle"
                },
                {
                    "id": "walk-example-radio-with-revealed-text-input",
                    "label": {
                        "text": "Walk"
                    },
                    "value": "walk"
                },
                {
                    "id": "other-radio-example-radio-with-revealed-text-input",
                    "label": {
                        "text": "Other"
                    },
                    "value": "other",
                    "other": {
                        "id": "other-textbox-example-radio-with-revealed-text-input",
                        "name": "other-answer",
                        "label": {
                            "text": "Enter how you travel"
                        }
                    }
                }
            ]
        })
    }}
{% endcall %}
Nunjucks macro options
NameTypeRequiredDescription
idstringfalseThe HTML id for the fieldset
classesstringfalseClasses to add to the fieldset
legendstringtrue (unless dontWrap is set)The HTML <legend> for the fieldset
legendClassesstringfalseClasses to add to the legend
descriptionstringfalseHint text following the fieldset‘s legend to help users answer
borderlessbooleanfalseSet to “true” to remove the border surrounding the input and label
namestringtrueThe name to apply to the radios
radiosarray<Radio>trueSettings for each radio
dontWrapbooleanfalseSet to “true” to prevent the radios from being wrapped in a fieldset component
legendIsQuestionTitlebooleanfalseCreates an h1 inside the legend. Use when the radios are the only fieldset on the page
valuestringfalseSet to “true” to preset the checked radio. This can also be achieved by setting the checked parameter on the Radio item to “true”.
errorError (ref)falseConfiguration for validation errors
orstringfalseText for the “Or” seperator label
clearRadiosobject<ClearRadios>falseSettings for for the clear selection button
Radio
NameTypeRequiredDescription
idstringtrueThe HTML id of the radio. Used for the label’s for attribute.
valuestringfalseThe HTML value attribute for the radio to set a preset value for the input
classesstringfalseClasses to add to the radio
checkedbooleanfalseSet to “true” to select the radio when the page loads
labelLabel (ref)trueSettings for the radio label
otherobject<OtherRadio> with arrays if using Select (ref), Checkboxes (ref) or Radios (ref)falseSettings for a nested input, select, checkboxes or radios to provide other information in addition to the radio answer. Defaults to use input.
attributesobjectfalseHTML attributes (for example, data attributes) to add to the radio input element
OtherRadio
NameTypeRequiredDescription
idstringtrueThe HTML id of the nested input. Used for the label’s for attribute.
classesstringfalseClasses to add to the nested input
namestringfalseThe HTML name attribute for the nested input
valuestringfalseThe HTML value attribute for the nested input to set a preset value for the input
labelLabel (ref)trueSettings for the nested input’s label
widthstringfalseRequired width of the nested text input in number of letters or digits. Will also accept a breakpoint suffix, for example, “7@m”. Defaults to “auto”.
typestringfalseSets the HTML type attribute for the nested <input>. Can be set to either: “number”, “email”, “tel”, “password”, or “search”. Defaults to “text”.
inputClassesstringfalseClasses to apply to the radio input element
otherTypestringfalse (unless alternative input used)Set the type of nested input if not using default text input, using available types: “select”, “checkboxes” or “radios”.
openbooleanfalseSet to “true” to show the nested other input when page loads
selectAllChildrenbooleanfalseSet to “true” when using otherType set to “checkboxes” to show all nested checkboxes pre-selected
attributesobjectfalseHTML attributes (for example, data attributes) to add to the nested input
ClearRadios
NameTypeRequiredDescription
textstringtrueThe text label for the button
namestringfalseThe HTML name attribute for the button
ariaClearTextstringtrueThe text to be announced to screen readers when a radio has been selected. For example, “You can clear your answer using the “clear selection” button after the radio inputs”.
ariaClearedTextstringtrueThe text to be announced to screen readers when the “clear selection” button has been selected. For example, “Your answer has been cleared”.
HTML
<div class="ons-question ons-u-mb-l ons-u-mt-no">
  <div class="ons-question__answer ons-u-mb-m">
    <fieldset class="ons-fieldset">
      <legend class="ons-fieldset__legend ons-u-mb-no">
        <h1 id="fieldset-legend-title" class="ons-fieldset__legend-title">How do you usually travel to work?</h1>
      </legend>
      <div class="ons-input-items">
        <div class="ons-radios__items">
          <span class="ons-radios__item">
            <span class="ons-radio">
              <input type="radio" id="home-example-radio-with-revealed-text-input" class="ons-radio__input ons-js-radio"
                value="home" name="travel">
              <label class=" ons-radio__label " for="home-example-radio-with-revealed-text-input"
                id="home-example-radio-with-revealed-text-input-label">Work mainly from home</label>
            </span>
          </span>
          <br>
          <span class="ons-radios__item">
            <span class="ons-radio">
              <input type="radio" id="car-example-radio-with-revealed-text-input" class="ons-radio__input ons-js-radio"
                value="car" name="travel">
              <label class=" ons-radio__label " for="car-example-radio-with-revealed-text-input"
                id="car-example-radio-with-revealed-text-input-label">Car or van</label>
            </span>
          </span>
          <br>
          <span class="ons-radios__item">
            <span class="ons-radio">
              <input type="radio" id="underground-example-radio-with-revealed-text-input"
                class="ons-radio__input ons-js-radio" value="underground" name="travel">
              <label class=" ons-radio__label " for="underground-example-radio-with-revealed-text-input"
                id="underground-example-radio-with-revealed-text-input-label">Underground, metro, light rail or
                tram</label>
            </span>
          </span>
          <br>
          <span class="ons-radios__item">
            <span class="ons-radio">
              <input type="radio" id="train-example-radio-with-revealed-text-input"
                class="ons-radio__input ons-js-radio" value="train" name="travel">
              <label class=" ons-radio__label " for="train-example-radio-with-revealed-text-input"
                id="train-example-radio-with-revealed-text-input-label">Train</label>
            </span>
          </span>
          <br>
          <span class="ons-radios__item">
            <span class="ons-radio">
              <input type="radio" id="bus-example-radio-with-revealed-text-input" class="ons-radio__input ons-js-radio"
                value="bus" name="travel">
              <label class=" ons-radio__label " for="bus-example-radio-with-revealed-text-input"
                id="bus-example-radio-with-revealed-text-input-label">Bus, minibus or coach</label>
            </span>
          </span>
          <br>
          <span class="ons-radios__item">
            <span class="ons-radio">
              <input type="radio" id="bicycle-example-radio-with-revealed-text-input"
                class="ons-radio__input ons-js-radio" value="bicycle" name="travel">
              <label class=" ons-radio__label " for="bicycle-example-radio-with-revealed-text-input"
                id="bicycle-example-radio-with-revealed-text-input-label">Bicycle</label>
            </span>
          </span>
          <br>
          <span class="ons-radios__item">
            <span class="ons-radio">
              <input type="radio" id="walk-example-radio-with-revealed-text-input" class="ons-radio__input ons-js-radio"
                value="walk" name="travel">
              <label class=" ons-radio__label " for="walk-example-radio-with-revealed-text-input"
                id="walk-example-radio-with-revealed-text-input-label">Walk</label>
            </span>
          </span>
          <br>
          <span class="ons-radios__item">
            <span class="ons-radio">
              <input type="radio" id="other-radio-example-radio-with-revealed-text-input"
                class="ons-radio__input ons-js-radio ons-js-other" value="other" name="travel"
                aria-controls="other-radio-example-radio-with-revealed-text-input-other-wrap" aria-haspopup="true">
              <label class=" ons-radio__label " for="other-radio-example-radio-with-revealed-text-input"
                id="other-radio-example-radio-with-revealed-text-input-label">Other</label>
              <span class="ons-radio__other" id="other-radio-example-radio-with-revealed-text-input-other-wrap">
                <label class="ons-label ons-u-fw-n" for="other-textbox-example-radio-with-revealed-text-input"
                  id="other-textbox-example-radio-with-revealed-text-input-label">Enter how you travel</label>
                <input type="text" id="other-textbox-example-radio-with-revealed-text-input"
                  class="ons-input ons-input--text ons-input-type__input ons-input--w-auto" name="other-answer" />
              </span>
            </span>
          </span>
        </div>
      </div>
    </fieldset>
  </div>
</div>

Radio with revealed select

Use this component where you need a user to add further multiple-choice information about their answer.

This variant uses a select component.

To use this variant provide "otherType": "select" inside the other parameter.

Example Radios With Revealed Select contents

Nunjucks
{% from "components/question/_macro.njk" import onsQuestion %}
{% from "components/radios/_macro.njk" import onsRadios %}

{% call onsQuestion({
    "title": "How would you like us to contact you?",
    "legendIsQuestionTitle": true
}) %}
    {{
        onsRadios({
            "dontWrap": true,
            "name": "contact",
            "radios": [
                {
                    "id": "post-example-with-revealed-select",
                    "label": {
                        "text": "By post"
                    },
                    "value": "post"
                },
                {
                    "id": "email-example-with-revealed-select",
                    "label": {
                        "text": "By email"
                    },
                    "value": "email"
                },
                {
                    "id": "phone-example-with-revealed-select",
                    "label": {
                        "text": "By phone"
                    },
                    "value": "phone",
                    "other": {
                        "otherType": "select",
                        "id": "phone-time-example-with-revealed-select",
                        "name": "phone-time",
                        "label": {
                            "text": "Choose preferred time of day"
                        },
                        "options": [
                            {
                                "value": "",
                                "text": "Select an option",
                                "disabled": true,
                                "selected": true
                            },
                            {
                                "value": "anytime",
                                "text": "Any time of day"
                            },
                            {
                                "value": "morning",
                                "text": "Morning"
                            },
                            {
                                "value": "afternoon",
                                "text": "Afternoon"
                            },
                            {
                                "value": "evening",
                                "text": "Evening"
                            }
                        ]
                    }
                }
            ]
        })
    }}
{% endcall %}
Nunjucks macro options
NameTypeRequiredDescription
idstringfalseThe HTML id for the fieldset
classesstringfalseClasses to add to the fieldset
legendstringtrue (unless dontWrap is set)The HTML <legend> for the fieldset
legendClassesstringfalseClasses to add to the legend
descriptionstringfalseHint text following the fieldset‘s legend to help users answer
borderlessbooleanfalseSet to “true” to remove the border surrounding the input and label
namestringtrueThe name to apply to the radios
radiosarray<Radio>trueSettings for each radio
dontWrapbooleanfalseSet to “true” to prevent the radios from being wrapped in a fieldset component
legendIsQuestionTitlebooleanfalseCreates an h1 inside the legend. Use when the radios are the only fieldset on the page
valuestringfalseSet to “true” to preset the checked radio. This can also be achieved by setting the checked parameter on the Radio item to “true”.
errorError (ref)falseConfiguration for validation errors
orstringfalseText for the “Or” seperator label
clearRadiosobject<ClearRadios>falseSettings for for the clear selection button
Radio
NameTypeRequiredDescription
idstringtrueThe HTML id of the radio. Used for the label’s for attribute.
valuestringfalseThe HTML value attribute for the radio to set a preset value for the input
classesstringfalseClasses to add to the radio
checkedbooleanfalseSet to “true” to select the radio when the page loads
labelLabel (ref)trueSettings for the radio label
otherobject<OtherRadio> with arrays if using Select (ref), Checkboxes (ref) or Radios (ref)falseSettings for a nested input, select, checkboxes or radios to provide other information in addition to the radio answer. Defaults to use input.
attributesobjectfalseHTML attributes (for example, data attributes) to add to the radio input element
OtherRadio
NameTypeRequiredDescription
idstringtrueThe HTML id of the nested input. Used for the label’s for attribute.
classesstringfalseClasses to add to the nested input
namestringfalseThe HTML name attribute for the nested input
valuestringfalseThe HTML value attribute for the nested input to set a preset value for the input
labelLabel (ref)trueSettings for the nested input’s label
widthstringfalseRequired width of the nested text input in number of letters or digits. Will also accept a breakpoint suffix, for example, “7@m”. Defaults to “auto”.
typestringfalseSets the HTML type attribute for the nested <input>. Can be set to either: “number”, “email”, “tel”, “password”, or “search”. Defaults to “text”.
inputClassesstringfalseClasses to apply to the radio input element
otherTypestringfalse (unless alternative input used)Set the type of nested input if not using default text input, using available types: “select”, “checkboxes” or “radios”.
openbooleanfalseSet to “true” to show the nested other input when page loads
selectAllChildrenbooleanfalseSet to “true” when using otherType set to “checkboxes” to show all nested checkboxes pre-selected
attributesobjectfalseHTML attributes (for example, data attributes) to add to the nested input
ClearRadios
NameTypeRequiredDescription
textstringtrueThe text label for the button
namestringfalseThe HTML name attribute for the button
ariaClearTextstringtrueThe text to be announced to screen readers when a radio has been selected. For example, “You can clear your answer using the “clear selection” button after the radio inputs”.
ariaClearedTextstringtrueThe text to be announced to screen readers when the “clear selection” button has been selected. For example, “Your answer has been cleared”.
HTML
<div class="ons-question ons-u-mb-l">
  <div class="ons-question__answer ons-u-mb-m">
    <fieldset class="ons-fieldset">
      <legend class="ons-fieldset__legend ons-u-mb-no">
        <h1 id="fieldset-legend-title" class="ons-fieldset__legend-title">How would you like us to contact you?</h1>
      </legend>
      <div class="ons-input-items">
        <div class="ons-radios__items">
          <span class="ons-radios__item">
            <span class="ons-radio">
              <input type="radio" id="post-example-with-revealed-select" class="ons-radio__input ons-js-radio"
                value="post" name="contact">
              <label class=" ons-radio__label " for="post-example-with-revealed-select"
                id="post-example-with-revealed-select-label">By post</label>
            </span>
          </span>
          <br>
          <span class="ons-radios__item">
            <span class="ons-radio">
              <input type="radio" id="email-example-with-revealed-select" class="ons-radio__input ons-js-radio"
                value="email" name="contact">
              <label class=" ons-radio__label " for="email-example-with-revealed-select"
                id="email-example-with-revealed-select-label">By email</label>
            </span>
          </span>
          <br>
          <span class="ons-radios__item">
            <span class="ons-radio">
              <input type="radio" id="phone-example-with-revealed-select"
                class="ons-radio__input ons-js-radio ons-js-other" value="phone" name="contact"
                aria-controls="phone-example-with-revealed-select-other-wrap" aria-haspopup="true">
              <label class=" ons-radio__label " for="phone-example-with-revealed-select"
                id="phone-example-with-revealed-select-label">By phone</label>
              <span class="ons-radio__other" id="phone-example-with-revealed-select-other-wrap">
                <label class="ons-label ons-u-fw-n" for="phone-time-example-with-revealed-select">Choose preferred time
                  of day</label>
                <select id="phone-time-example-with-revealed-select" name="phone-time"
                  class="ons-input ons-input--select">
                  <option value="" selected disabled>Select an option</option>
                  <option value="anytime">Any time of day</option>
                  <option value="morning">Morning</option>
                  <option value="afternoon">Afternoon</option>
                  <option value="evening">Evening</option>
                </select>
              </span>
            </span>
          </span>
        </div>
      </div>
    </fieldset>
  </div>
</div>

Radios with an “or” separator

Example Radios With Separator contents

Nunjucks
{% from "components/question/_macro.njk" import onsQuestion %}
{% from "components/radios/_macro.njk" import onsRadios %}

{% call onsQuestion({
    "title": "How satisfied are you with this service?",
    "legendIsQuestionTitle": true
}) %}
    {{
        onsRadios({
            "dontWrap": true,
            "name": "satisfaction",
            "or": "Or",
            "radios": [
                {
                    "id": "very-satisfied",
                    "label": {
                        "text": "Very satisfied"
                    },
                    "value": "very-satisfied"
                },
                {
                    "id": "somewhat-satisfied",
                    "label": {
                        "text": "Somewhat satisfied"
                    },
                    "value": "somewhat-satisfied"
                },
                {
                    "id": "neither",
                    "label": {
                        "text": "Neither satisfied or dissatisfied"
                    },
                    "value": "neither"
                },
                {
                    "id": "somewhat-dissatisfied",
                    "label": {
                        "text": "Somewhat dissatisfied"
                    },
                    "value": "somewhat-dissatisfied"
                },
                {
                    "id": "very-dissatisfied",
                    "label": {
                        "text": "Very dissatisfied"
                    },
                    "value": "very-dissatisfied"
                },
                {
                    "id": "no",
                    "label": {
                        "text": "I don’t want to give feedback"
                    },
                    "value": "no"
                }
            ]
        })
    }}
{% endcall %}
Nunjucks macro options
NameTypeRequiredDescription
idstringfalseThe HTML id for the fieldset
classesstringfalseClasses to add to the fieldset
legendstringtrue (unless dontWrap is set)The HTML <legend> for the fieldset
legendClassesstringfalseClasses to add to the legend
descriptionstringfalseHint text following the fieldset‘s legend to help users answer
borderlessbooleanfalseSet to “true” to remove the border surrounding the input and label
namestringtrueThe name to apply to the radios
radiosarray<Radio>trueSettings for each radio
dontWrapbooleanfalseSet to “true” to prevent the radios from being wrapped in a fieldset component
legendIsQuestionTitlebooleanfalseCreates an h1 inside the legend. Use when the radios are the only fieldset on the page
valuestringfalseSet to “true” to preset the checked radio. This can also be achieved by setting the checked parameter on the Radio item to “true”.
errorError (ref)falseConfiguration for validation errors
orstringfalseText for the “Or” seperator label
clearRadiosobject<ClearRadios>falseSettings for for the clear selection button
Radio
NameTypeRequiredDescription
idstringtrueThe HTML id of the radio. Used for the label’s for attribute.
valuestringfalseThe HTML value attribute for the radio to set a preset value for the input
classesstringfalseClasses to add to the radio
checkedbooleanfalseSet to “true” to select the radio when the page loads
labelLabel (ref)trueSettings for the radio label
otherobject<OtherRadio> with arrays if using Select (ref), Checkboxes (ref) or Radios (ref)falseSettings for a nested input, select, checkboxes or radios to provide other information in addition to the radio answer. Defaults to use input.
attributesobjectfalseHTML attributes (for example, data attributes) to add to the radio input element
OtherRadio
NameTypeRequiredDescription
idstringtrueThe HTML id of the nested input. Used for the label’s for attribute.
classesstringfalseClasses to add to the nested input
namestringfalseThe HTML name attribute for the nested input
valuestringfalseThe HTML value attribute for the nested input to set a preset value for the input
labelLabel (ref)trueSettings for the nested input’s label
widthstringfalseRequired width of the nested text input in number of letters or digits. Will also accept a breakpoint suffix, for example, “7@m”. Defaults to “auto”.
typestringfalseSets the HTML type attribute for the nested <input>. Can be set to either: “number”, “email”, “tel”, “password”, or “search”. Defaults to “text”.
inputClassesstringfalseClasses to apply to the radio input element
otherTypestringfalse (unless alternative input used)Set the type of nested input if not using default text input, using available types: “select”, “checkboxes” or “radios”.
openbooleanfalseSet to “true” to show the nested other input when page loads
selectAllChildrenbooleanfalseSet to “true” when using otherType set to “checkboxes” to show all nested checkboxes pre-selected
attributesobjectfalseHTML attributes (for example, data attributes) to add to the nested input
ClearRadios
NameTypeRequiredDescription
textstringtrueThe text label for the button
namestringfalseThe HTML name attribute for the button
ariaClearTextstringtrueThe text to be announced to screen readers when a radio has been selected. For example, “You can clear your answer using the “clear selection” button after the radio inputs”.
ariaClearedTextstringtrueThe text to be announced to screen readers when the “clear selection” button has been selected. For example, “Your answer has been cleared”.
HTML
<div class="ons-question ons-u-mb-l">
  <div class="ons-question__answer ons-u-mb-m">
    <fieldset class="ons-fieldset">
      <legend class="ons-fieldset__legend ons-u-mb-no">
        <h1 id="fieldset-legend-title" class="ons-fieldset__legend-title">How satisfied are you with this service?</h1>
      </legend>
      <div class="ons-input-items">
        <div class="ons-radios__items">
          <span class="ons-radios__item">
            <span class="ons-radio">
              <input type="radio" id="very-satisfied" class="ons-radio__input ons-js-radio" value="very-satisfied"
                name="satisfaction">
              <label class=" ons-radio__label " for="very-satisfied" id="very-satisfied-label">Very satisfied</label>
            </span>
          </span>
          <br>
          <span class="ons-radios__item">
            <span class="ons-radio">
              <input type="radio" id="somewhat-satisfied" class="ons-radio__input ons-js-radio"
                value="somewhat-satisfied" name="satisfaction">
              <label class=" ons-radio__label " for="somewhat-satisfied" id="somewhat-satisfied-label">Somewhat
                satisfied</label>
            </span>
          </span>
          <br>
          <span class="ons-radios__item">
            <span class="ons-radio">
              <input type="radio" id="neither" class="ons-radio__input ons-js-radio" value="neither"
                name="satisfaction">
              <label class=" ons-radio__label " for="neither" id="neither-label">Neither satisfied or
                dissatisfied</label>
            </span>
          </span>
          <br>
          <span class="ons-radios__item">
            <span class="ons-radio">
              <input type="radio" id="somewhat-dissatisfied" class="ons-radio__input ons-js-radio"
                value="somewhat-dissatisfied" name="satisfaction">
              <label class=" ons-radio__label " for="somewhat-dissatisfied" id="somewhat-dissatisfied-label">Somewhat
                dissatisfied</label>
            </span>
          </span>
          <br>
          <span class="ons-radios__item">
            <span class="ons-radio">
              <input type="radio" id="very-dissatisfied" class="ons-radio__input ons-js-radio" value="very-dissatisfied"
                name="satisfaction">
              <label class=" ons-radio__label " for="very-dissatisfied" id="very-dissatisfied-label">Very
                dissatisfied</label>
            </span>
          </span>
          <br>
          <span class="ons-radios__label ons-u-mt-s ons-u-fs-r--b" aria-hidden="true">Or</span>
          <span class="ons-radios__item">
            <span class="ons-radio">
              <input type="radio" id="no" class="ons-radio__input ons-js-radio" value="no" name="satisfaction">
              <label class=" ons-radio__label " for="no" id="no-label">I don’t want to give feedback</label>
            </span>
          </span>
        </div>
      </div>
    </fieldset>
  </div>
</div>

Radios with clear button

Use this under voluntary questions to allow a user to remove their answer.

The ‘clear selection’ button is displayed after a radio is selected. The aria-live attribute is used to announce changes to assistive technologies.

To ensure the default enter key behaviour actions the submit button on a question page, and not the ‘clear selection’ button, add a hidden duplicate submit button to the top of the form.

The submit button should use the hidden attribute and also the ons-u-d-no utility class to set the button to display:none. This hides the button both visually and from screen readers.

Example Radios With Clear Button contents

Nunjucks
{% from "components/radios/_macro.njk" import onsRadios %}
{% from "components/button/_macro.njk" import onsButton %}
{% from "components/question/_macro.njk" import onsQuestion %}
{% from "components/panel/_macro.njk" import onsPanel %}

{% call onsQuestion({
    "title": "What is your religion?",
    "legendIsQuestionTitle": true
}) %}
    {{
        onsPanel({
            "body": '<p>This question is <strong>voluntary</strong></p>',
            "classes": 'ons-u-mb-m'
        })
    }}
    <form onsubmit="return false;">
        {{
            onsRadios({
                "dontWrap": true,
                "name": "religion",
                "clearRadios": {
                    "text": "Clear selection",
                    "name": "clear-radios",
                    "ariaClearText": "You can clear your answer using the clear selection button after the radio inputs",
                    "ariaClearedText": "You have cleared your answer"
                },
                "radios": [
                    {
                        "id": "none-radio-with-clear-button",
                        "label": {
                            "text": "No religion"
                        },
                        "value": "none"
                    },
                    {
                        "id": "christian-radio-with-clear-button",
                        "label": {
                            "text": "Christian",
                            "description": "Including Church of England, Catholic, Protestant and all other Christian denominations"
                        },
                        "value": "christian"
                    },
                    {
                        "id": "buddhist-radio-with-clear-button",
                        "label": {
                            "text": "Buddhist"
                        },
                        "value": "buddhist"
                    },
                    {
                        "id": "hindu-radio-with-clear-button",
                        "label": {
                            "text": "Hindu"
                        },
                        "value": "hindu"
                    },
                    {
                        "id": "jewish-radio-with-clear-button",
                        "label": {
                            "text": "Jewish"
                        },
                        "value": "jewish"
                    },
                    {
                        "id": "muslim-radio-with-clear-button",
                        "label": {
                            "text": "Muslim"
                        },
                        "value": "muslim"
                    },
                    {
                        "id": "sikh-radio-with-clear-button",
                        "label": {
                            "text": "Sikh"
                        },
                        "value": "sikh"
                    },
                    {
                        "id": "other-radio-radio-with-clear-button",
                        "label": {
                            "text": "Any other religion"
                        },
                        "value": "other",
                        "other": {
                            "otherType": "input",
                            "id": "other-textbox-radio-with-clear-button",
                            "name": "other-answer",
                            "label": {
                                "text": "Enter your religion"
                            }
                        }
                    }
                ]
            })
        }}
    </form>
{% endcall %}
Nunjucks macro options
NameTypeRequiredDescription
idstringfalseThe HTML id for the fieldset
classesstringfalseClasses to add to the fieldset
legendstringtrue (unless dontWrap is set)The HTML <legend> for the fieldset
legendClassesstringfalseClasses to add to the legend
descriptionstringfalseHint text following the fieldset‘s legend to help users answer
borderlessbooleanfalseSet to “true” to remove the border surrounding the input and label
namestringtrueThe name to apply to the radios
radiosarray<Radio>trueSettings for each radio
dontWrapbooleanfalseSet to “true” to prevent the radios from being wrapped in a fieldset component
legendIsQuestionTitlebooleanfalseCreates an h1 inside the legend. Use when the radios are the only fieldset on the page
valuestringfalseSet to “true” to preset the checked radio. This can also be achieved by setting the checked parameter on the Radio item to “true”.
errorError (ref)falseConfiguration for validation errors
orstringfalseText for the “Or” seperator label
clearRadiosobject<ClearRadios>falseSettings for for the clear selection button
Radio
NameTypeRequiredDescription
idstringtrueThe HTML id of the radio. Used for the label’s for attribute.
valuestringfalseThe HTML value attribute for the radio to set a preset value for the input
classesstringfalseClasses to add to the radio
checkedbooleanfalseSet to “true” to select the radio when the page loads
labelLabel (ref)trueSettings for the radio label
otherobject<OtherRadio> with arrays if using Select (ref), Checkboxes (ref) or Radios (ref)falseSettings for a nested input, select, checkboxes or radios to provide other information in addition to the radio answer. Defaults to use input.
attributesobjectfalseHTML attributes (for example, data attributes) to add to the radio input element
OtherRadio
NameTypeRequiredDescription
idstringtrueThe HTML id of the nested input. Used for the label’s for attribute.
classesstringfalseClasses to add to the nested input
namestringfalseThe HTML name attribute for the nested input
valuestringfalseThe HTML value attribute for the nested input to set a preset value for the input
labelLabel (ref)trueSettings for the nested input’s label
widthstringfalseRequired width of the nested text input in number of letters or digits. Will also accept a breakpoint suffix, for example, “7@m”. Defaults to “auto”.
typestringfalseSets the HTML type attribute for the nested <input>. Can be set to either: “number”, “email”, “tel”, “password”, or “search”. Defaults to “text”.
inputClassesstringfalseClasses to apply to the radio input element
otherTypestringfalse (unless alternative input used)Set the type of nested input if not using default text input, using available types: “select”, “checkboxes” or “radios”.
openbooleanfalseSet to “true” to show the nested other input when page loads
selectAllChildrenbooleanfalseSet to “true” when using otherType set to “checkboxes” to show all nested checkboxes pre-selected
attributesobjectfalseHTML attributes (for example, data attributes) to add to the nested input
ClearRadios
NameTypeRequiredDescription
textstringtrueThe text label for the button
namestringfalseThe HTML name attribute for the button
ariaClearTextstringtrueThe text to be announced to screen readers when a radio has been selected. For example, “You can clear your answer using the “clear selection” button after the radio inputs”.
ariaClearedTextstringtrueThe text to be announced to screen readers when the “clear selection” button has been selected. For example, “Your answer has been cleared”.
HTML
<div class="ons-question ons-u-mb-l">
  <div class="ons-question__answer ons-u-mb-m">
    <fieldset class="ons-fieldset">
      <legend class="ons-fieldset__legend ons-u-mb-no">
        <h1 id="fieldset-legend-title" class="ons-fieldset__legend-title">What is your religion?</h1>
      </legend>
      <div class="ons-panel ons-panel--info ons-panel--no-title ons-u-mb-m">
        <span class="ons-panel__assistive-text ons-u-vh">Important information: </span>
        <div class="ons-panel__body">
          <p>This question is <strong>voluntary</strong></p>
        </div>
      </div>
      <form onsubmit="return false;">
        <div class="ons-input-items">
          <div class="ons-radios__items">
            <span class="ons-radios__item">
              <span class="ons-radio">
                <input type="radio" id="none-radio-with-clear-button" class="ons-radio__input ons-js-radio" value="none"
                  name="religion">
                <label class=" ons-radio__label " for="none-radio-with-clear-button"
                  id="none-radio-with-clear-button-label">No religion</label>
              </span>
            </span>
            <br>
            <span class="ons-radios__item">
              <span class="ons-radio">
                <input type="radio" id="christian-radio-with-clear-button" class="ons-radio__input ons-js-radio"
                  value="christian" name="religion">
                <label class=" ons-radio__label  ons-label--with-description"
                  aria-describedby="christian-radio-with-clear-button-label-description-hint"
                  for="christian-radio-with-clear-button" id="christian-radio-with-clear-button-label">Christian<span
                    class="ons-label__aria-hidden-description" aria-hidden="true">
                    <span class="ons-label__description ons-radio__label--with-description">Including Church of England,
                      Catholic, Protestant and all other Christian denominations</span></span></label>
                <span class="ons-label__visually-hidden-description ons-u-vh"
                  id="christian-radio-with-clear-button-label-description-hint">Including Church of England, Catholic,
                  Protestant and all other Christian denominations</span>
              </span>
            </span>
            <br>
            <span class="ons-radios__item">
              <span class="ons-radio">
                <input type="radio" id="buddhist-radio-with-clear-button" class="ons-radio__input ons-js-radio"
                  value="buddhist" name="religion">
                <label class=" ons-radio__label " for="buddhist-radio-with-clear-button"
                  id="buddhist-radio-with-clear-button-label">Buddhist</label>
              </span>
            </span>
            <br>
            <span class="ons-radios__item">
              <span class="ons-radio">
                <input type="radio" id="hindu-radio-with-clear-button" class="ons-radio__input ons-js-radio"
                  value="hindu" name="religion">
                <label class=" ons-radio__label " for="hindu-radio-with-clear-button"
                  id="hindu-radio-with-clear-button-label">Hindu</label>
              </span>
            </span>
            <br>
            <span class="ons-radios__item">
              <span class="ons-radio">
                <input type="radio" id="jewish-radio-with-clear-button" class="ons-radio__input ons-js-radio"
                  value="jewish" name="religion">
                <label class=" ons-radio__label " for="jewish-radio-with-clear-button"
                  id="jewish-radio-with-clear-button-label">Jewish</label>
              </span>
            </span>
            <br>
            <span class="ons-radios__item">
              <span class="ons-radio">
                <input type="radio" id="muslim-radio-with-clear-button" class="ons-radio__input ons-js-radio"
                  value="muslim" name="religion">
                <label class=" ons-radio__label " for="muslim-radio-with-clear-button"
                  id="muslim-radio-with-clear-button-label">Muslim</label>
              </span>
            </span>
            <br>
            <span class="ons-radios__item">
              <span class="ons-radio">
                <input type="radio" id="sikh-radio-with-clear-button" class="ons-radio__input ons-js-radio" value="sikh"
                  name="religion">
                <label class=" ons-radio__label " for="sikh-radio-with-clear-button"
                  id="sikh-radio-with-clear-button-label">Sikh</label>
              </span>
            </span>
            <br>
            <span class="ons-radios__item">
              <span class="ons-radio">
                <input type="radio" id="other-radio-radio-with-clear-button"
                  class="ons-radio__input ons-js-radio ons-js-other" value="other" name="religion"
                  aria-controls="other-radio-radio-with-clear-button-other-wrap" aria-haspopup="true">
                <label class=" ons-radio__label " for="other-radio-radio-with-clear-button"
                  id="other-radio-radio-with-clear-button-label">Any other religion</label>
                <span class="ons-radio__other" id="other-radio-radio-with-clear-button-other-wrap">
                  <label class="ons-label ons-u-fw-n" for="other-textbox-radio-with-clear-button"
                    id="other-textbox-radio-with-clear-button-label">Enter your religion</label>
                  <input type="text" id="other-textbox-radio-with-clear-button"
                    class="ons-input ons-input--text ons-input-type__input ons-input--w-auto" name="other-answer" />
                </span>
              </span>
            </span>
          </div>
          <button type="submit"
            class="ons-btn ons-js-clear-btn ons-u-mt-s ons-u-db-no-js_enabled ons-btn--secondary ons-btn--small"
            name="clear-radios">
            <span class="ons-btn__inner"><span class="ons-btn__text">Clear selection</span>
            </span>
          </button>
          <span class="ons-js-clear-radio-alert ons-u-vh" role="alert" aria-live="polite"
            data-clear="You can clear your answer using the clear selection button after the radio inputs"
            data-cleared="You have cleared your answer"></span>
        </div>
      </form>
    </fieldset>
  </div>
</div>

Radios without a border

Use this for pages that do not follow the practice of “one thing per page”, such as information pages, and where the radio is not the primary call to action.

This variant removes the border around the radio input and label.

Do not use it for question pages with radios. A border makes the radios more visible for users and gives them a larger target area to select (the label and the boundary).

Example Radios Without Border contents

Nunjucks
{% from "components/radios/_macro.njk" import onsRadios %}

{{
    onsRadios({
        "name": "download-format",
        "legend": "Select download format",
        "borderless": true,
        "radios": [
            {
                "id": "xls",
                "label": {
                    "text": "XLS format (78.9 KB)",
                    "description": "Includes supporting information"
                },
                "value": "xls"
            },
            {
                "id": "csv",
                "label": {
                    "text": "CSV format (554.7 KB)"
                },
                "value": "csv"
            },
            {
                "id": "csvw",
                "label": {
                    "text": "CSVW format (1.9 KB)"
                },
                "value": "csvw"
            },
            {
                "id": "json",
                "label": {
                    "text": "JSON file (10.9 KB)"
                },
                "value": "json"
            },
            {
                "id": "supporting",
                "label": {
                    "text": "Support information (2.6 KB)"
                },
                "value": "supporting"
            }
        ]
    })
}}

Nunjucks macro options
NameTypeRequiredDescription
idstringfalseThe HTML id for the fieldset
classesstringfalseClasses to add to the fieldset
legendstringtrue (unless dontWrap is set)The HTML <legend> for the fieldset
legendClassesstringfalseClasses to add to the legend
descriptionstringfalseHint text following the fieldset‘s legend to help users answer
borderlessbooleanfalseSet to “true” to remove the border surrounding the input and label
namestringtrueThe name to apply to the radios
radiosarray<Radio>trueSettings for each radio
dontWrapbooleanfalseSet to “true” to prevent the radios from being wrapped in a fieldset component
legendIsQuestionTitlebooleanfalseCreates an h1 inside the legend. Use when the radios are the only fieldset on the page
valuestringfalseSet to “true” to preset the checked radio. This can also be achieved by setting the checked parameter on the Radio item to “true”.
errorError (ref)falseConfiguration for validation errors
orstringfalseText for the “Or” seperator label
clearRadiosobject<ClearRadios>falseSettings for for the clear selection button
Radio
NameTypeRequiredDescription
idstringtrueThe HTML id of the radio. Used for the label’s for attribute.
valuestringfalseThe HTML value attribute for the radio to set a preset value for the input
classesstringfalseClasses to add to the radio
checkedbooleanfalseSet to “true” to select the radio when the page loads
labelLabel (ref)trueSettings for the radio label
otherobject<OtherRadio> with arrays if using Select (ref), Checkboxes (ref) or Radios (ref)falseSettings for a nested input, select, checkboxes or radios to provide other information in addition to the radio answer. Defaults to use input.
attributesobjectfalseHTML attributes (for example, data attributes) to add to the radio input element
OtherRadio
NameTypeRequiredDescription
idstringtrueThe HTML id of the nested input. Used for the label’s for attribute.
classesstringfalseClasses to add to the nested input
namestringfalseThe HTML name attribute for the nested input
valuestringfalseThe HTML value attribute for the nested input to set a preset value for the input
labelLabel (ref)trueSettings for the nested input’s label
widthstringfalseRequired width of the nested text input in number of letters or digits. Will also accept a breakpoint suffix, for example, “7@m”. Defaults to “auto”.
typestringfalseSets the HTML type attribute for the nested <input>. Can be set to either: “number”, “email”, “tel”, “password”, or “search”. Defaults to “text”.
inputClassesstringfalseClasses to apply to the radio input element
otherTypestringfalse (unless alternative input used)Set the type of nested input if not using default text input, using available types: “select”, “checkboxes” or “radios”.
openbooleanfalseSet to “true” to show the nested other input when page loads
selectAllChildrenbooleanfalseSet to “true” when using otherType set to “checkboxes” to show all nested checkboxes pre-selected
attributesobjectfalseHTML attributes (for example, data attributes) to add to the nested input
ClearRadios
NameTypeRequiredDescription
textstringtrueThe text label for the button
namestringfalseThe HTML name attribute for the button
ariaClearTextstringtrueThe text to be announced to screen readers when a radio has been selected. For example, “You can clear your answer using the “clear selection” button after the radio inputs”.
ariaClearedTextstringtrueThe text to be announced to screen readers when the “clear selection” button has been selected. For example, “Your answer has been cleared”.
HTML
<fieldset class="ons-fieldset">
  <legend class="ons-fieldset__legend"><span class="ons-fieldset__legend-title ons-u-pb-no">Select download
      format</span></legend>
  <div class="ons-radios__items">
    <span class="ons-radios__item ons-radios__item--no-border">
      <span class="ons-radio ons-radio--no-border">
        <input type="radio" id="xls" class="ons-radio__input ons-js-radio" value="xls" name="download-format">
        <label class=" ons-radio__label  ons-label--with-description" aria-describedby="xls-label-description-hint"
          for="xls" id="xls-label">XLS format (78.9 KB)<span class="ons-label__aria-hidden-description"
            aria-hidden="true">
            <span class="ons-label__description ons-radio__label--with-description">Includes supporting
              information</span></span></label>
        <span class="ons-label__visually-hidden-description ons-u-vh" id="xls-label-description-hint">Includes
          supporting information</span>
      </span>
    </span>
    <br>
    <span class="ons-radios__item ons-radios__item--no-border">
      <span class="ons-radio ons-radio--no-border">
        <input type="radio" id="csv" class="ons-radio__input ons-js-radio" value="csv" name="download-format">
        <label class=" ons-radio__label " for="csv" id="csv-label">CSV format (554.7 KB)</label>
      </span>
    </span>
    <br>
    <span class="ons-radios__item ons-radios__item--no-border">
      <span class="ons-radio ons-radio--no-border">
        <input type="radio" id="csvw" class="ons-radio__input ons-js-radio" value="csvw" name="download-format">
        <label class=" ons-radio__label " for="csvw" id="csvw-label">CSVW format (1.9 KB)</label>
      </span>
    </span>
    <br>
    <span class="ons-radios__item ons-radios__item--no-border">
      <span class="ons-radio ons-radio--no-border">
        <input type="radio" id="json" class="ons-radio__input ons-js-radio" value="json" name="download-format">
        <label class=" ons-radio__label " for="json" id="json-label">JSON file (10.9 KB)</label>
      </span>
    </span>
    <br>
    <span class="ons-radios__item ons-radios__item--no-border">
      <span class="ons-radio ons-radio--no-border">
        <input type="radio" id="supporting" class="ons-radio__input ons-js-radio" value="supporting"
          name="download-format">
        <label class=" ons-radio__label " for="supporting" id="supporting-label">Support information (2.6 KB)</label>
      </span>
    </span>
  </div>
</fieldset>

Radio with revealed checkboxes

Use this with the parent radios without a border, to reveal nested checkboxes when a radio is selected.

To use this variant, provide "otherType": "checkboxes" inside the other parameter.

The example below includes the optional parameter selectAllChildren: true which automatically checks all revealed checkboxes.

Example Radios With Revealed Checkboxes contents

Nunjucks
{% from "components/radios/_macro.njk" import onsRadios %}

{{
    onsRadios({
        "legend": "How would you like us to contact you?",
        "name": "contact",
        "borderless": true,
        "radios": [
            {
                "id": "post-example-radio-with-revealed-checkbox",
                "label": {
                    "text": "By post"
                },
                "value": "post"
            },
            {
                "id": "email-example-radio-with-revealed-checkbox",
                "label": {
                    "text": "By email"
                },
                "value": "email"
            },
            {
                "id": "phone-example-radio-with-revealed-checkbox",
                "label": {
                    "text": "By phone"
                },
                "value": "phone",
                "other": {
                    "otherType": "checkboxes",
                    "selectAllChildren": true,
                    "id": "phone-time-example-radio-with-revealed-checkbox",
                    "name": "phone-time",
                    "legend": "Select preferred times of day",
                    "checkboxes": [
                        {
                            "value": "anytime",
                            "id": "anytime-example-radio-with-revealed-checkbox",
                            "label": {
                                "text": "Anytime of day"
                            }
                        },
                        {
                            "value": "morning",
                            "id": "morning-example-radio-with-revealed-checkbox",
                            "label": {
                                "text": "Morning"
                            }
                        },
                        {
                            "value": "afternoon",
                            "id": "afternoon-example-radio-with-revealed-checkbox",
                            "label": {
                                "text": "Afternoon"
                            }
                        },
                        {
                            "value": "evening",
                            "id": "evening-example-radio-with-revealed-checkbox",
                            "label": {
                                "text": "Evening"
                            }
                        }
                    ]
                }
            }
        ]
    })
}}
Nunjucks macro options
NameTypeRequiredDescription
idstringfalseThe HTML id for the fieldset
classesstringfalseClasses to add to the fieldset
legendstringtrue (unless dontWrap is set)The HTML <legend> for the fieldset
legendClassesstringfalseClasses to add to the legend
descriptionstringfalseHint text following the fieldset‘s legend to help users answer
borderlessbooleanfalseSet to “true” to remove the border surrounding the input and label
namestringtrueThe name to apply to the radios
radiosarray<Radio>trueSettings for each radio
dontWrapbooleanfalseSet to “true” to prevent the radios from being wrapped in a fieldset component
legendIsQuestionTitlebooleanfalseCreates an h1 inside the legend. Use when the radios are the only fieldset on the page
valuestringfalseSet to “true” to preset the checked radio. This can also be achieved by setting the checked parameter on the Radio item to “true”.
errorError (ref)falseConfiguration for validation errors
orstringfalseText for the “Or” seperator label
clearRadiosobject<ClearRadios>falseSettings for for the clear selection button
Radio
NameTypeRequiredDescription
idstringtrueThe HTML id of the radio. Used for the label’s for attribute.
valuestringfalseThe HTML value attribute for the radio to set a preset value for the input
classesstringfalseClasses to add to the radio
checkedbooleanfalseSet to “true” to select the radio when the page loads
labelLabel (ref)trueSettings for the radio label
otherobject<OtherRadio> with arrays if using Select (ref), Checkboxes (ref) or Radios (ref)falseSettings for a nested input, select, checkboxes or radios to provide other information in addition to the radio answer. Defaults to use input.
attributesobjectfalseHTML attributes (for example, data attributes) to add to the radio input element
OtherRadio
NameTypeRequiredDescription
idstringtrueThe HTML id of the nested input. Used for the label’s for attribute.
classesstringfalseClasses to add to the nested input
namestringfalseThe HTML name attribute for the nested input
valuestringfalseThe HTML value attribute for the nested input to set a preset value for the input
labelLabel (ref)trueSettings for the nested input’s label
widthstringfalseRequired width of the nested text input in number of letters or digits. Will also accept a breakpoint suffix, for example, “7@m”. Defaults to “auto”.
typestringfalseSets the HTML type attribute for the nested <input>. Can be set to either: “number”, “email”, “tel”, “password”, or “search”. Defaults to “text”.
inputClassesstringfalseClasses to apply to the radio input element
otherTypestringfalse (unless alternative input used)Set the type of nested input if not using default text input, using available types: “select”, “checkboxes” or “radios”.
openbooleanfalseSet to “true” to show the nested other input when page loads
selectAllChildrenbooleanfalseSet to “true” when using otherType set to “checkboxes” to show all nested checkboxes pre-selected
attributesobjectfalseHTML attributes (for example, data attributes) to add to the nested input
ClearRadios
NameTypeRequiredDescription
textstringtrueThe text label for the button
namestringfalseThe HTML name attribute for the button
ariaClearTextstringtrueThe text to be announced to screen readers when a radio has been selected. For example, “You can clear your answer using the “clear selection” button after the radio inputs”.
ariaClearedTextstringtrueThe text to be announced to screen readers when the “clear selection” button has been selected. For example, “Your answer has been cleared”.
HTML
<fieldset class="ons-fieldset">
  <legend class="ons-fieldset__legend"><span class="ons-fieldset__legend-title ons-u-pb-no">How would you like us to
      contact you?</span></legend>
  <div class="ons-radios__items">
    <span class="ons-radios__item ons-radios__item--no-border">
      <span class="ons-radio ons-radio--no-border">
        <input type="radio" id="post-example-radio-with-revealed-checkbox" class="ons-radio__input ons-js-radio"
          value="post" name="contact">
        <label class=" ons-radio__label " for="post-example-radio-with-revealed-checkbox"
          id="post-example-radio-with-revealed-checkbox-label">By post</label>
      </span>
    </span>
    <br>
    <span class="ons-radios__item ons-radios__item--no-border">
      <span class="ons-radio ons-radio--no-border">
        <input type="radio" id="email-example-radio-with-revealed-checkbox" class="ons-radio__input ons-js-radio"
          value="email" name="contact">
        <label class=" ons-radio__label " for="email-example-radio-with-revealed-checkbox"
          id="email-example-radio-with-revealed-checkbox-label">By email</label>
      </span>
    </span>
    <br>
    <span class="ons-radios__item ons-radios__item--no-border">
      <span class="ons-radio ons-radio--no-border">
        <input type="radio" id="phone-example-radio-with-revealed-checkbox"
          class="ons-radio__input ons-js-radio ons-js-other ons-js-select-all-children" value="phone" name="contact"
          aria-controls="phone-example-radio-with-revealed-checkbox-other-wrap" aria-haspopup="true">
        <label class=" ons-radio__label " for="phone-example-radio-with-revealed-checkbox"
          id="phone-example-radio-with-revealed-checkbox-label">By phone</label>
        <span class="ons-radio__other" id="phone-example-radio-with-revealed-checkbox-other-wrap">
          <fieldset id="phone-time-example-radio-with-revealed-checkbox"
            class="ons-fieldset ons-js-other-fieldset-radio">
            <legend class="ons-fieldset__legend"><span class="ons-fieldset__legend-title ons-u-pb-no">Select preferred
                times of day</span></legend>
            <div class="ons-checkboxes__items">
              <span class="ons-checkboxes__item ons-checkboxes__item--no-border">
                <span class="ons-checkbox  ons-checkbox--no-border">
                  <input type="checkbox" id="anytime-example-radio-with-revealed-checkbox"
                    class="ons-checkbox__input ons-js-checkbox" value="anytime">
                  <label class=" ons-checkbox__label " for="anytime-example-radio-with-revealed-checkbox"
                    id="anytime-example-radio-with-revealed-checkbox-label">Anytime of day</label>
                </span>
              </span>
              <br>
              <span class="ons-checkboxes__item ons-checkboxes__item--no-border">
                <span class="ons-checkbox  ons-checkbox--no-border">
                  <input type="checkbox" id="morning-example-radio-with-revealed-checkbox"
                    class="ons-checkbox__input ons-js-checkbox" value="morning">
                  <label class=" ons-checkbox__label " for="morning-example-radio-with-revealed-checkbox"
                    id="morning-example-radio-with-revealed-checkbox-label">Morning</label>
                </span>
              </span>
              <br>
              <span class="ons-checkboxes__item ons-checkboxes__item--no-border">
                <span class="ons-checkbox  ons-checkbox--no-border">
                  <input type="checkbox" id="afternoon-example-radio-with-revealed-checkbox"
                    class="ons-checkbox__input ons-js-checkbox" value="afternoon">
                  <label class=" ons-checkbox__label " for="afternoon-example-radio-with-revealed-checkbox"
                    id="afternoon-example-radio-with-revealed-checkbox-label">Afternoon</label>
                </span>
              </span>
              <br>
              <span class="ons-checkboxes__item ons-checkboxes__item--no-border">
                <span class="ons-checkbox  ons-checkbox--no-border">
                  <input type="checkbox" id="evening-example-radio-with-revealed-checkbox"
                    class="ons-checkbox__input ons-js-checkbox" value="evening">
                  <label class=" ons-checkbox__label " for="evening-example-radio-with-revealed-checkbox"
                    id="evening-example-radio-with-revealed-checkbox-label">Evening</label>
                </span>
              </span>
            </div>
          </fieldset>
        </span>
      </span>
    </span>
  </div>
</fieldset>

Radio with revealed radios

This variant reveals nested radios when a radio is selected. We recommend using this variant together with the parent radios using the borderless variant.

To use this variant provide "otherType": "radios" inside the other parameter.

Example Radios With Revealed Radios contents

Nunjucks
{% from "components/radios/_macro.njk" import onsRadios %}

{{
    onsRadios({
        "legend": "How would you like us to contact you?",
        "name": "contact",
        "borderless": true,
        "radios": [
            {
                "id": "post-example-with-revealed-radio",
                "label": {
                    "text": "By post"
                },
                "value": "post"
            },
            {
                "id": "email-example-with-revealed-radio",
                "label": {
                    "text": "By email"
                },
                "value": "email"
            },
            {
                "id": "phone-example-with-revealed-radio",
                "label": {
                    "text": "By phone"
                },
                "value": "phone",
                "other": {
                    "otherType": "radios",
                    "id": "phone-time-example-with-revealed-radio",
                    "name": "phone-time",
                    "legend": "Choose preferred time of day",
                    "radios": [
                        {
                            "value": "anytime",
                            "id": "anytime-example-with-revealed-radio",
                            "label": {
                                "text": "Anytime of day"
                            }
                        },
                        {
                            "value": "morning",
                            "id": "morning-example-with-revealed-radio",
                            "label": {
                                "text": "Morning"
                            }
                        },
                        {
                            "value": "afternoon",
                            "id": "afternoon-example-with-revealed-radio",
                            "label": {
                                "text": "Afternoon"
                            }
                        },
                        {
                            "value": "evening",
                            "id": "evening-example-with-revealed-radio",
                            "label": {
                                "text": "Evening"
                            }
                        }
                    ]
                }
            }
        ]
    })
}}
Nunjucks macro options
NameTypeRequiredDescription
idstringfalseThe HTML id for the fieldset
classesstringfalseClasses to add to the fieldset
legendstringtrue (unless dontWrap is set)The HTML <legend> for the fieldset
legendClassesstringfalseClasses to add to the legend
descriptionstringfalseHint text following the fieldset‘s legend to help users answer
borderlessbooleanfalseSet to “true” to remove the border surrounding the input and label
namestringtrueThe name to apply to the radios
radiosarray<Radio>trueSettings for each radio
dontWrapbooleanfalseSet to “true” to prevent the radios from being wrapped in a fieldset component
legendIsQuestionTitlebooleanfalseCreates an h1 inside the legend. Use when the radios are the only fieldset on the page
valuestringfalseSet to “true” to preset the checked radio. This can also be achieved by setting the checked parameter on the Radio item to “true”.
errorError (ref)falseConfiguration for validation errors
orstringfalseText for the “Or” seperator label
clearRadiosobject<ClearRadios>falseSettings for for the clear selection button
Radio
NameTypeRequiredDescription
idstringtrueThe HTML id of the radio. Used for the label’s for attribute.
valuestringfalseThe HTML value attribute for the radio to set a preset value for the input
classesstringfalseClasses to add to the radio
checkedbooleanfalseSet to “true” to select the radio when the page loads
labelLabel (ref)trueSettings for the radio label
otherobject<OtherRadio> with arrays if using Select (ref), Checkboxes (ref) or Radios (ref)falseSettings for a nested input, select, checkboxes or radios to provide other information in addition to the radio answer. Defaults to use input.
attributesobjectfalseHTML attributes (for example, data attributes) to add to the radio input element
OtherRadio
NameTypeRequiredDescription
idstringtrueThe HTML id of the nested input. Used for the label’s for attribute.
classesstringfalseClasses to add to the nested input
namestringfalseThe HTML name attribute for the nested input
valuestringfalseThe HTML value attribute for the nested input to set a preset value for the input
labelLabel (ref)trueSettings for the nested input’s label
widthstringfalseRequired width of the nested text input in number of letters or digits. Will also accept a breakpoint suffix, for example, “7@m”. Defaults to “auto”.
typestringfalseSets the HTML type attribute for the nested <input>. Can be set to either: “number”, “email”, “tel”, “password”, or “search”. Defaults to “text”.
inputClassesstringfalseClasses to apply to the radio input element
otherTypestringfalse (unless alternative input used)Set the type of nested input if not using default text input, using available types: “select”, “checkboxes” or “radios”.
openbooleanfalseSet to “true” to show the nested other input when page loads
selectAllChildrenbooleanfalseSet to “true” when using otherType set to “checkboxes” to show all nested checkboxes pre-selected
attributesobjectfalseHTML attributes (for example, data attributes) to add to the nested input
ClearRadios
NameTypeRequiredDescription
textstringtrueThe text label for the button
namestringfalseThe HTML name attribute for the button
ariaClearTextstringtrueThe text to be announced to screen readers when a radio has been selected. For example, “You can clear your answer using the “clear selection” button after the radio inputs”.
ariaClearedTextstringtrueThe text to be announced to screen readers when the “clear selection” button has been selected. For example, “Your answer has been cleared”.
HTML
<fieldset class="ons-fieldset">
  <legend class="ons-fieldset__legend"><span class="ons-fieldset__legend-title ons-u-pb-no">How would you like us to
      contact you?</span></legend>
  <div class="ons-radios__items">
    <span class="ons-radios__item ons-radios__item--no-border">
      <span class="ons-radio ons-radio--no-border">
        <input type="radio" id="post-example-with-revealed-radio" class="ons-radio__input ons-js-radio" value="post"
          name="contact">
        <label class=" ons-radio__label " for="post-example-with-revealed-radio"
          id="post-example-with-revealed-radio-label">By post</label>
      </span>
    </span>
    <br>
    <span class="ons-radios__item ons-radios__item--no-border">
      <span class="ons-radio ons-radio--no-border">
        <input type="radio" id="email-example-with-revealed-radio" class="ons-radio__input ons-js-radio" value="email"
          name="contact">
        <label class=" ons-radio__label " for="email-example-with-revealed-radio"
          id="email-example-with-revealed-radio-label">By email</label>
      </span>
    </span>
    <br>
    <span class="ons-radios__item ons-radios__item--no-border">
      <span class="ons-radio ons-radio--no-border">
        <input type="radio" id="phone-example-with-revealed-radio" class="ons-radio__input ons-js-radio ons-js-other"
          value="phone" name="contact" aria-controls="phone-example-with-revealed-radio-other-wrap"
          aria-haspopup="true">
        <label class=" ons-radio__label " for="phone-example-with-revealed-radio"
          id="phone-example-with-revealed-radio-label">By phone</label>
        <span class="ons-radio__other" id="phone-example-with-revealed-radio-other-wrap">
          <fieldset id="phone-time-example-with-revealed-radio" class="ons-fieldset ons-js-other-fieldset-radio">
            <legend class="ons-fieldset__legend  ons-u-mb-xs"><span
                class="ons-fieldset__legend-title ons-u-pb-no">Choose preferred time of day</span></legend>
            <div class="ons-radios__items">
              <span class="ons-radios__item ons-radios__item--no-border">
                <span class="ons-radio ons-radio--no-border">
                  <input type="radio" id="anytime-example-with-revealed-radio" class="ons-radio__input ons-js-radio"
                    value="anytime" name="phone-time">
                  <label class=" ons-radio__label " for="anytime-example-with-revealed-radio"
                    id="anytime-example-with-revealed-radio-label">Anytime of day</label>
                </span>
              </span>
              <br>
              <span class="ons-radios__item ons-radios__item--no-border">
                <span class="ons-radio ons-radio--no-border">
                  <input type="radio" id="morning-example-with-revealed-radio" class="ons-radio__input ons-js-radio"
                    value="morning" name="phone-time">
                  <label class=" ons-radio__label " for="morning-example-with-revealed-radio"
                    id="morning-example-with-revealed-radio-label">Morning</label>
                </span>
              </span>
              <br>
              <span class="ons-radios__item ons-radios__item--no-border">
                <span class="ons-radio ons-radio--no-border">
                  <input type="radio" id="afternoon-example-with-revealed-radio" class="ons-radio__input ons-js-radio"
                    value="afternoon" name="phone-time">
                  <label class=" ons-radio__label " for="afternoon-example-with-revealed-radio"
                    id="afternoon-example-with-revealed-radio-label">Afternoon</label>
                </span>
              </span>
              <br>
              <span class="ons-radios__item ons-radios__item--no-border">
                <span class="ons-radio ons-radio--no-border">
                  <input type="radio" id="evening-example-with-revealed-radio" class="ons-radio__input ons-js-radio"
                    value="evening" name="phone-time">
                  <label class=" ons-radio__label " for="evening-example-with-revealed-radio"
                    id="evening-example-with-revealed-radio-label">Evening</label>
                </span>
              </span>
            </div>
          </fieldset>
        </span>
      </span>
    </span>
  </div>
</fieldset>

How to check radios

To help users make a selection on the page and provide extra detail if it is required, you should:

  • check they have selected a radio
  • check they have entered something or selected a drop-down option if more detail is required for one of the radios
  • show an error message if they have not selected a radio or given any more detail when required

Error messages

Show the error details above the radios and use the correct errors pattern.

Example Radios With Error contents

Nunjucks
{% from "components/radios/_macro.njk" import onsRadios %}

{{
    onsRadios({
        "name": "gender-identity",
        "dontWrap": true,
        "radios": [
            {
                "id": "yes-example-radio-with-error",
                "label": {
                    "text": "Yes"
                },
                "value": "yes"
            },
            {
                "id": "no-example-radio-with-error",
                "label": {
                    "text": "No"
                },
                "value": "no",
                "checked": true,
                "other": {
                    "open": true,
                    "otherType": "input",
                    "id": "no-textbox-example-radio-with-error",
                    "name": "no-answer",
                    "label": {
                        "text": "Enter your gender identity"
                    }
                }
            }
        ],
        "error": {
            "id": "dietary-error-example-radio-with-error",
            "text": "Enter your gender identity"
        }
    })
}}
Nunjucks macro options
NameTypeRequiredDescription
idstringfalseThe HTML id for the fieldset
classesstringfalseClasses to add to the fieldset
legendstringtrue (unless dontWrap is set)The HTML <legend> for the fieldset
legendClassesstringfalseClasses to add to the legend
descriptionstringfalseHint text following the fieldset‘s legend to help users answer
borderlessbooleanfalseSet to “true” to remove the border surrounding the input and label
namestringtrueThe name to apply to the radios
radiosarray<Radio>trueSettings for each radio
dontWrapbooleanfalseSet to “true” to prevent the radios from being wrapped in a fieldset component
legendIsQuestionTitlebooleanfalseCreates an h1 inside the legend. Use when the radios are the only fieldset on the page
valuestringfalseSet to “true” to preset the checked radio. This can also be achieved by setting the checked parameter on the Radio item to “true”.
errorError (ref)falseConfiguration for validation errors
orstringfalseText for the “Or” seperator label
clearRadiosobject<ClearRadios>falseSettings for for the clear selection button
Radio
NameTypeRequiredDescription
idstringtrueThe HTML id of the radio. Used for the label’s for attribute.
valuestringfalseThe HTML value attribute for the radio to set a preset value for the input
classesstringfalseClasses to add to the radio
checkedbooleanfalseSet to “true” to select the radio when the page loads
labelLabel (ref)trueSettings for the radio label
otherobject<OtherRadio> with arrays if using Select (ref), Checkboxes (ref) or Radios (ref)falseSettings for a nested input, select, checkboxes or radios to provide other information in addition to the radio answer. Defaults to use input.
attributesobjectfalseHTML attributes (for example, data attributes) to add to the radio input element
OtherRadio
NameTypeRequiredDescription
idstringtrueThe HTML id of the nested input. Used for the label’s for attribute.
classesstringfalseClasses to add to the nested input
namestringfalseThe HTML name attribute for the nested input
valuestringfalseThe HTML value attribute for the nested input to set a preset value for the input
labelLabel (ref)trueSettings for the nested input’s label
widthstringfalseRequired width of the nested text input in number of letters or digits. Will also accept a breakpoint suffix, for example, “7@m”. Defaults to “auto”.
typestringfalseSets the HTML type attribute for the nested <input>. Can be set to either: “number”, “email”, “tel”, “password”, or “search”. Defaults to “text”.
inputClassesstringfalseClasses to apply to the radio input element
otherTypestringfalse (unless alternative input used)Set the type of nested input if not using default text input, using available types: “select”, “checkboxes” or “radios”.
openbooleanfalseSet to “true” to show the nested other input when page loads
selectAllChildrenbooleanfalseSet to “true” when using otherType set to “checkboxes” to show all nested checkboxes pre-selected
attributesobjectfalseHTML attributes (for example, data attributes) to add to the nested input
ClearRadios
NameTypeRequiredDescription
textstringtrueThe text label for the button
namestringfalseThe HTML name attribute for the button
ariaClearTextstringtrueThe text to be announced to screen readers when a radio has been selected. For example, “You can clear your answer using the “clear selection” button after the radio inputs”.
ariaClearedTextstringtrueThe text to be announced to screen readers when the “clear selection” button has been selected. For example, “Your answer has been cleared”.
HTML
<div class="ons-panel ons-panel--error ons-panel--no-title" id="dietary-error-example-radio-with-error">
  <span class="ons-panel__assistive-text ons-u-vh">Error: </span>
  <div class="ons-panel__body">
    <p class="ons-panel__error">
      <strong>Enter your gender identity</strong>
    </p>
    <div class="ons-input-items">
      <div class="ons-radios__items">
        <span class="ons-radios__item">
          <span class="ons-radio">
            <input type="radio" id="yes-example-radio-with-error" class="ons-radio__input ons-js-radio" value="yes"
              name="gender-identity">
            <label class=" ons-radio__label " for="yes-example-radio-with-error"
              id="yes-example-radio-with-error-label">Yes</label>
          </span>
        </span>
        <br>
        <span class="ons-radios__item">
          <span class="ons-radio">
            <input type="radio" id="no-example-radio-with-error" class="ons-radio__input ons-js-radio ons-js-other"
              value="no" name="gender-identity" checked>
            <label class=" ons-radio__label " for="no-example-radio-with-error"
              id="no-example-radio-with-error-label">No</label>
            <span class="ons-radio__other ons-radio__other--open" id="no-example-radio-with-error-other-wrap">
              <label class="ons-label ons-u-fw-n" for="no-textbox-example-radio-with-error"
                id="no-textbox-example-radio-with-error-label">Enter your gender identity</label>
              <input type="text" id="no-textbox-example-radio-with-error"
                class="ons-input ons-input--text ons-input-type__input ons-input--error  ons-input--w-auto"
                name="no-answer" />
            </span>
          </span>
        </span>
      </div>
    </div>
  </div>
</div>

If a radio has not been selected

Use “Select [whatever it is]”.
For example, “Select your religion”.

If it is a question with yes or no answers and a radio has not been selected

Use “Select an answer”.

If “radio with input” is selected but the input field is empty

Use “Enter [whatever it is]”.
For example, “Enter your gender identity”.

If “radio with drop-down” is selected but a drop-down option has not been selected

Use “Select [whatever topic the drop-down is asking for]”.
For example, “Select your preferred time of day for us to contact you”.

Help improve this page

Let us know how we could improve this page, or share your user research findings. Discuss the ‘Radios’ component on GitHub (opens in a new tab)