Radios

Overview

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

Example Radios contents

Nunjucksfor Example Radios
Nunjucks macro optionsfor Example Radios
HTMLfor Example Radios

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

Name	Type	Required	Description
id	string	false	The HTML `id` for the fieldset
classes	string	false	Classes to add to the fieldset
legend	string	true (unless `dontWrap` is set)	The HTML `<legend>` for the fieldset
legendClasses	string	false	Classes to add to the legend
description	string	false	Hint text following the fieldset‘s legend to help users answer
borderless	boolean	false	Set to “true” to remove the border surrounding the input and label
name	string	true	The name to apply to the radios
radios	array`<Radio>`	true	Settings for each radio
dontWrap	boolean	false	Set to “true” to prevent the radios from being wrapped in a fieldset component
legendIsQuestionTitle	boolean	false	Creates an `h1` inside the legend. Use when the radios are the only fieldset on the page
value	string	false	Set to “true” to preset the checked radio. This can also be achieved by setting the `checked` parameter on the `Radio` item to “true”.
error	`Error` (ref)	false	Configuration for validation errors
or	string	false	Text for the “Or” seperator label
clearRadios	object`<ClearRadios>`	false	Settings for for the clear selection button

Radio
Name	Type	Required	Description
id	string	true	The HTML `id` of the radio. Used for the label’s `for` attribute.
value	string	false	The HTML `value` attribute for the radio to set a preset value for the input
classes	string	false	Classes to add to the radio
checked	boolean	false	Set to “true” to select the radio when the page loads
label	`Label` (ref)	true	Settings for the radio label
other	object`<OtherRadio>` with arrays if using `Select` (ref), `Checkboxes` (ref) or `Radios` (ref)	false	Settings for a nested input, select, checkboxes, radios or textarea to provide other information in addition to the radio answer. Defaults to use input.
attributes	object	false	HTML attributes (for example, data attributes) to add to the radio input element

OtherRadio
Name	Type	Required	Description
id	string	true	The HTML `id` of the nested input. Used for the label’s `for` attribute.
classes	string	false	Classes to add to the nested input
name	string	false	The HTML `name` attribute for the nested input
value	string	false	The HTML `value` attribute for the nested input to set a preset value for the input
label	`Label` (ref)	true	Settings for the nested input’s label
width	string	false	Required 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”.
type	string	false	Sets the HTML `type` attribute for the nested `<input>`. Can be set to either: “number”, “email”, “tel”, “password”, or “search”. Defaults to “text”.
inputClasses	string	false	Classes to apply to the radio input element
otherType	string	false (unless alternative input used)	Set the type of nested input if not using default text input, using available types: “select”, “checkboxes”, “radios” or “textarea”.
open	boolean	false	Set to “true” to show the nested `other` input when page loads
selectAllChildren	boolean	false	Set to “true” when using `otherType` set to “checkboxes” to show all nested checkboxes pre-selected
attributes	object	false	HTML attributes (for example, data attributes) to add to the nested input

ClearRadios
Name	Type	Required	Description
text	string	true	The text label for the button
name	string	false	The HTML `name` attribute for the button
ariaClearText	string	true	The 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”.
ariaClearedText	string	true	The 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-xl ons-u-mt-no">
  <div class="ons-question__answer ons-u-mb-l">
    <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

Nunjucksfor Example Radios With Descriptions
Nunjucks macro optionsfor Example Radios With Descriptions
HTMLfor Example Radios With Descriptions

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

Name	Type	Required	Description
id	string	false	The HTML `id` for the fieldset
classes	string	false	Classes to add to the fieldset
legend	string	true (unless `dontWrap` is set)	The HTML `<legend>` for the fieldset
legendClasses	string	false	Classes to add to the legend
description	string	false	Hint text following the fieldset‘s legend to help users answer
borderless	boolean	false	Set to “true” to remove the border surrounding the input and label
name	string	true	The name to apply to the radios
radios	array`<Radio>`	true	Settings for each radio
dontWrap	boolean	false	Set to “true” to prevent the radios from being wrapped in a fieldset component
legendIsQuestionTitle	boolean	false	Creates an `h1` inside the legend. Use when the radios are the only fieldset on the page
value	string	false	Set to “true” to preset the checked radio. This can also be achieved by setting the `checked` parameter on the `Radio` item to “true”.
error	`Error` (ref)	false	Configuration for validation errors
or	string	false	Text for the “Or” seperator label
clearRadios	object`<ClearRadios>`	false	Settings for for the clear selection button

