Components

Radios

Where do you live?

<div id="where-do-you-live" class="govuk-form-group">
  <fieldset
    aria-describedby="where-do-you-live-hint"
    class="govuk-fieldset"
  >
    <legend class="govuk-fieldset__legend">
      <h1 class="govuk-heading-l">
        Where do you live?
      </h1>
    </legend>
    <div class="govuk-radios">
      <div class="govuk-radios__item">
        <input
          type="radio"
          value="england"
          name="where-do-you-live"
          id="where-do-you-live-radio-0"
          class="govuk-radios__input"
        />
        <label
          for="where-do-you-live-radio-0"
          class="govuk-label govuk-radios__label"
        >
          England
        </label>
      </div>
      <div class="govuk-radios__item">
        <input
          type="radio"
          value="scotland"
          name="where-do-you-live"
          id="where-do-you-live-radio-1"
          class="govuk-radios__input"
        />
        <label
          for="where-do-you-live-radio-1"
          class="govuk-label govuk-radios__label"
        >
          Scotland
        </label>
      </div>
      <div class="govuk-radios__item">
        <input
          type="radio"
          value="wales"
          name="where-do-you-live"
          id="where-do-you-live-radio-2"
          class="govuk-radios__input"
        />
        <label
          for="where-do-you-live-radio-2"
          class="govuk-label govuk-radios__label"
        >
          Wales
        </label>
      </div>
      <div class="govuk-radios__item">
        <input
          type="radio"
          value="northern-ireland"
          name="where-do-you-live"
          id="where-do-you-live-radio-3"
          class="govuk-radios__input"
        />
        <label
          for="where-do-you-live-radio-3"
          class="govuk-label govuk-radios__label"
        >
          Northern Ireland
        </label>
      </div>
    </div>
  </fieldset>
</div>
<Radios
  label={
    <h1 className="govuk-heading-l">
      Where do you live?
    </h1>
  }
  name="where-do-you-live"
  options={[
    {
      value: "england",
      label: "England",
    },
    {
      value: "scotland",
      label: "Scotland",
    },
    {
      value: "wales",
      label: "Wales",
    },
    {
      value: "northern-ireland",
      label: "Northern Ireland",
    },
  ]}
