Skip to content
ASP Digital Design System

Your web browser is out of date

Your web browser (the software you use to access the internet) is out of date. You need to update it or use a different web browser to ensure you can complete this form.

Cookies disabled

Cookies are currently not enabled in your web browser. You need to enable cookies to ensure you can complete this form.

Radios

A group of radios is known as a radio group

Open this example in a new tab: radios

<fieldset class="asp-form__group" id="change-radio-example-1">  
  <legend class="asp-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>

Radios with hint

Open this example in a new tab: radios

<fieldset class="asp-form__group" id="change-radio-example-2">  
  <legend class="asp-form__label">Are you the victim of the crime?</legend>  
  <p class="asp-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>

Radios with submission error

Open this example in a new tab: radios

<fieldset class="asp-form__group asp-form__group--error" id="change-radio-example-3">  
  <legend class="asp-form__label">Are you the victim of the crime?</legend>  
  <p class="asp-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>

Radios with hint and submission error

Open this example in a new tab: radios

<fieldset class="asp-form__group asp-form__group--error" id="change-radio-example-4">  
  <legend class="asp-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="asp-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>

Radios with conditional required text input

WIP -- When JavaScript is enabled, choosing an option in a parent control reveals any related child fields. When JavaScript is disabled, those child fields are always shown instead, but indented so the relationship is still clear.

If a user fills in a child field without selecting its parent (something that can happen in a non‑JavaScript journey), the form should validate this on submission and explain that the parent choice is required. This keeps the behaviour consistent, prevents accidental or mismatched answers, and avoids confusion.

Although this isn’t yet standard practice everywhere, it has been introduced in some systems and may become a recommended approach from early 2026.

WIP -- For no JS fallback (on conditional content):
-- the conditional content will show (by default)
-- add in noscript text to the label (required if “Question [parent Label]” is “Option to reveal conditional content”)

Open this example in a new tab: radios

<fieldset class="asp-form__group" id="change-radio-example-5">  
  <legend class="asp-form__label">Was capture successful?</legend>  
  <p class="asp-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-5-yes" name="radio-example-5" type="radio" value="true">  
    <label class="form__label-choices" for="radio-example-5-yes">Yes</label>  
  </div>  
  <div class="form__item--choices">  
    <input class="form__input-choices form__input-choices--radio" id="radio-example-5-no" name="radio-example-5" type="radio" value="true">  
    <label class="form__label-choices" for="radio-example-5-no">No</label>  
  </div>  
  <div class="form__indent" data-parent="radio-example-5-no" data-child-required>  
    <div class="asp-form__group" id="radio-example-5-child">  
      <label class="asp-form__label" for="radio-example-5-no-additional">Reason <noscript>(required if "Was capture successful?" is "No")</noscript></label>  
      <input class="form__input" id="radio-example-5-no-additional" type="text">  
    </div>  
  </div>  
</fieldset>

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

Radios with conditional optional textarea

Open this example in a new tab: radios

<fieldset class="asp-form__group" id="change-radio-example-6">  
  <legend class="asp-form__label">Was capture successful?</legend>  
  <p class="asp-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-6-yes" name="radio-example-6" type="radio" value="true">  
    <label class="form__label-choices" for="radio-example-6-yes">Yes</label>  
  </div>  
  <div class="form__item--choices">  
    <input class="form__input-choices form__input-choices--radio" id="radio-example-6-no" name="radio-example-6" type="radio" value="true">  
    <label class="form__label-choices" for="radio-example-6-no">No</label>  
  </div>  
  <div class="form__indent" data-parent="radio-example-6-no">  
    <div class="asp-form__group" id="radio-example-6-child">  
      <label class="asp-form__label" for="radio-example-6-no-additional">Reason (optional)</label>  
      <textarea class="form__textarea" id="radio-example-6-no-additional" name="text-area" rows="6" maxlength="3000" data-countdown></textarea>  
      <p id="radio-example-6-no-additional-countdown">You can enter up to 3000 characters</p>  
    </div>  
  </div>  
</fieldset>

Radios with conditional optional select

Open this example in a new tab: radios

<fieldset class="asp-form__group" id="change-radio-example-7">  
  <legend class="asp-form__label">Was capture successful?</legend>  
  <p class="asp-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-7-yes" name="radio-example-7" type="radio" value="true">  
    <label class="form__label-choices" for="radio-example-7-yes">Yes</label>  
  </div>  
  <div class="form__item--choices">  
    <input class="form__input-choices form__input-choices--radio" id="radio-example-7-no" name="radio-example-7" type="radio" value="true">  
    <label class="form__label-choices" for="radio-example-7-no">No</label>  
  </div>  
  <div class="form__indent" data-parent="radio-example-7-no">  
    <div class="asp-form__group" id="radio-example-7-child">  
      <label class="asp-form__label" for="radio-example-7-no-additional">Reason (optional)</label>  
      <select class="form__input" id="radio-example-7-no-additional">  
        <option value="radio-example-7-select-placeholder" id="radio-example-7-select-placeholder">Select Option</option>  
        <option value="radio-example-7-select-option-1" id="radio-example-7-select-option-1">Option 1</option>  
        <option value="radio-example-7-select-option-1" id="radio-example-7-select-option-2">Option 2</option>  
      </select>  
    </div>  
  </div>  
</fieldset>

Radios with conditional required radios

Open this example in a new tab: radios