Radio
Name	Type	Required	Description
id	string	true	The HTML `id` of the radio. Used for the label’s `for` attribute.
value	string	false	The HTML `value` attribute for the radio to set a preset value for the input
classes	string	false	Classes to add to the radio
checked	boolean	false	Set to “true” to select the radio when the page loads
label	`Label` (ref)	true	Settings for the radio label
other	object`<OtherRadio>` with arrays if using `Select` (ref), `Checkboxes` (ref) or `Radios` (ref)	false	Settings for a nested input, select, checkboxes, radios or textarea to provide other information in addition to the radio answer. Defaults to use input.
attributes	object	false	HTML attributes (for example, data attributes) to add to the radio input element

OtherRadio
Name	Type	Required	Description
id	string	true	The HTML `id` of the nested input. Used for the label’s `for` attribute.
classes	string	false	Classes to add to the nested input
name	string	false	The HTML `name` attribute for the nested input
value	string	false	The HTML `value` attribute for the nested input to set a preset value for the input
label	`Label` (ref)	true	Settings for the nested input’s label
width	string	false	Required 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”.
type	string	false	Sets the HTML `type` attribute for the nested `<input>`. Can be set to either: “number”, “email”, “tel”, “password”, or “search”. Defaults to “text”.
inputClasses	string	false	Classes to apply to the radio input element
otherType	string	false (unless alternative input used)	Set the type of nested input if not using default text input, using available types: “select”, “checkboxes”, “radios” or “textarea”.
open	boolean	false	Set to “true” to show the nested `other` input when page loads
selectAllChildren	boolean	false	Set to “true” when using `otherType` set to “checkboxes” to show all nested checkboxes pre-selected
attributes	object	false	HTML attributes (for example, data attributes) to add to the nested input

ClearRadios
Name	Type	Required	Description
text	string	true	The text label for the button
name	string	false	The HTML `name` attribute for the button
ariaClearText	string	true	The 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”.
ariaClearedText	string	true	The 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-xl ons-u-mt-no">
  <div class="ons-question__answer ons-u-mb-l">
    <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" for="white-example-radio-with-description"
                aria-describedby="white-example-radio-with-description-label-description-hint"
                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" for="mixed-example-radio-with-description"
                aria-describedby="mixed-example-radio-with-description-label-description-hint"
                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" for="asian-example-radio-with-description"
                aria-describedby="asian-example-radio-with-description-label-description-hint"
                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" for="black-example-radio-with-description"
                aria-describedby="black-example-radio-with-description-label-description-hint"
                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" for="other-example-radio-with-description"
                aria-describedby="other-example-radio-with-description-label-description-hint"
                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.

Open this example in a new tab(Example Radios With Visible Text Input)

Example Radios With Visible Text Input contents

Nunjucksfor Example Radios With Visible Text Input
Nunjucks macro optionsfor Example Radios With Visible Text Input
HTMLfor Example Radios With Visible Text Input

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

Name	Type	Required	Description
id	string	false	The HTML `id` for the fieldset
classes	string	false	Classes to add to the fieldset
legend	string	true (unless `dontWrap` is set)	The HTML `<legend>` for the fieldset
legendClasses	string	false	Classes to add to the legend
description	string	false	Hint text following the fieldset‘s legend to help users answer
borderless	boolean	false	Set to “true” to remove the border surrounding the input and label
name	string	true	The name to apply to the radios
radios	array`<Radio>`	true	Settings for each radio
dontWrap	boolean	false	Set to “true” to prevent the radios from being wrapped in a fieldset component
legendIsQuestionTitle	boolean	false	Creates an `h1` inside the legend. Use when the radios are the only fieldset on the page
value	string	false	Set to “true” to preset the checked radio. This can also be achieved by setting the `checked` parameter on the `Radio` item to “true”.
error	`Error` (ref)	false	Configuration for validation errors
or	string	false	Text for the “Or” seperator label
clearRadios	object`<ClearRadios>`	false	Settings for for the clear selection button

Radio
Name	Type	Required	Description
id	string	true	The HTML `id` of the radio. Used for the label’s `for` attribute.
value	string	false	The HTML `value` attribute for the radio to set a preset value for the input
classes	string	false	Classes to add to the radio
checked	boolean	false	Set to “true” to select the radio when the page loads
label	`Label` (ref)	true	Settings for the radio label
other	object`<OtherRadio>` with arrays if using `Select` (ref), `Checkboxes` (ref) or `Radios` (ref)	false	Settings for a nested input, select, checkboxes, radios or textarea to provide other information in addition to the radio answer. Defaults to use input.
attributes	object	false	HTML attributes (for example, data attributes) to add to the radio input element