/>
Props
Name Type Default Description
id string - 'id' attribute to place on the base HTML element HTML id (If not specified then the name will be used)
classBlock string - Block name override in BEM style classes applied to all elements
classModifiers other - BEM style modifiers to apply to the base HTML element
className string - Extra classes to apply to the base HTML element
accept string -
alt string -
autoComplete string -
autoFocus boolean -
capture other -
checked boolean -
crossOrigin string -
disabled boolean -
form string -
formAction string -
formEncType string -
formMethod string -
formNoValidate boolean -
formTarget string -
height other -
list string -
max other -
maxLength number -
min other -
minLength number -
multiple boolean -
name string -
pattern string -
placeholder string -
readOnly boolean -
required boolean -
size number -
src string -
step other -
type string -
value other -
width other -
onChange function -
defaultChecked boolean -
defaultValue other -
suppressContentEditableWarning boolean -
suppressHydrationWarning boolean -
accessKey string -
contentEditable other -
contextMenu string -
dir string -
draggable other -
hidden boolean -
lang string -
slot string -
spellCheck other -
style other -
tabIndex number -
title string -
translate enum -
radioGroup string -
role string -
about string -
datatype string -
inlist other -
prefix string -
property string -
resource string -
typeof string -
vocab string -
autoCapitalize string -
autoCorrect string -
autoSave string -
color string -
itemProp string -
itemScope boolean -
itemType string -
itemID string -
itemRef string -
results number -
security string -
unselectable enum -
inputMode enum - Hints at the type of data that might be entered by the user while editing the element or its contents
is string - Specify that a standard HTML element should behave like a defined custom built-in element
aria-activedescendant string - Identifies the currently active element when DOM focus is on a composite widget, textbox, group, or application.
aria-atomic other - Indicates whether assistive technologies will present all, or only parts of, the changed region based on the change notifications defined by the aria-relevant attribute.
aria-autocomplete enum - Indicates whether inputting text could trigger display of one or more predictions of the user's intended value for an input and specifies how predictions would be presented if they are made.
aria-busy other - Indicates an element is being modified and that assistive technologies MAY want to wait until the modifications are complete before exposing them to the user.
aria-checked other - Indicates the current "checked" state of checkboxes, radio buttons, and other widgets.
aria-colcount number - Defines the total number of columns in a table, grid, or treegrid.
aria-colindex number - Defines an element's column index or position with respect to the total number of columns within a table, grid, or treegrid.
aria-colspan number - Defines the number of columns spanned by a cell or gridcell within a table, grid, or treegrid.
aria-controls string - Identifies the element (or elements) whose contents or presence are controlled by the current element.
aria-current other - Indicates the element that represents the current item within a container or set of related elements.
aria-describedby string - Identifies the element (or elements) that describes the object.
aria-details string - Identifies the element that provides a detailed, extended description for the object.
aria-disabled other - Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable.
aria-dropeffect enum - Indicates what functions can be performed when a dragged object is released on the drop target.
aria-errormessage string - Identifies the element that provides an error message for the object.
aria-expanded other - Indicates whether the element, or another grouping element it controls, is currently expanded or collapsed.
aria-flowto string - Identifies the next element (or elements) in an alternate reading order of content which, at the user's discretion, allows assistive technology to override the general default of reading in document source order.
aria-grabbed other - Indicates an element's "grabbed" state in a drag-and-drop operation.
aria-haspopup other - Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element.
aria-hidden other - Indicates whether the element is exposed to an accessibility API.
aria-invalid other - Indicates the entered value does not conform to the format expected by the application.
aria-keyshortcuts string - Indicates keyboard shortcuts that an author has implemented to activate or give focus to an element.
aria-label string - Defines a string value that labels the current element.
aria-labelledby string - Identifies the element (or elements) that labels the current element.
aria-level number - Defines the hierarchical level of an element within a structure.
aria-live enum - Indicates that an element will be updated, and describes the types of updates the user agents, assistive technologies, and user can expect from the live region.
aria-modal other - Indicates whether an element is modal when displayed.
aria-multiline other - Indicates whether a text box accepts multiple lines of input or only a single line.
aria-multiselectable other - Indicates that the user may select more than one item from the current selectable descendants.
aria-orientation enum - Indicates whether the element's orientation is horizontal, vertical, or unknown/ambiguous.
aria-owns string - Identifies an element (or elements) in order to define a visual, functional, or contextual parent/child relationship between DOM elements where the DOM hierarchy cannot be used to represent the relationship.
aria-placeholder string - Defines a short hint (a word or short phrase) intended to aid the user with data entry when the control has no value. A hint could be a sample value or a brief description of the expected format.
aria-posinset number - Defines an element's number or position in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM.
aria-pressed other - Indicates the current "pressed" state of toggle buttons.
aria-readonly other - Indicates that the element is not editable, but is otherwise operable.
aria-relevant enum - Indicates what notifications the user agent will trigger when the accessibility tree within a live region is modified.
aria-required other - Indicates that user input is required on the element before a form may be submitted.
aria-roledescription string - Defines a human-readable, author-localized description for the role of an element.
aria-rowcount number - Defines the total number of rows in a table, grid, or treegrid.
aria-rowindex number - Defines an element's row index or position with respect to the total number of rows within a table, grid, or treegrid.
aria-rowspan number - Defines the number of rows spanned by a cell or gridcell within a table, grid, or treegrid.
aria-selected other - Indicates the current "selected" state of various widgets.
aria-setsize number - Defines the number of items in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM.
aria-sort enum - Indicates if items in a table or grid are sorted in ascending or descending order.
aria-valuemax number - Defines the maximum allowed value for a range widget.
aria-valuemin number - Defines the minimum allowed value for a range widget.
aria-valuenow number - Defines the current value for a range widget.
aria-valuetext string - Defines the human readable text alternative of aria-valuenow for a range widget.
dangerouslySetInnerHTML other -
onCopy function -
onCopyCapture function -
onCut function -
onCutCapture function -
onPaste function -
onPasteCapture function -
onCompositionEnd function -
onCompositionEndCapture function -
onCompositionStart function -
onCompositionStartCapture function -
onCompositionUpdate function -
onCompositionUpdateCapture function -
onFocus function -
onFocusCapture function -
onBlur function -
onBlurCapture function -
onChangeCapture function -
onBeforeInput function -
onBeforeInputCapture function -
onInput function -
onInputCapture function -
onReset function -
onResetCapture function -
onSubmit function -
onSubmitCapture function -
onInvalid function -
onInvalidCapture function -
onLoad function -
onLoadCapture function -
onError function -
onErrorCapture function -
onKeyDown function -
onKeyDownCapture function -
onKeyPress function -
onKeyPressCapture function -
onKeyUp function -
onKeyUpCapture function -
onAbort function -
onAbortCapture function -
onCanPlay function -
onCanPlayCapture function -
onCanPlayThrough function -
onCanPlayThroughCapture function -
onDurationChange function -
onDurationChangeCapture function -
onEmptied function -
onEmptiedCapture function -
onEncrypted function -
onEncryptedCapture function -
onEnded function -
onEndedCapture function -
onLoadedData function -
onLoadedDataCapture function -
onLoadedMetadata function -
onLoadedMetadataCapture function -
onLoadStart function -
onLoadStartCapture function -
onPause function -
onPauseCapture function -
onPlay function -
onPlayCapture function -
onPlaying function -
onPlayingCapture function -
onProgress function -
onProgressCapture function -
onRateChange function -
onRateChangeCapture function -
onSeeked function -
onSeekedCapture function -
onSeeking function -
onSeekingCapture function -
onStalled function -
onStalledCapture function -
onSuspend function -
onSuspendCapture function -
onTimeUpdate function -
onTimeUpdateCapture function -
onVolumeChange function -
onVolumeChangeCapture function -
onWaiting function -
onWaitingCapture function -
onAuxClick function -
onAuxClickCapture function -
onClick function -
onClickCapture function -
onContextMenu function -
onContextMenuCapture function -
onDoubleClick function -
onDoubleClickCapture function -
onDrag function -
onDragCapture function -
onDragEnd function -
onDragEndCapture function -
onDragEnter function -
onDragEnterCapture function -
onDragExit function -
onDragExitCapture function -
onDragLeave function -
onDragLeaveCapture function -
onDragOver function -
onDragOverCapture function -
onDragStart function -
onDragStartCapture function -
onDrop function -
onDropCapture function -
onMouseDown function -
onMouseDownCapture function -
onMouseEnter function -
onMouseLeave function -
onMouseMove function -
onMouseMoveCapture function -
onMouseOut function -
onMouseOutCapture function -
onMouseOver function -
onMouseOverCapture function -
onMouseUp function -
onMouseUpCapture function -
onSelect function -
onSelectCapture function -
onTouchCancel function -
onTouchCancelCapture function -
onTouchEnd function -
onTouchEndCapture function -
onTouchMove function -
onTouchMoveCapture function -
onTouchStart function -
onTouchStartCapture function -
onPointerDown function -
onPointerDownCapture function -
onPointerMove function -
onPointerMoveCapture function -
onPointerUp function -
onPointerUpCapture function -
onPointerCancel function -
onPointerCancelCapture function -
onPointerEnter function -
onPointerEnterCapture function -
onPointerLeave function -
onPointerLeaveCapture function -
onPointerOver function -
onPointerOverCapture function -
onPointerOut function -
onPointerOutCapture function -
onGotPointerCapture function -
onGotPointerCaptureCapture function -
onLostPointerCapture function -
onLostPointerCaptureCapture function -
onScroll function -
onScrollCapture function -
onWheel function -
onWheelCapture function -
onAnimationStart function -
onAnimationStartCapture function -
onAnimationEnd function -
onAnimationEndCapture function -
onAnimationIteration function -
onAnimationIterationCapture function -
onTransitionEnd function -
onTransitionEndCapture function -
error string - Error message
hint string - Hint
label other - REQUIRED. Label
options other - REQUIRED. List of options to select from