<fieldset class="asp-form__group" id="change-radio-example-8">  
  <legend class="asp-form__label">Was the informant calling in a role as a professional agency?</legend>  
  <p class="asp-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-8-yes" name="radio-example-8-a" type="radio" value="Yes">  
    <label class="form__label-choices" for="radio-example-8-yes">Yes</label>  
  </div>  
  <div class="form__item--choices">  
    <input class="form__input-choices form__input-choices--radio" id="radio-example-8-no" name="radio-example-8-a" type="radio" value="No">  
    <label class="form__label-choices" for="radio-example-8-no">No</label>  
  </div>  
  <div class="form__indent" data-parent="radio-example-8-no" data-child-required>  
    <fieldset class="asp-form__group" id="radio-example-8-child">  
      <legend class="asp-form__label">Full name <noscript>(required if "Was the informant calling in a role as a professional agency?" is "No")</noscript></legend>  
      <p class="asp-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-8-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-8-b" type="radio" value="No">  
        <label class="form__label-choices" for="radio-4-b-2">No</label>  
      </div>  
    </fieldset>  
  </div>  
</fieldset>

Radios with toggleable conditional inputs

Open this example in a new tab: radios

<fieldset class="asp-form__group" id="change-radio-example-9">  
  <legend class="asp-form__label">Was capture successful?</legend>  
  <p class="asp-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-9-yes" name="radio-example-9" type="radio" value="true">  
    <label class="form__label-choices" for="radio-example-9-yes">Yes</label>  
  </div>  
  <div class="form__indent" data-parent="radio-example-9-yes" data-child-required>  
    <div class="asp-form__group" id="radio-example-9-no-child">  
      <label class="asp-form__label" for="radio-example-9-no-additional">Reason <noscript>(required if "Was capture successful?" is "Yes")</noscript></label>  
      <textarea class="form__textarea" id="radio-example-9-no-additional" name="text-area" rows="6" maxlength="3000" data-countdown></textarea>  
      <p id="radio-example-9-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-9-no" name="radio-example-9" type="radio" value="true">  
    <label class="form__label-choices" for="radio-example-9-no">No</label>  
  </div>  
  <div class="form__indent" data-parent="radio-example-9-no">  
    <div class="asp-form__group" id="radio-example-9-no-child">  
      <label class="asp-form__label" for="radio-example-9-no-additional">Reason (optional)</label>  
      <select class="form__input" id="radio-example-9-no-additional">  
        <option value="radio-example-9-select-placeholder" id="radio-example-9-select-placeholder">Select Option</option>  
        <option value="radio-example-9-select-option-1" id="radio-example-9-select-option-1">Option 1</option>  
        <option value="radio-example-9-select-option-1" id="radio-example-9-select-option-2">Option 2</option>  
      </select>  
    </div>  
  </div>  
</fieldset>

Radios with conditional required text input with hint and submission error

Open this example in a new tab: radios

<fieldset class="asp-form__group" id="change-radio-example-10">  
  <legend class="asp-form__label">Was capture successful?</legend>  
  <div class="form__item--choices">  
    <input class="form__input-choices form__input-choices--radio" id="radio-example-10-yes" name="radio-example-10" type="radio" value="true">  
    <label class="form__label-choices" for="radio-example-10-yes">Yes</label>  
  </div>  
  <div class="form__item--choices">  
    <input class="form__input-choices form__input-choices--radio" id="radio-example-10-no" name="radio-example-10" type="radio" value="true" checked>  
    <label class="form__label-choices" for="radio-example-10-no">No</label>  
  </div>  
  <div class="form__indent" data-parent="radio-example-10-no" data-child-required>  
    <div class="asp-form__group asp-form__group--error">  
      <label class="asp-form__label" for="radio-example-10-no-additional">Reason <noscript>(required if "Was capture successful?" is "No")</noscript></label>  
      <p class="form__hint form__hint--error">Hint</p>  
      <p class="asp-form__error-message">"Reason" is required</p>  
      <input class="form__input form__input--error" id="radio-example-10-no-additional" type="text">  
    </div>  
  </div>  
</fieldset>

Inline radios

Open this example in a new tab: radios

<fieldset class="asp-form__group" id="change-radio-example-11">  
  <legend class="asp-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-example-11-yes" name="radio-example-11" type="radio" value="true">  
      <label class="form__label-choices" for="radio-example-11-yes">Yes</label>  
    </div>  
    <div class="form__item--choices">  
      <input class="form__input-choices form__input-choices--radio" id="radio-example-11-no" name="radio-example-11" type="radio" value="true" checked>  
      <label class="form__label-choices" for="radio-example-11-no">No</label>  
    </div>  
  </div>  
</fieldset>

WIP -- Wrap up to two radios on one single line, where the radios have short labels. Do not wrap the radio group if one radio within that group shows conditional content on select.

When to use this component

Use the radio button input component when there are 7 or fewer options and only one selection is allowed, based on Miller’s Law.

Exception: When the number of options are variable or unknown, may grow beyond 7, and supporting both patterns would add unnecessary code logic, use a select instead. This avoids inconsistent UI on the same question, keeping the experience consistent (Krug’s Law), and prevents accidental taps on mobile where long radio lists expose touch targets while scrolling.

WIP -- Only one option can open conditional content per radioGroup (radioGroup is a set of radios)

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.

Do not use a single radio button for a single selection (like “I agree to…”) or as part of a selection that can be removed, as they cannot be unchecked, instead use a checkbox.

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.

Development criteria Status
WCAG 2.2 compliant Not started
WCAG 2.1 compliant Completed
HTML / Nunjucks version In Progress
Figma version Not started
M365 versions Not started
Documentation In progress

Make a change to the Design System

Suggest an edit to this system, or any of the components in it, by submitting a Design System change request.

Published 3 May 2024
Last updated 14 April 2026