OtherRadio
Name	Type	Required	Description
id	string	true	The HTML `id` of the nested input. Used for the label’s `for` attribute.
classes	string	false	Classes to add to the nested input
name	string	false	The HTML `name` attribute for the nested input
value	string	false	The HTML `value` attribute for the nested input to set a preset value for the input
label	`Label` (ref)	true	Settings for the nested input’s label
width	string	false	Required 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”.
type	string	false	Sets the HTML `type` attribute for the nested `<input>`. Can be set to either: “number”, “email”, “tel”, “password”, or “search”. Defaults to “text”.
inputClasses	string	false	Classes to apply to the radio input element
otherType	string	false (unless alternative input used)	Set the type of nested input if not using default text input, using available types: “select”, “checkboxes”, “radios” or “textarea”.
open	boolean	false	Set to “true” to show the nested `other` input when page loads
selectAllChildren	boolean	false	Set to “true” when using `otherType` set to “checkboxes” to show all nested checkboxes pre-selected
attributes	object	false	HTML attributes (for example, data attributes) to add to the nested input

ClearRadios
Name	Type	Required	Description
text	string	true	The text label for the button
name	string	false	The HTML `name` attribute for the button
ariaClearText	string	true	The 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”.
ariaClearedText	string	true	The 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-xl ons-u-mt-no">
  <div class="ons-question__answer ons-u-mb-l">
    <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.

Open this example in a new tab(Example Radios With Revealed Text Input)

Example Radios With Revealed Text Input contents

Nunjucksfor Example Radios With Revealed Text Input
Nunjucks macro optionsfor Example Radios With Revealed Text Input
HTMLfor Example Radios With Revealed Text Input

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

Name	Type	Required	Description
id	string	false	The HTML `id` for the fieldset
classes	string	false	Classes to add to the fieldset
legend	string	true (unless `dontWrap` is set)	The HTML `<legend>` for the fieldset
legendClasses	string	false	Classes to add to the legend
description	string	false	Hint text following the fieldset‘s legend to help users answer
borderless	boolean	false	Set to “true” to remove the border surrounding the input and label
name	string	true	The name to apply to the radios
radios	array`<Radio>`	true	Settings for each radio
dontWrap	boolean	false	Set to “true” to prevent the radios from being wrapped in a fieldset component
legendIsQuestionTitle	boolean	false	Creates an `h1` inside the legend. Use when the radios are the only fieldset on the page
value	string	false	Set to “true” to preset the checked radio. This can also be achieved by setting the `checked` parameter on the `Radio` item to “true”.
error	`Error` (ref)	false	Configuration for validation errors
or	string	false	Text for the “Or” seperator label
clearRadios	object`<ClearRadios>`	false	Settings for for the clear selection button

Radio
Name	Type	Required	Description
id	string	true	The HTML `id` of the radio. Used for the label’s `for` attribute.
value	string	false	The HTML `value` attribute for the radio to set a preset value for the input
classes	string	false	Classes to add to the radio
checked	boolean	false	Set to “true” to select the radio when the page loads
label	`Label` (ref)	true	Settings for the radio label
other	object`<OtherRadio>` with arrays if using `Select` (ref), `Checkboxes` (ref) or `Radios` (ref)	false	Settings for a nested input, select, checkboxes, radios or textarea to provide other information in addition to the radio answer. Defaults to use input.
attributes	object	false	HTML attributes (for example, data attributes) to add to the radio input element

OtherRadio
Name	Type	Required	Description
id	string	true	The HTML `id` of the nested input. Used for the label’s `for` attribute.
classes	string	false	Classes to add to the nested input
name	string	false	The HTML `name` attribute for the nested input
value	string	false	The HTML `value` attribute for the nested input to set a preset value for the input
label	`Label` (ref)	true	Settings for the nested input’s label
width	string	false	Required 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”.
type	string	false	Sets the HTML `type` attribute for the nested `<input>`. Can be set to either: “number”, “email”, “tel”, “password”, or “search”. Defaults to “text”.
inputClasses	string	false	Classes to apply to the radio input element
otherType	string	false (unless alternative input used)	Set the type of nested input if not using default text input, using available types: “select”, “checkboxes”, “radios” or “textarea”.
open	boolean	false	Set to “true” to show the nested `other` input when page loads
selectAllChildren	boolean	false	Set to “true” when using `otherType` set to “checkboxes” to show all nested checkboxes pre-selected
attributes	object	false	HTML attributes (for example, data attributes) to add to the nested input

ClearRadios
Name	Type	Required	Description
text	string	true	The text label for the button
name	string	false	The HTML `name` attribute for the button
ariaClearText	string	true	The 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”.
ariaClearedText	string	true	The 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-xl ons-u-mt-no">
  <div class="ons-question__answer ons-u-mb-l">
    <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

Nunjucksfor Example Radios With Revealed Select
Nunjucks macro optionsfor Example Radios With Revealed Select
HTMLfor Example Radios With Revealed Select

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