When to use this component

Use the radios component when users can only select one option from a list.

When not to use this component

Do not use the radios component if users might need to select more than one option. In this case, you should use the checkboxes component instead.

How it works

Radios are grouped together in a <fieldset> with a <legend> that describes them, as shown in the examples on this page. This is usually a question, like ‘Where do you live?’.

If you are asking just one question per page as recommended, you can set the contents of the <legend> as the page heading. This is good practice as it means that users of screen readers will only hear the contents once.

Read more about why and how to set legends as headings.

Always position radios to the left of their labels. This makes them easier to find, especially for users of screen magnifiers.

Unlike with checkboxes, users can only select one option from a list of radios. Do not assume that users will know how many options they can select based on the visual difference between radios and checkboxes alone.

If needed, add a hint explaining this, for example, ‘Select one option’.

Do not pre-select radio options as this makes it more likely that users will:

  • not realise they’ve missed a question
  • submit the wrong answer

Users cannot go back to having no option selected once they have selected one, without refreshing their browser window. Therefore, you should include ‘None of the above’ or ‘I do not know’ if they are valid options.

Order radio options alphabetically by default.

In some cases, it can be helpful to order them from most-to-least common options. For example, you could order options for ‘Where do you live?’ based on population size.

However you should do this with extreme caution as it can reinforce bias in your service. If in doubt, order alphabetically.

