{{ aspExample({ code: "<fieldset class=\"form__fieldset form__group\">
<legend class=\"form__label\">Are you the victim of the crime?</legend>
<div class=\"form__item–choices\">
<input class=\"form__input-choices form__input-choices–radio\" id=\"radio-example-1-yes\" type=\"radio\" name=\"radio-example-1\" value=\"radio-example-1-yes\">
<label class=\"form__label-choices\" for=\"radio-example-1-yes\">Yes</label>
</div>
<div class=\"form__item–choices\">
<input class=\"form__input-choices form__input-choices–radio\" id=\"radio-example-1-no\" type=\"radio\" name=\"radio-example-1\" value=\"radio-example-1-no\">
<label class=\"form__label-choices\" for=\"radio-example-1-no\">No</label>
</div>
</fieldset>", nunjucks: "", title: "", id: "65a92e4b08b0f", url: "" }) }}

Radios with hint

{{ aspExample({ code: "<fieldset class=\"form__fieldset form__group\" id=\"radio-example-2\">
<legend class=\"form__label\">Are you the victim of the crime?</legend>
<p class=\"form__hint\">Select No if you are reporting on behalf of someone else or if you are a witness</p>
<div class=\"form__item–choices\">
<input class=\"form__input-choices form__input-choices–radio\" id=\"radio-example-2-yes\" type=\"radio\" name=\"radio-example-2\" value=\"radio-example-2-yes\">
<label class=\"form__label-choices\" for=\"radio-example-2-yes\">Yes</label>
</div>
<div class=\"form__item–choices\">
<input class=\"form__input-choices form__input-choices–radio\" id=\"radio-example-2-no\" type=\"radio\" name=\"radio-example-2\" value=\"radio-example-2-no\">
<label class=\"form__label-choices\" for=\"radio-example-2-no\">No</label>
</div>
</fieldset>", nunjucks: "", title: "", id: "65a92e4b08be7", url: "" }) }}

Radios with submission error

{{ aspExample({ code: "<fieldset class=\"form__fieldset form__group form__group–error\" id=\"radio-example-3\">
<legend class=\"form__label\">Are you the victim of the crime?</legend>
<p class=\"form__error-message\">\"Are you the victim of the crime?\" is required</p>
<div class=\"form__item–choices\">
<input class=\"form__input-choices form__input-choices–radio\" id=\"radio-example-3-yes\" type=\"radio\" name=\"radio-example-3\" value=\"radio-example-3-yes\">
<label class=\"form__label-choices\" for=\"radio-example-3-yes\">Yes</label>
</div>
<div class=\"form__item–choices\">
<input class=\"form__input-choices form__input-choices–radio\" id=\"radio-example-3-no\" type=\"radio\" name=\"radio-example-3\" value=\"radio-example-3-no\">
<label class=\"form__label-choices\" for=\"radio-example-3-no\">No</label>
</div>
</fieldset>", nunjucks: "", title: "", id: "65a92e4b08cad", url: "" }) }}

Radios with hint and submission error

{{ aspExample({ code: "<fieldset class=\"form__fieldset form__group form__group–error\" id=\"radio-example-4\">
<legend class=\"form__label\">Are you the victim of the crime?</legend>
<p class=\"form__hint form__hint–error\">Select No if you are reporting on behalf of someone else or if you are a witness</p>
<p class=\"form__error-message\">\"Are you the victim of the crime?\" is required</p>
<div class=\"form__item–choices\">
<input class=\"form__input-choices form__input-choices–radio\" id=\"radio-example-4-yes\" type=\"radio\" name=\"radio-example-4\" value=\"radio-example-4-yes\">
<label class=\"form__label-choices\" for=\"radio-example-4-yes\">Yes</label>
</div>
<div class=\"form__item–choices\">
<input class=\"form__input-choices form__input-choices–radio\" id=\"radio-example-4-no\" type=\"radio\" name=\"radio-example-4\" value=\"radio-example-4-no\">
<label class=\"form__label-choices\" for=\"radio-example-4-no\">No</label>
</div>
</fieldset>", nunjucks: "", title: "", id: "66701384698b8", url: "" }) }}

Radios with conditional required text input

{{ aspExample({ code: "<fieldset class=\"form__fieldset form__group\" id=\"radio-example-condition-1\">
<legend class=\"form__label\">Was capture successful?</legend>
<p class=\"form__hint\">Check \"No\" to show conditional required text input</p>
<div class=\"form__item–choices\">
<input class=\"form__input-choices form__input-choices–radio\" id=\"radio-example-condition-1-yes\" name=\"radio-example-condition-1\" type=\"radio\" value=\"true\">
<label class=\"form__label-choices\" for=\"radio-example-condition-1-yes\">Yes</label>
</div>
<div class=\"form__item–choices\">
<input class=\"form__input-choices form__input-choices–radio\" id=\"radio-example-condition-1-no\" name=\"radio-example-condition-1\" type=\"radio\" value=\"true\">
<label class=\"form__label-choices\" for=\"radio-example-condition-1-no\">No</label>
</div>
<div class=\"form__indent\" data-parent=\"radio-example-condition-1-no\" data-child-required>
<div class=\"form__group\" id=\"radio-example-condition-1-child\">
<label class=\"form__label\" for=\"radio-example-condition-1-no-additional\">Reason <noscript>(required if \"Was capture successful?\" is \"No\")</noscript></label>
<input class=\"form__input\" id=\"radio-example-condition-1-no-additional\" type=\"text\">
</div>
</div>
</fieldset>", nunjucks: "", title: "", id: "663cd71b5727d", url: "" }) }}

WIP – noscript text (required if “Question” is “Option to reveal conditional content”)

Radios with conditional optional textarea

{{ aspExample({ code: "<fieldset class=\"form__fieldset form__group\" id=\"radio-example-condition-2\">
<legend class=\"form__label\">Was capture successful?</legend>
<p class=\"form__hint\">Check \"No\" to show conditional optional textarea</p>
<div class=\"form__item–choices\">
<input class=\"form__input-choices form__input-choices–radio\" id=\"radio-example-condition-2-yes\" name=\"radio-example-condition-2\" type=\"radio\" value=\"true\">
<label class=\"form__label-choices\" for=\"radio-example-condition-2-yes\">Yes</label>
</div>
<div class=\"form__item–choices\">
<input class=\"form__input-choices form__input-choices–radio\" id=\"radio-example-condition-2-no\" name=\"radio-example-condition-2\" type=\"radio\" value=\"true\">
<label class=\"form__label-choices\" for=\"radio-example-condition-2-no\">No</label>
</div>
<div class=\"form__indent\" data-parent=\"radio-example-condition-2-no\">
<div class=\"form__group\" id=\"radio-example-condition-2-child\">
<label class=\"form__label\" for=\"radio-example-condition-2-no-additional\">Reason (optional)</label>
<textarea class=\"form__textarea\" id=\"radio-example-condition-2-no-additional\" name=\"text-area\" rows=\"6\" maxlength=\"3000\" data-countdown></textarea>
<p id=\"radio-example-condition-2-no-additional-countdown\">You can enter up to 3000 characters</p>
</div>
</div>
</fieldset>", nunjucks: "", title: "", id: "668e7b02cf92a", url: "" }) }}

Radios with conditional optional select

{{ aspExample({ code: "<fieldset class=\"form__fieldset form__group\" id=\"radio-example-condition-3\">
<legend class=\"form__label\">Was capture successful?</legend>
<p class=\"form__hint\">Check \"No\" to show conditional optional select</p>
<div class=\"form__item–choices\">
<input class=\"form__input-choices form__input-choices–radio\" id=\"radio-example-condition-3-yes\" name=\"radio-example-condition-3\" type=\"radio\" value=\"true\">
<label class=\"form__label-choices\" for=\"radio-example-condition-3-yes\">Yes</label>
</div>
<div class=\"form__item–choices\">
<input class=\"form__input-choices form__input-choices–radio\" id=\"radio-example-condition-3-no\" name=\"radio-example-condition-3\" type=\"radio\" value=\"true\">
<label class=\"form__label-choices\" for=\"radio-example-condition-3-no\">No</label>
</div>
<div class=\"form__indent\" data-parent=\"radio-example-condition-3-no\">
<div class=\"form__group\" id=\"radio-example-condition-3-child\">
<label class=\"form__label\" for=\"radio-example-condition-3-no-additional\">Reason (optional)</label>
<select class=\"form__input\" id=\"radio-example-condition-3-no-additional\">
<option value=\"radio-example-condition-3-select-placeholder\" id=\"radio-example-condition-3-select-placeholder\">Select Option</option>
<option value=\"radio-example-condition-3-select-option-1\" id=\"radio-example-condition-3-select-option-1\">Option 1</option>
<option value=\"radio-example-condition-3-select-option-1\" id=\"radio-example-condition-3-select-option-2\">Option 2</option>
</select>
</div>
</div>
</fieldset>", nunjucks: "", title: "", id: "668e7b02cf97d", url: "" }) }}

Radios with conditional required radios

{{ aspExample({ code: "<fieldset class=\"form__fieldset form__group\" id=\"radio-example-condition-4\">
<legend class=\"form__label\">Was the informant calling in a role as a professional agency?</legend>
<p class=\"form__hint\">Check \"No\" to show conditional required radios</p>
<div class=\"form__item–choices\">
<input class=\"form__input-choices form__input-choices–radio\" id=\"radio-example-condition-4-yes\" name=\"radio-example-condition-4-a\" type=\"radio\" value=\"Yes\">
<label class=\"form__label-choices\" for=\"radio-example-condition-4-yes\">Yes</label>
</div>
<div class=\"form__item–choices\">
<input class=\"form__input-choices form__input-choices–radio\" id=\"radio-example-condition-4-no\" name=\"radio-example-condition-4-a\" type=\"radio\" value=\"No\">
<label class=\"form__label-choices\" for=\"radio-example-condition-4-no\">No</label>
</div>
<div class=\"form__indent\" data-parent=\"radio-example-condition-4-no\" data-child-required>
<fieldset class=\"form__fieldset form__group\" id=\"radio-example-condition-4-child\">
<legend class=\"form__label\">Full name <noscript>(required if \"Was the informant calling in a role as a professional agency?\" is \"No\")</noscript></legend>
<p class=\"form__hint\">Refer to NSIR/NCRS recommendations.</p>
<div class=\"form__item–choices\">
<input class=\"form__input-choices form__input-choices–radio\" id=\"radio-4-b-1\" name=\"radio-example-condition-4-b\" type=\"radio\" value=\"Yes\">
<label class=\"form__label-choices\" for=\"radio-4-b-1\">Yes</label>
</div>
<div class=\"form__item–choices\">
<input class=\"form__input-choices form__input-choices–radio\" id=\"radio-4-b-2\" name=\"radio-example-condition-4-b\" type=\"radio\" value=\"No\">
<label class=\"form__label-choices\" for=\"radio-4-b-2\">No</label>
</div>
</fieldset>
</div>
</fieldset>", nunjucks: "", title: "", id: "669113dcb0e69", url: "" }) }}

Radios with toggleable conditional inputs

{{ aspExample({ code: "<fieldset class=\"form__fieldset form__group\" id=\"radio-example-condition-5\">
<legend class=\"form__label\">Was capture successful?</legend>
<p class=\"form__hint\">Check \"Yes\" and \"No\" to show conditional content</p>
<div class=\"form__item–choices\">
<input class=\"form__input-choices form__input-choices–radio\" id=\"radio-example-condition-5-yes\" name=\"radio-example-condition-5\" type=\"radio\" value=\"true\">
<label class=\"form__label-choices\" for=\"radio-example-condition-5-yes\">Yes</label>
</div>
<div class=\"form__indent\" data-parent=\"radio-example-condition-5-yes\" data-child-required>
<div class=\"form__group\" id=\"radio-example-condition-5-no-child\">
<label class=\"form__label\" for=\"radio-example-condition-5-no-additional\">Reason <noscript>(required if \"Was capture successful?\" is \"Yes\")</noscript></label>
<textarea class=\"form__textarea\" id=\"radio-example-condition-5-no-additional\" name=\"text-area\" rows=\"6\" maxlength=\"3000\" data-countdown></textarea>
<p id=\"radio-example-condition-5-no-additional-countdown\">You can enter up to 3000 characters</p>
</div>
</div>
<div class=\"form__item–choices\">
<input class=\"form__input-choices form__input-choices–radio\" id=\"radio-example-condition-5-no\" name=\"radio-example-condition-5\" type=\"radio\" value=\"true\">
<label class=\"form__label-choices\" for=\"radio-example-condition-5-no\">No</label>
</div>
<div class=\"form__indent\" data-parent=\"radio-example-condition-5-no\">
<div class=\"form__group\" id=\"radio-example-condition-5-no-child\">
<label class=\"form__label\" for=\"radio-example-condition-5-no-additional\">Reason (optional)</label>
<select class=\"form__input\" id=\"radio-example-condition-5-no-additional\">
<option value=\"radio-example-condition-5-select-placeholder\" id=\"radio-example-condition-5-select-placeholder\">Select Option</option>
<option value=\"radio-example-condition-5-select-option-1\" id=\"radio-example-condition-5-select-option-1\">Option 1</option>
<option value=\"radio-example-condition-5-select-option-1\" id=\"radio-example-condition-5-select-option-2\">Option 2</option>
</select>
</div>
</div>
</fieldset>", nunjucks: "", title: "", id: "668e7b02cf9ff", url: "" }) }}

Radios with conditional required text input with hint and submission error

{{ aspExample({ code: "<fieldset class=\"form__fieldset form__group\" id=\"radio-example-condition-5\">
<legend class=\"form__label\">Was capture successful?</legend>
<div class=\"form__item–choices\">
<input class=\"form__input-choices form__input-choices–radio\" id=\"radio-example-condition-5-yes\" name=\"radio-example-condition-5\" type=\"radio\" value=\"true\">
<label class=\"form__label-choices\" for=\"radio-example-condition-5-yes\">Yes</label>
</div>
<div class=\"form__item–choices\">
<input class=\"form__input-choices form__input-choices–radio\" id=\"radio-example-condition-5-no\" name=\"radio-example-condition-5\" type=\"radio\" value=\"true\" checked>
<label class=\"form__label-choices\" for=\"radio-example-condition-5-no\">No</label>
</div>
<div class=\"form__indent form__group form__group–error\" data-parent=\"radio-example-condition-5-no\" data-child-required>
<div class=\"form__group form__group–error\">
<label class=\"form__label\" for=\"radio-example-condition-5-no-additional\">Reason <noscript>(required if \"Was capture successful?\" is \"No\")</noscript></label>
<p class=\"form__hint form__hint–error\">Hint</p>
<p class=\"form__error-message\">\"Reason\" is required</p>
<input class=\"form__input\" id=\"radio-example-condition-5-no-additional\" type=\"text\">
</div>
</div>
</fieldset>", nunjucks: "", title: "", id: "668e7b02cfa72", url: "" }) }}

Inline radios

{{ aspExample({ code: "<fieldset class=\"form__fieldset form__group\" id=\"radio-inline-example\">
<legend class=\"form__label\">Was capture successful?</legend>
<div class=\"form__group–inner form__group–inline-choices\">
<div class=\"form__item–choices\">
<input class=\"form__input-choices form__input-choices–radio\" id=\"radio-inline-example-yes\" name=\"radio-inline-example\" type=\"radio\" value=\"true\">
<label class=\"form__label-choices\" for=\"radio-inline-example-yes\">Yes</label>
</div>
<div class=\"form__item–choices\">
<input class=\"form__input-choices form__input-choices–radio\" id=\"radio-inline-example-no\" name=\"radio-inline-example\" type=\"radio\" value=\"true\" checked>
<label class=\"form__label-choices\" for=\"radio-inline-example-no\">No</label>
</div>
</div>
</fieldset>", nunjucks: "", title: "", id: "669e6bab11e9e", url: "" }) }}

WIP – Wrap up to two radios on one single line, where the radios have short labels. Do not wrap on conditional content

When to use this component

Use the radio button input component when you need to present a list of no more than 7 options with only one possible selection. This is based on Millers’ Law (Ask JS).

When not to use this component

Do not use the radio button input component for lists more than six options, with only one possible selection. Use a select component.

If a user has the option to select more than one option, use a checkboxes.

Status of development

The below criteria all need to be met for a component to be considered as fully developed for use within the ASP Digital Design System.


{{ aspTable({
head: [
{ text: 'Development criteria'},
{ text: 'Status'}
],
rows: [
{
cells: [
{ text: 'WCAG 2.2 compliant'},
{ html: '<span class="status">Not started</span>'}
]
},
{
cells: [
{ text: 'WCAG 2.1 compliant'},
{ html: '<span class="status status–green">Completed</span>'}
]
},
{
cells: [
{ text: 'HTML / Nunjucks version'},
{ html: '<span class="status status–yellow">In Progress</span>'}
]
},
{
cells: [
{ text: 'Figma version'},
{ html: '<span class="status status">Not started</span>'}
]
},
{
cells: [
{ text: 'M365 versions'},
{ html: '<span class="status status">Not started</span>'}
]
},
{
cells: [
{ text: 'Documentation'},
{ html: '<span class="status status–yellow">In progress</span>'}
]
}
]
}) }}