Name	Type	Required	Description
id	string	false	The HTML `id` for the fieldset
classes	string	false	Classes to add to the fieldset
legend	string	true (unless `dontWrap` is set)	The HTML `<legend>` for the fieldset
legendClasses	string	false	Classes to add to the legend
description	string	false	Hint text following the fieldset‘s legend to help users answer
borderless	boolean	false	Set to “true” to remove the border surrounding the input and label
name	string	true	The name to apply to the radios
radios	array`<Radio>`	true	Settings for each radio
dontWrap	boolean	false	Set to “true” to prevent the radios from being wrapped in a fieldset component
legendIsQuestionTitle	boolean	false	Creates an `h1` inside the legend. Use when the radios are the only fieldset on the page
value	string	false	Set to “true” to preset the checked radio. This can also be achieved by setting the `checked` parameter on the `Radio` item to “true”.
error	`Error` (ref)	false	Configuration for validation errors
or	string	false	Text for the “Or” seperator label
clearRadios	object`<ClearRadios>`	false	Settings for for the clear selection button

Radio
Name	Type	Required	Description
id	string	true	The HTML `id` of the radio. Used for the label’s `for` attribute.
value	string	false	The HTML `value` attribute for the radio to set a preset value for the input
classes	string	false	Classes to add to the radio
checked	boolean	false	Set to “true” to select the radio when the page loads
label	`Label` (ref)	true	Settings for the radio label
other	object`<OtherRadio>` with arrays if using `Select` (ref), `Checkboxes` (ref) or `Radios` (ref)	false	Settings for a nested input, select, checkboxes, radios or textarea to provide other information in addition to the radio answer. Defaults to use input.
attributes	object	false	HTML attributes (for example, data attributes) to add to the radio input element

OtherRadio
Name	Type	Required	Description
id	string	true	The HTML `id` of the nested input. Used for the label’s `for` attribute.
classes	string	false	Classes to add to the nested input
name	string	false	The HTML `name` attribute for the nested input
value	string	false	The HTML `value` attribute for the nested input to set a preset value for the input
label	`Label` (ref)	true	Settings for the nested input’s label
width	string	false	Required 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”.
type	string	false	Sets the HTML `type` attribute for the nested `<input>`. Can be set to either: “number”, “email”, “tel”, “password”, or “search”. Defaults to “text”.
inputClasses	string	false	Classes to apply to the radio input element
otherType	string	false (unless alternative input used)	Set the type of nested input if not using default text input, using available types: “select”, “checkboxes”, “radios” or “textarea”.
open	boolean	false	Set to “true” to show the nested `other` input when page loads
selectAllChildren	boolean	false	Set to “true” when using `otherType` set to “checkboxes” to show all nested checkboxes pre-selected
attributes	object	false	HTML attributes (for example, data attributes) to add to the nested input

ClearRadios
Name	Type	Required	Description
text	string	true	The text label for the button
name	string	false	The HTML `name` attribute for the button
ariaClearText	string	true	The 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”.
ariaClearedText	string	true	The 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-xl">
  <div class="ons-question__answer ons-u-mb-l">
    <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

Nunjucksfor Example Radios With Separator
Nunjucks macro optionsfor Example Radios With Separator
HTMLfor Example Radios With Separator

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

Name	Type	Required	Description
id	string	false	The HTML `id` for the fieldset
classes	string	false	Classes to add to the fieldset
legend	string	true (unless `dontWrap` is set)	The HTML `<legend>` for the fieldset
legendClasses	string	false	Classes to add to the legend
description	string	false	Hint text following the fieldset‘s legend to help users answer
borderless	boolean	false	Set to “true” to remove the border surrounding the input and label
name	string	true	The name to apply to the radios
radios	array`<Radio>`	true	Settings for each radio
dontWrap	boolean	false	Set to “true” to prevent the radios from being wrapped in a fieldset component
legendIsQuestionTitle	boolean	false	Creates an `h1` inside the legend. Use when the radios are the only fieldset on the page
value	string	false	Set to “true” to preset the checked radio. This can also be achieved by setting the `checked` parameter on the `Radio` item to “true”.
error	`Error` (ref)	false	Configuration for validation errors
or	string	false	Text for the “Or” seperator label
clearRadios	object`<ClearRadios>`	false	Settings for for the clear selection button

Radio
Name	Type	Required	Description
id	string	true	The HTML `id` of the radio. Used for the label’s `for` attribute.
value	string	false	The HTML `value` attribute for the radio to set a preset value for the input
classes	string	false	Classes to add to the radio
checked	boolean	false	Set to “true” to select the radio when the page loads
label	`Label` (ref)	true	Settings for the radio label
other	object`<OtherRadio>` with arrays if using `Select` (ref), `Checkboxes` (ref) or `Radios` (ref)	false	Settings for a nested input, select, checkboxes, radios or textarea to provide other information in addition to the radio answer. Defaults to use input.
attributes	object	false	HTML attributes (for example, data attributes) to add to the radio input element