Group radios together in a <fieldset> with a <legend> that describes them, as shown in the examples on this page. This is usually a question, like ‘Where do you live?’.

If you’re asking one question on the page

If you’re asking just one question per page as recommended, you can set the contents of the <legend> as the page heading. This is good practice as it means that users of screen readers will only hear the contents once.

Read more about why and how to set legends as headings.

Where do you live?

<div id="where-do-you-live" class="govuk-form-group">
  <fieldset
    aria-describedby="where-do-you-live-hint"
    class="govuk-fieldset"
  >
    <legend class="govuk-fieldset__legend">
      <h1 class="govuk-heading-l">
        Where do you live?
      </h1>
    </legend>
    <div class="govuk-radios">
      <div class="govuk-radios__item">
        <input
          type="radio"
          value="england"
          name="where-do-you-live"
          id="where-do-you-live-radio-0"
          class="govuk-radios__input"
        />
        <label
          for="where-do-you-live-radio-0"
          class="govuk-label govuk-radios__label"
        >
          England
        </label>
      </div>
      <div class="govuk-radios__item">
        <input
          type="radio"
          value="scotland"
          name="where-do-you-live"
          id="where-do-you-live-radio-1"
          class="govuk-radios__input"
        />
        <label
          for="where-do-you-live-radio-1"
          class="govuk-label govuk-radios__label"
        >
          Scotland
        </label>
      </div>
      <div class="govuk-radios__item">
        <input
          type="radio"
          value="wales"
          name="where-do-you-live"
          id="where-do-you-live-radio-2"
          class="govuk-radios__input"
        />
        <label
          for="where-do-you-live-radio-2"
          class="govuk-label govuk-radios__label"
        >
          Wales
        </label>
      </div>
      <div class="govuk-radios__item">
        <input
          type="radio"
          value="northern-ireland"
          name="where-do-you-live"
          id="where-do-you-live-radio-3"
          class="govuk-radios__input"
        />
        <label
          for="where-do-you-live-radio-3"
          class="govuk-label govuk-radios__label"
        >
          Northern Ireland
        </label>
      </div>
    </div>
  </fieldset>
</div>
<Radios
  label={
    <h1 className="govuk-heading-l">
      Where do you live?
    </h1>
  }
  name="where-do-you-live"
  options={[
    {
      value: "england",
      label: "England",
    },
    {
      value: "scotland",
      label: "Scotland",
    },
    {
      value: "wales",
      label: "Wales",
    },
    {
      value: "northern-ireland",
      label: "Northern Ireland",
    },
  ]}
/>

If you’re asking more than one question on the page

If you’re asking more than one question on the page, do not set the contents of the <legend> as the page heading. Read more about [asking multiple questions on question pages] .

Where do you live?
<div id="where-do-you-live" class="govuk-form-group">
  <fieldset
    aria-describedby="where-do-you-live-hint"
    class="govuk-fieldset"
  >
    <legend class="govuk-fieldset__legend">
      Where do you live?
    </legend>
    <div class="govuk-radios">
      <div class="govuk-radios__item">
        <input
          type="radio"
          value="england"
          name="where-do-you-live"
          id="where-do-you-live-radio-0"
          class="govuk-radios__input"
        />
        <label
          for="where-do-you-live-radio-0"
          class="govuk-label govuk-radios__label"
        >
          England
        </label>
      </div>
      <div class="govuk-radios__item">
        <input
          type="radio"
          value="scotland"
          name="where-do-you-live"
          id="where-do-you-live-radio-1"
          class="govuk-radios__input"
        />
        <label
          for="where-do-you-live-radio-1"
          class="govuk-label govuk-radios__label"
        >
          Scotland
        </label>
      </div>
      <div class="govuk-radios__item">
        <input
          type="radio"
          value="wales"
          name="where-do-you-live"
          id="where-do-you-live-radio-2"
          class="govuk-radios__input"
        />
        <label
          for="where-do-you-live-radio-2"
          class="govuk-label govuk-radios__label"
        >
          Wales
        </label>
      </div>
      <div class="govuk-radios__item">
        <input
          type="radio"
          value="northern-ireland"
          name="where-do-you-live"
          id="where-do-you-live-radio-3"
          class="govuk-radios__input"
        />
        <label
          for="where-do-you-live-radio-3"
          class="govuk-label govuk-radios__label"
        >
          Northern Ireland
        </label>
      </div>
    </div>
  </fieldset>