OtherRadio
Name	Type	Required	Description
id	string	true	The HTML `id` of the nested input. Used for the label’s `for` attribute.
classes	string	false	Classes to add to the nested input
name	string	false	The HTML `name` attribute for the nested input
value	string	false	The HTML `value` attribute for the nested input to set a preset value for the input
label	`Label` (ref)	true	Settings for the nested input’s label
width	string	false	Required 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”.
type	string	false	Sets the HTML `type` attribute for the nested `<input>`. Can be set to either: “number”, “email”, “tel”, “password”, or “search”. Defaults to “text”.
inputClasses	string	false	Classes to apply to the radio input element
otherType	string	false (unless alternative input used)	Set the type of nested input if not using default text input, using available types: “select”, “checkboxes”, “radios” or “textarea”.
open	boolean	false	Set to “true” to show the nested `other` input when page loads
selectAllChildren	boolean	false	Set to “true” when using `otherType` set to “checkboxes” to show all nested checkboxes pre-selected
attributes	object	false	HTML attributes (for example, data attributes) to add to the nested input

ClearRadios
Name	Type	Required	Description
text	string	true	The text label for the button
name	string	false	The HTML `name` attribute for the button
ariaClearText	string	true	The 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”.
ariaClearedText	string	true	The 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-xl">
  <div class="ons-question__answer ons-u-mb-l">
    <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

Nunjucksfor Example Radios With Clear Button
Nunjucks macro optionsfor Example Radios With Clear Button
HTMLfor Example Radios With Clear Button

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-l'
        })
    }}
    <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

Name	Type	Required	Description
id	string	false	The HTML `id` for the fieldset
classes	string	false	Classes to add to the fieldset
legend	string	true (unless `dontWrap` is set)	The HTML `<legend>` for the fieldset
legendClasses	string	false	Classes to add to the legend
description	string	false	Hint text following the fieldset‘s legend to help users answer
borderless	boolean	false	Set to “true” to remove the border surrounding the input and label
name	string	true	The name to apply to the radios
radios	array`<Radio>`	true	Settings for each radio
dontWrap	boolean	false	Set to “true” to prevent the radios from being wrapped in a fieldset component
legendIsQuestionTitle	boolean	false	Creates an `h1` inside the legend. Use when the radios are the only fieldset on the page
value	string	false	Set to “true” to preset the checked radio. This can also be achieved by setting the `checked` parameter on the `Radio` item to “true”.
error	`Error` (ref)	false	Configuration for validation errors
or	string	false	Text for the “Or” seperator label
clearRadios	object`<ClearRadios>`	false	Settings for for the clear selection button

Radio
Name	Type	Required	Description
id	string	true	The HTML `id` of the radio. Used for the label’s `for` attribute.
value	string	false	The HTML `value` attribute for the radio to set a preset value for the input
classes	string	false	Classes to add to the radio
checked	boolean	false	Set to “true” to select the radio when the page loads
label	`Label` (ref)	true	Settings for the radio label
other	object`<OtherRadio>` with arrays if using `Select` (ref), `Checkboxes` (ref) or `Radios` (ref)	false	Settings for a nested input, select, checkboxes, radios or textarea to provide other information in addition to the radio answer. Defaults to use input.
attributes	object	false	HTML attributes (for example, data attributes) to add to the radio input element

OtherRadio
Name	Type	Required	Description
id	string	true	The HTML `id` of the nested input. Used for the label’s `for` attribute.
classes	string	false	Classes to add to the nested input
name	string	false	The HTML `name` attribute for the nested input
value	string	false	The HTML `value` attribute for the nested input to set a preset value for the input
label	`Label` (ref)	true	Settings for the nested input’s label
width	string	false	Required 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”.
type	string	false	Sets the HTML `type` attribute for the nested `<input>`. Can be set to either: “number”, “email”, “tel”, “password”, or “search”. Defaults to “text”.
inputClasses	string	false	Classes to apply to the radio input element
otherType	string	false (unless alternative input used)	Set the type of nested input if not using default text input, using available types: “select”, “checkboxes”, “radios” or “textarea”.
open	boolean	false	Set to “true” to show the nested `other` input when page loads
selectAllChildren	boolean	false	Set to “true” when using `otherType` set to “checkboxes” to show all nested checkboxes pre-selected
attributes	object	false	HTML attributes (for example, data attributes) to add to the nested input

ClearRadios
Name	Type	Required	Description
text	string	true	The text label for the button
name	string	false	The HTML `name` attribute for the button
ariaClearText	string	true	The 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”.
ariaClearedText	string	true	The 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-xl">
  <div class="ons-question__answer ons-u-mb-l">
    <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-l">
        <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" for="christian-radio-with-clear-button"
                  aria-describedby="christian-radio-with-clear-button-label-description-hint"
                  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

Nunjucksfor Example Radios Without Border
Nunjucks macro optionsfor Example Radios Without Border
HTMLfor Example Radios Without Border

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

Name	Type	Required	Description
id	string	false	The HTML `id` for the fieldset
classes	string	false	Classes to add to the fieldset
legend	string	true (unless `dontWrap` is set)	The HTML `<legend>` for the fieldset
legendClasses	string	false	Classes to add to the legend
description	string	false	Hint text following the fieldset‘s legend to help users answer
borderless	boolean	false	Set to “true” to remove the border surrounding the input and label
name	string	true	The name to apply to the radios
radios	array`<Radio>`	true	Settings for each radio
dontWrap	boolean	false	Set to “true” to prevent the radios from being wrapped in a fieldset component
legendIsQuestionTitle	boolean	false	Creates an `h1` inside the legend. Use when the radios are the only fieldset on the page
value	string	false	Set to “true” to preset the checked radio. This can also be achieved by setting the `checked` parameter on the `Radio` item to “true”.
error	`Error` (ref)	false	Configuration for validation errors
or	string	false	Text for the “Or” seperator label
clearRadios	object`<ClearRadios>`	false	Settings for for the clear selection button

Radio
Name	Type	Required	Description
id	string	true	The HTML `id` of the radio. Used for the label’s `for` attribute.
value	string	false	The HTML `value` attribute for the radio to set a preset value for the input
classes	string	false	Classes to add to the radio
checked	boolean	false	Set to “true” to select the radio when the page loads
label	`Label` (ref)	true	Settings for the radio label
other	object`<OtherRadio>` with arrays if using `Select` (ref), `Checkboxes` (ref) or `Radios` (ref)	false	Settings for a nested input, select, checkboxes, radios or textarea to provide other information in addition to the radio answer. Defaults to use input.
attributes	object	false	HTML attributes (for example, data attributes) to add to the radio input element

OtherRadio
Name	Type	Required	Description
id	string	true	The HTML `id` of the nested input. Used for the label’s `for` attribute.
classes	string	false	Classes to add to the nested input
name	string	false	The HTML `name` attribute for the nested input
value	string	false	The HTML `value` attribute for the nested input to set a preset value for the input
label	`Label` (ref)	true	Settings for the nested input’s label
width	string	false	Required 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”.
type	string	false	Sets the HTML `type` attribute for the nested `<input>`. Can be set to either: “number”, “email”, “tel”, “password”, or “search”. Defaults to “text”.
inputClasses	string	false	Classes to apply to the radio input element
otherType	string	false (unless alternative input used)	Set the type of nested input if not using default text input, using available types: “select”, “checkboxes”, “radios” or “textarea”.
open	boolean	false	Set to “true” to show the nested `other` input when page loads
selectAllChildren	boolean	false	Set to “true” when using `otherType` set to “checkboxes” to show all nested checkboxes pre-selected
attributes	object	false	HTML attributes (for example, data attributes) to add to the nested input

ClearRadios
Name	Type	Required	Description
text	string	true	The text label for the button
name	string	false	The HTML `name` attribute for the button
ariaClearText	string	true	The 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”.
ariaClearedText	string	true	The 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" for="xls"
          aria-describedby="xls-label-description-hint" 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.

Open this example in a new tab(Example Radios With Revealed Checkboxes)

Example Radios With Revealed Checkboxes contents

Nunjucksfor Example Radios With Revealed Checkboxes
Nunjucks macro optionsfor Example Radios With Revealed Checkboxes
HTMLfor Example Radios With Revealed Checkboxes

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

Name	Type	Required	Description
id	string	false	The HTML `id` for the fieldset
classes	string	false	Classes to add to the fieldset
legend	string	true (unless `dontWrap` is set)	The HTML `<legend>` for the fieldset
legendClasses	string	false	Classes to add to the legend
description	string	false	Hint text following the fieldset‘s legend to help users answer
borderless	boolean	false	Set to “true” to remove the border surrounding the input and label
name	string	true	The name to apply to the radios
radios	array`<Radio>`	true	Settings for each radio
dontWrap	boolean	false	Set to “true” to prevent the radios from being wrapped in a fieldset component
legendIsQuestionTitle	boolean	false	Creates an `h1` inside the legend. Use when the radios are the only fieldset on the page
value	string	false	Set to “true” to preset the checked radio. This can also be achieved by setting the `checked` parameter on the `Radio` item to “true”.
error	`Error` (ref)	false	Configuration for validation errors
or	string	false	Text for the “Or” seperator label
clearRadios	object`<ClearRadios>`	false	Settings for for the clear selection button