</div>
<Radios
  label="Where do you live?"
  name="where-do-you-live"
  options={[
    {
      value: "england",
      label: "England",
    },
    {
      value: "scotland",
      label: "Scotland",
    },
    {
      value: "wales",
      label: "Wales",
    },
    {
      value: "northern-ireland",
      label: "Northern Ireland",
    },
  ]}
/>

Inline radios

In some cases, you can choose to display radios ‘inline’ beside one another (horizontally).

Only use inline radios when:

  • the question only has two options
  • both options are short

Remember that on small screens such as mobile devices, the radios will still be ‘stacked’ on top of one another (vertically).

Have you changed your name?

This includes changing your last name or spelling your name differently.
<div id="changed-name" class="govuk-form-group">
  <fieldset
    aria-describedby="changed-name-hint"
    class="govuk-fieldset"
  >
    <legend class="govuk-fieldset__legend">
      <h1 class="govuk-heading-l">
        Have you changed your name?
      </h1>
    </legend>
    <span id="changed-name-hint" class="govuk-hint">
      This includes changing your last name or
      spelling your name differently.
    </span>
    <div class="govuk-radios govuk-radios--inline">
      <div class="govuk-radios__item">
        <input
          type="radio"
          value="yes"
          name="changed-name"
          id="changed-name-radio-0"
          class="govuk-radios__input"
        />
        <label
          for="changed-name-radio-0"
          class="govuk-label govuk-radios__label"
        >
          Yes
        </label>
      </div>
      <div class="govuk-radios__item">
        <input
          type="radio"
          value="no"
          name="changed-name"
          id="changed-name-radio-1"
          class="govuk-radios__input"
        />
        <label
          for="changed-name-radio-1"
          class="govuk-label govuk-radios__label"
        >
          No
        </label>
      </div>
    </div>
  </fieldset>
</div>
<Radios
  classModifiers="inline"
  hint="This includes changing your last name or spelling your name differently."
  label={
    <h1 className="govuk-heading-l">
      Have you changed your name?
    </h1>
  }
  name="changed-name"
  options={[
    {
      value: "yes",
      label: "Yes",
    },
    {
      value: "no",
      label: "No",
    },
  ]}
/>

Radio items with hints

You can add hints to radio items to provide additional information about the options.

How do you want to sign in?

This includes changing your last name or spelling your name differently.
You’ll have a user ID if you’ve registered for Self Assessment or filed a tax return online before.
You’ll have an account if you’ve already proved your identity with either Barclays, CitizenSafe, Digidentity, Experian, Post Office, Royal Mail or SecureIdentity.
<div id="sign-in" class="govuk-form-group">
  <fieldset
    aria-describedby="sign-in-hint"
    class="govuk-fieldset"
  >
    <legend class="govuk-fieldset__legend">
      <h1 class="govuk-heading-l">
        How do you want to sign in?
      </h1>
    </legend>
    <span id="sign-in-hint" class="govuk-hint">
      This includes changing your last name or
      spelling your name differently.
    </span>
    <div class="govuk-radios">
      <div class="govuk-radios__item">
        <input
          type="radio"
          value="government-gateway"
          name="sign-in"
          id="sign-in-radio-0"
          class="govuk-radios__input"
        />
        <label
          for="sign-in-radio-0"
          class="govuk-label govuk-radios__label"
        >
          Sign in with Government Gateway
        </label>
        <span
          id="sign-in-radio-0-hint"
          class="govuk-hint govuk-radios__hint"
        >
          You’ll have a user ID if you’ve registered
          for Self Assessment or filed a tax return
          online before.
        </span>
      </div>
      <div class="govuk-radios__item">
        <input
          type="radio"
          value="govuk-verify"
          name="sign-in"
          id="sign-in-radio-1"
          class="govuk-radios__input"
        />
        <label
          for="sign-in-radio-1"
          class="govuk-label govuk-radios__label"
        >
          Sign in with GOV.UK Verify
        </label>
        <span
          id="sign-in-radio-1-hint"
          class="govuk-hint govuk-radios__hint"
        >
          You’ll have an account if you’ve already
          proved your identity with either Barclays,
          CitizenSafe, Digidentity, Experian, Post
          Office, Royal Mail or SecureIdentity.
        </span>
      </div>
    </div>
  </fieldset>