Radio
Name	Type	Required	Description
id	string	true	The HTML `id` of the radio. Used for the label’s `for` attribute.
value	string	false	The HTML `value` attribute for the radio to set a preset value for the input
classes	string	false	Classes to add to the radio
checked	boolean	false	Set to “true” to select the radio when the page loads
label	`Label` (ref)	true	Settings for the radio label
other	object`<OtherRadio>` with arrays if using `Select` (ref), `Checkboxes` (ref) or `Radios` (ref)	false	Settings for a nested input, select, checkboxes, radios or textarea to provide other information in addition to the radio answer. Defaults to use input.
attributes	object	false	HTML attributes (for example, data attributes) to add to the radio input element

OtherRadio
Name	Type	Required	Description
id	string	true	The HTML `id` of the nested input. Used for the label’s `for` attribute.
classes	string	false	Classes to add to the nested input
name	string	false	The HTML `name` attribute for the nested input
value	string	false	The HTML `value` attribute for the nested input to set a preset value for the input
label	`Label` (ref)	true	Settings for the nested input’s label
width	string	false	Required 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”.
type	string	false	Sets the HTML `type` attribute for the nested `<input>`. Can be set to either: “number”, “email”, “tel”, “password”, or “search”. Defaults to “text”.
inputClasses	string	false	Classes to apply to the radio input element
otherType	string	false (unless alternative input used)	Set the type of nested input if not using default text input, using available types: “select”, “checkboxes”, “radios” or “textarea”.
open	boolean	false	Set to “true” to show the nested `other` input when page loads
selectAllChildren	boolean	false	Set to “true” when using `otherType` set to “checkboxes” to show all nested checkboxes pre-selected
attributes	object	false	HTML attributes (for example, data attributes) to add to the nested input

ClearRadios
Name	Type	Required	Description
text	string	true	The text label for the button
name	string	false	The HTML `name` attribute for the button
ariaClearText	string	true	The 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”.
ariaClearedText	string	true	The 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

Nunjucksfor Example Radios With Revealed Radios
Nunjucks macro optionsfor Example Radios With Revealed Radios
HTMLfor Example Radios With Revealed Radios

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

Name	Type	Required	Description
id	string	false	The HTML `id` for the fieldset
classes	string	false	Classes to add to the fieldset
legend	string	true (unless `dontWrap` is set)	The HTML `<legend>` for the fieldset
legendClasses	string	false	Classes to add to the legend
description	string	false	Hint text following the fieldset‘s legend to help users answer
borderless	boolean	false	Set to “true” to remove the border surrounding the input and label
name	string	true	The name to apply to the radios
radios	array`<Radio>`	true	Settings for each radio
dontWrap	boolean	false	Set to “true” to prevent the radios from being wrapped in a fieldset component
legendIsQuestionTitle	boolean	false	Creates an `h1` inside the legend. Use when the radios are the only fieldset on the page
value	string	false	Set to “true” to preset the checked radio. This can also be achieved by setting the `checked` parameter on the `Radio` item to “true”.
error	`Error` (ref)	false	Configuration for validation errors
or	string	false	Text for the “Or” seperator label
clearRadios	object`<ClearRadios>`	false	Settings for for the clear selection button

Radio
Name	Type	Required	Description
id	string	true	The HTML `id` of the radio. Used for the label’s `for` attribute.
value	string	false	The HTML `value` attribute for the radio to set a preset value for the input
classes	string	false	Classes to add to the radio
checked	boolean	false	Set to “true” to select the radio when the page loads
label	`Label` (ref)	true	Settings for the radio label
other	object`<OtherRadio>` with arrays if using `Select` (ref), `Checkboxes` (ref) or `Radios` (ref)	false	Settings for a nested input, select, checkboxes, radios or textarea to provide other information in addition to the radio answer. Defaults to use input.
attributes	object	false	HTML attributes (for example, data attributes) to add to the radio input element

OtherRadio
Name	Type	Required	Description
id	string	true	The HTML `id` of the nested input. Used for the label’s `for` attribute.
classes	string	false	Classes to add to the nested input
name	string	false	The HTML `name` attribute for the nested input
value	string	false	The HTML `value` attribute for the nested input to set a preset value for the input
label	`Label` (ref)	true	Settings for the nested input’s label
width	string	false	Required 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”.
type	string	false	Sets the HTML `type` attribute for the nested `<input>`. Can be set to either: “number”, “email”, “tel”, “password”, or “search”. Defaults to “text”.
inputClasses	string	false	Classes to apply to the radio input element
otherType	string	false (unless alternative input used)	Set the type of nested input if not using default text input, using available types: “select”, “checkboxes”, “radios” or “textarea”.
open	boolean	false	Set to “true” to show the nested `other` input when page loads
selectAllChildren	boolean	false	Set to “true” when using `otherType` set to “checkboxes” to show all nested checkboxes pre-selected
attributes	object	false	HTML attributes (for example, data attributes) to add to the nested input