</div>
<Radios
  label={
    <h1 className="govuk-heading-l">
      How do you want to sign in?
    </h1>
  }
  name="sign-in"
  options={[
    {
      value: "government-gateway",
      label: "Sign in with Government Gateway",
      hint:
        "You’ll have a user ID if you’ve registered for Self Assessment or filed a tax return online before.",
    },
    {
      value: "govuk-verify",
      label: "Sign in with GOV.UK Verify",
      hint:
        "You’ll have an account if you’ve already proved your identity with either Barclays, CitizenSafe, Digidentity, Experian, Post Office, Royal Mail or SecureIdentity.",
    },
  ]}
  hint="This includes changing your last name or spelling your name differently."
/>

Radio items with a text divider

If one or more of your radio options is different from the others, it can help users if you separate them using a text divider. The text is usually the word ‘or’.

Where do you live?

or
<div id="where-do-you-live" class="govuk-form-group">
  <fieldset
    aria-describedby="where-do-you-live-hint"
    class="govuk-fieldset"
  >
    <legend class="govuk-fieldset__legend">
      <h1 class="govuk-heading-l">
        Where do you live?
      </h1>
    </legend>
    <div class="govuk-radios">
      <div class="govuk-radios__item">
        <input
          type="radio"
          value="england"
          name="where-do-you-live"
          id="where-do-you-live-radio-0"
          class="govuk-radios__input"
        />
        <label
          for="where-do-you-live-radio-0"
          class="govuk-label govuk-radios__label"
        >
          England
        </label>
      </div>
      <div class="govuk-radios__item">
        <input
          type="radio"
          value="scotland"
          name="where-do-you-live"
          id="where-do-you-live-radio-1"
          class="govuk-radios__input"
        />
        <label
          for="where-do-you-live-radio-1"
          class="govuk-label govuk-radios__label"
        >
          Scotland
        </label>
      </div>
      <div class="govuk-radios__item">
        <input
          type="radio"
          value="wales"
          name="where-do-you-live"
          id="where-do-you-live-radio-2"
          class="govuk-radios__input"
        />
        <label
          for="where-do-you-live-radio-2"
          class="govuk-label govuk-radios__label"
        >
          Wales
        </label>
      </div>
      <div class="govuk-radios__item">
        <input
          type="radio"
          value="northern-ireland"
          name="where-do-you-live"
          id="where-do-you-live-radio-3"
          class="govuk-radios__input"
        />
        <label
          for="where-do-you-live-radio-3"
          class="govuk-label govuk-radios__label"
        >
          Northern Ireland
        </label>
      </div>
      <div class="govuk-radios__divider">or</div>
      <div class="govuk-radios__item">
        <input
          type="radio"
          value="abroad"
          name="where-do-you-live"
          id="where-do-you-live-radio-5"
          class="govuk-radios__input"
        />
        <label
          for="where-do-you-live-radio-5"
          class="govuk-label govuk-radios__label"
        >
          I am a British citizen living abroad
        </label>
      </div>
    </div>
  </fieldset>
</div>
<Radios
  label={
    <h1 className="govuk-heading-l">
      Where do you live?
    </h1>
  }
  name="where-do-you-live"
  options={[
    {
      value: "england",
      label: "England",
    },
    {
      value: "scotland",
      label: "Scotland",
    },
    {
      value: "wales",
      label: "Wales",
    },
    {
      value: "northern-ireland",
      label: "Northern Ireland",
    },
    "or",
    {
      value: "abroad",
      label: "I am a British citizen living abroad",
    },
  ]}
/>

Conditionally revealing content

IMPLEMENT ME

Using this component, you can add conditionally revealing content to stacked radios, so users only see content when it’s relevant to them.

For example, you could reveal an email address input only when a user chooses to be contacted by email.

How would you prefer to be contacted?

Select one option.
<div id="how-contacted" class="govuk-form-group">
  <fieldset
    aria-describedby="how-contacted-hint"
    class="govuk-fieldset"
  >
    <legend class="govuk-fieldset__legend">
      <h1 class="govuk-heading-l">
        How would you prefer to be contacted?
      </h1>
    </legend>
    <span id="how-contacted-hint" class="govuk-hint">
      Select one option.
    </span>
    <div class="govuk-radios">
      <div class="govuk-radios__item">
        <input
          type="radio"
          value="email"
          name="how-contacted"
          id="how-contacted-radio-0"
          class="govuk-radios__input"
          data-aria-controls="conditional-how-contacted-radio-0"
        />
        <label
          for="how-contacted-radio-0"
          class="govuk-label govuk-radios__label"
        >
          Email
        </label>
      </div>
      <div
        id="conditional-how-contacted-radio-0"
        class="govuk-radios__conditional govuk-radios__conditional--hidden"
      >
        <div
          id="contact-by-email"
          class="govuk-form-group"
        >
          <label
            for="contact-by-email-input"
            class="govuk-label"
          >
            Email address
          </label>
          <input
            type="email"
            autocomplete="email"
            name="contact-by-email"
            spellcheck="false"
            id="contact-by-email-input"
            class="govuk-input"
          />
        </div>
      </div>
      <div class="govuk-radios__item">
        <input
          type="radio"
          value="phone"
          name="how-contacted"
          id="how-contacted-radio-1"
          class="govuk-radios__input"
          data-aria-controls="conditional-how-contacted-radio-1"
        />
        <label
          for="how-contacted-radio-1"
          class="govuk-label govuk-radios__label"
        >
          Phone
        </label>
      </div>
      <div
        id="conditional-how-contacted-radio-1"
        class="govuk-radios__conditional govuk-radios__conditional--hidden"
      >
        <div
          id="contact-by-phone"
          class="govuk-form-group"
        >
          <label
            for="contact-by-phone-input"
            class="govuk-label"
          >
            Phone number
          </label>
          <input
            type="tel"
            autocomplete="tel"
            name="contact-by-phone"
            spellcheck="false"
            id="contact-by-phone-input"
            class="govuk-input"
          />
        </div>
      </div>
      <div class="govuk-radios__item">
        <input
          type="radio"
          value="text message"
          name="how-contacted"
          id="how-contacted-radio-2"
          class="govuk-radios__input"
          data-aria-controls="conditional-how-contacted-radio-2"
        />
        <label
          for="how-contacted-radio-2"
          class="govuk-label govuk-radios__label"
        >
          Text message
        </label>
      </div>
      <div
        id="conditional-how-contacted-radio-2"
        class="govuk-radios__conditional govuk-radios__conditional--hidden"
      >
        <div
          id="contact-by-text"
          class="govuk-form-group"
        >
          <label
            for="contact-by-text-input"
            class="govuk-label"
          >
            Mobile phone number
          </label>
          <input
            type="tel"
            autocomplete="tel"
            name="contact-by-text"
            spellcheck="false"
            id="contact-by-text-input"
            class="govuk-input"
          />
        </div>
      </div>
    </div>
  </fieldset>
</div>
<Radios
  label={
    <h1 className="govuk-heading-l">
      How would you prefer to be contacted?
    </h1>
  }
  name="how-contacted"
  options={[
    {
      value: "email",
      label: "Email",
      conditional: (
        <TextInput
          autoComplete="email"
          className="govuk-!-width-one-third"
          id="contact-by-email"
          label="Email address"
          name="contact-by-email"
          spellCheck={false}
          type="email"
        />
      ),
    },
    {
      value: "phone",
      label: "Phone",
      conditional: (
        <TextInput
          autoComplete="tel"
          className="govuk-!-width-one-third"
          id="contact-by-phone"
          label="Phone number"
          name="contact-by-phone"
          spellCheck={false}
          type="tel"
        />
      ),
    },
    {
      value: "text message",
      label: "Text message",
      conditional: (
        <TextInput
          autoComplete="tel"
          className="govuk-!-width-one-third"
          id="contact-by-text"
          label="Mobile phone number"
          name="contact-by-text"
          spellCheck={false}
          type="tel"
        />
      ),
    },
  ]}
  hint="Select one option."
/>

Keep it simple. If the related question is complicated or has more than one part, show it on the next page in the process instead.

Do not conditionally reveal questions to inline radios, such as ‘yes’ and ‘no’ options placed next to each other.

Conditionally reveal questions only - do not show or hide anything that is not a question.

Known issues

Users are not always notified when a conditionally revealed question is shown or hidden. This fails WCAG 2.1 success criterion 4.1.2 Name, Role, Value.