ClearRadios
Name	Type	Required	Description
text	string	true	The text label for the button
name	string	false	The HTML `name` attribute for the button
ariaClearText	string	true	The 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”.
ariaClearedText	string	true	The 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-2xs"><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

Nunjucksfor Example Radios With Error
Nunjucks macro optionsfor Example Radios With Error
HTMLfor Example Radios With Error

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

Name	Type	Required	Description
id	string	false	The HTML `id` for the fieldset
classes	string	false	Classes to add to the fieldset
legend	string	true (unless `dontWrap` is set)	The HTML `<legend>` for the fieldset
legendClasses	string	false	Classes to add to the legend
description	string	false	Hint text following the fieldset‘s legend to help users answer
borderless	boolean	false	Set to “true” to remove the border surrounding the input and label
name	string	true	The name to apply to the radios
radios	array`<Radio>`	true	Settings for each radio
dontWrap	boolean	false	Set to “true” to prevent the radios from being wrapped in a fieldset component
legendIsQuestionTitle	boolean	false	Creates an `h1` inside the legend. Use when the radios are the only fieldset on the page
value	string	false	Set to “true” to preset the checked radio. This can also be achieved by setting the `checked` parameter on the `Radio` item to “true”.
error	`Error` (ref)	false	Configuration for validation errors
or	string	false	Text for the “Or” seperator label
clearRadios	object`<ClearRadios>`	false	Settings for for the clear selection button

Radio
Name	Type	Required	Description
id	string	true	The HTML `id` of the radio. Used for the label’s `for` attribute.
value	string	false	The HTML `value` attribute for the radio to set a preset value for the input
classes	string	false	Classes to add to the radio
checked	boolean	false	Set to “true” to select the radio when the page loads
label	`Label` (ref)	true	Settings for the radio label
other	object`<OtherRadio>` with arrays if using `Select` (ref), `Checkboxes` (ref) or `Radios` (ref)	false	Settings for a nested input, select, checkboxes, radios or textarea to provide other information in addition to the radio answer. Defaults to use input.
attributes	object	false	HTML attributes (for example, data attributes) to add to the radio input element

OtherRadio
Name	Type	Required	Description
id	string	true	The HTML `id` of the nested input. Used for the label’s `for` attribute.
classes	string	false	Classes to add to the nested input
name	string	false	The HTML `name` attribute for the nested input
value	string	false	The HTML `value` attribute for the nested input to set a preset value for the input
label	`Label` (ref)	true	Settings for the nested input’s label
width	string	false	Required 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”.
type	string	false	Sets the HTML `type` attribute for the nested `<input>`. Can be set to either: “number”, “email”, “tel”, “password”, or “search”. Defaults to “text”.
inputClasses	string	false	Classes to apply to the radio input element
otherType	string	false (unless alternative input used)	Set the type of nested input if not using default text input, using available types: “select”, “checkboxes”, “radios” or “textarea”.
open	boolean	false	Set to “true” to show the nested `other` input when page loads
selectAllChildren	boolean	false	Set to “true” when using `otherType` set to “checkboxes” to show all nested checkboxes pre-selected
attributes	object	false	HTML attributes (for example, data attributes) to add to the nested input

ClearRadios
Name	Type	Required	Description
text	string	true	The text label for the button
name	string	false	The HTML `name` attribute for the button
ariaClearText	string	true	The 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”.
ariaClearedText	string	true	The 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)

Cookies on ons.gov.uk

Radios

Overview

Example Radios contents

Nunjucks

Nunjucks macro options

HTML

When not to use this component

How to use this component

Variants

Radio with description

Example Radios With Descriptions contents

Nunjucks

Nunjucks macro options

HTML

Radio with input

Radio with visible input

Example Radios With Visible Text Input contents

Nunjucks

Nunjucks macro options

HTML

Radio with revealed input

Example Radios With Revealed Text Input contents

Nunjucks

Nunjucks macro options

HTML

Radio with revealed select

Example Radios With Revealed Select contents

Nunjucks

Nunjucks macro options

HTML

Radios with an “or” separator

Example Radios With Separator contents

Nunjucks

Nunjucks macro options

HTML

Radios with clear button

Example Radios With Clear Button contents

Nunjucks

Nunjucks macro options

HTML

Radios without a border

Example Radios Without Border contents

Nunjucks

Nunjucks macro options

HTML

Radio with revealed checkboxes

Example Radios With Revealed Checkboxes contents

Nunjucks

Nunjucks macro options

HTML

Radio with revealed radios

Example Radios With Revealed Radios contents

Nunjucks

Nunjucks macro options

HTML

How to check radios

Error messages

Example Radios With Error contents

Nunjucks

Nunjucks macro options

HTML

If a radio has not been selected

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

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

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

Help improve this page