However, we found that screen reader users did not have difficulty answering a conditionally revealed question - as long as it’s kept simple. It confused our test users when we conditionally revealed complicated questions to them.

We’ll keep looking for opportunities to learn more about how conditionally revealed questions should be used in services.

Smaller radios

Use standard-sized radios in nearly all cases. However, smaller versions work well on pages where it’s helpful to make them less visually prominent.

For example, on a page of search results, the primary user need is to see the results. Using smaller radios lets users see and change search filters without distracting them from the main content.

Filter

<div id="filter" class="govuk-form-group">
  <fieldset
    aria-describedby="filter-hint"
    class="govuk-fieldset"
  >
    <legend class="govuk-fieldset__legend">
      <h3>Filter</h3>
    </legend>
    <div class="govuk-radios govuk-radios--small">
      <div class="govuk-radios__item">
        <input
          type="radio"
          value="month"
          name="filter"
          id="filter-radio-0"
          class="govuk-radios__input"
        />
        <label
          for="filter-radio-0"
          class="govuk-label govuk-radios__label"
        >
          Monthly
        </label>
      </div>
      <div class="govuk-radios__item">
        <input
          type="radio"
          value="year"
          name="filter"
          id="filter-radio-1"
          class="govuk-radios__input"
        />
        <label
          for="filter-radio-1"
          class="govuk-label govuk-radios__label"
        >
          Yearly
        </label>
      </div>
    </div>
  </fieldset>
</div>
<Radios
  classModifiers="small"
  label={<h3>Filter</h3>}
  name="filter"
  options={[
    {
      value: "month",
      label: "Monthly",
    },
    {
      value: "year",
      label: "Yearly",
    },
  ]}
/>

Small radios can work well on information dense screens in services designed for repeat use, like caseworking systems.

In services like these, the risk that they will not be noticed is lower because users return to the screen multiple times.

Error messages

Display an error message if none of the radios are selected.

Error messages should be styled like this:

Have you changed your name?

This includes changing your last name or spelling your name differently.Error: Select yes if you have changed your name
<div
  id="changed-name"
  class="govuk-form-group govuk-form-group--error"
>
  <fieldset
    aria-describedby="changed-name-hint"
    class="govuk-fieldset"
  >
    <legend class="govuk-fieldset__legend">
      <h1 class="govuk-heading-l">
        Have you changed your name?
      </h1>
    </legend>
    <span id="changed-name-hint" class="govuk-hint">
      This includes changing your last name or
      spelling your name differently.
    </span>
    <span
      id="changed-name-error"
      class="govuk-error-message"
    >
      <span class="govuk-visually-hidden">
        Error:
      </span>
      Select yes if you have changed your name
    </span>
    <div class="govuk-radios govuk-radios--inline">
      <div class="govuk-radios__item">
        <input
          type="radio"
          value="yes"
          name="changed-name"
          id="changed-name-radio-0"
          class="govuk-radios__input"
        />
        <label
          for="changed-name-radio-0"
          class="govuk-label govuk-radios__label"
        >
          Yes
        </label>
      </div>
      <div class="govuk-radios__item">
        <input
          type="radio"
          value="no"
          name="changed-name"
          id="changed-name-radio-1"
          class="govuk-radios__input"
        />
        <label
          for="changed-name-radio-1"
          class="govuk-label govuk-radios__label"
        >
          No
        </label>
      </div>
    </div>
  </fieldset>
</div>
<Radios
  classModifiers="inline"
  error="Select yes if you have changed your name "
  hint="This includes changing your last name or spelling your name differently."
  label={
    <h1 className="govuk-heading-l">
      Have you changed your name?
    </h1>
  }
  name="changed-name"
  options={[
    {
      value: "yes",
      label: "Yes",
    },
    {
      value: "no",
      label: "No",
    },
  ]}
/>

Make sure errors follow the guidance in error message and have specific error messages for specific error states.

If nothing is selected and the options are ‘yes’ and ‘no’

Say ‘Select yes if [whatever it is is true] ’. For example, ‘Select yes if Sarah normally lives with you’.

If nothing is selected and the question has options in it

Say ‘Select if [whatever it is] ’. For example, ‘Select if you are employed or self-employed’.

If nothing is selected and the question does not have options in it

Say ‘Select [whatever it is] ’. For example, ‘Select the day of the week you pay your rent’.