Components

Radios

Where do you live?

<div id="where-do-you-live" class="govuk-form-group">
  <fieldset 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
          name="where-do-you-live"
          id="where-do-you-live-radio-0"
          class="govuk-radios__input"
          type="radio"
          value="england"
        />
        <label
          for="where-do-you-live-radio-0"
          class="govuk-label govuk-radios__label"
        >
          England
        </label>
      </div>
      <div class="govuk-radios__item">
        <input
          name="where-do-you-live"
          id="where-do-you-live-radio-1"
          class="govuk-radios__input"
          type="radio"
          value="scotland"
        />
        <label
          for="where-do-you-live-radio-1"
          class="govuk-label govuk-radios__label"
        >
          Scotland
        </label>
      </div>
      <div class="govuk-radios__item">
        <input
          name="where-do-you-live"
          id="where-do-you-live-radio-2"
          class="govuk-radios__input"
          type="radio"
          value="wales"
        />
        <label
          for="where-do-you-live-radio-2"
          class="govuk-label govuk-radios__label"
        >
          Wales
        </label>
      </div>
      <div class="govuk-radios__item">
        <input
          name="where-do-you-live"
          id="where-do-you-live-radio-3"
          class="govuk-radios__input"
          type="radio"
          value="northern-ireland"
        />
        <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
NameTypeDefaultDescription
toStringfunctionReturns a string representation of a string. Returns a string representation of an object.
charAtfunctionReturns the character at the specified index.
charCodeAtfunctionReturns the Unicode value of the character at the specified location.
concatfunctionReturns a string that contains the concatenation of two or more strings.
indexOffunctionReturns the position of the first occurrence of a substring.
lastIndexOffunctionReturns the last occurrence of a substring in the string.
localeCompareotherDetermines whether two strings are equivalent in the current locale. Determines whether two strings are equivalent in the current or specified locale.
matchotherMatches a string with a regular expression, and returns an array containing the results of that search. Matches a string or an object that supports being matched against, and returns an array containing the results of that search, or null if no matches are found.
replaceotherReplaces text in a string, using a regular expression or search string. Passes a string and {@linkcode replaceValue} to the `[Symbol.replace]` method on {@linkcode searchValue}. This method is expected to implement its own replacement algorithm. Replaces text in a string, using an object that supports replacement within a string.
searchotherFinds the first substring match in a regular expression search.
slicefunctionReturns a section of a string.
splitotherSplit a string into substrings using the specified separator and return them as an array.
substringfunctionReturns the substring at the specified location within a String object.
toLowerCasefunctionConverts all the alphabetic characters in a string to lowercase.
toLocaleLowerCasefunctionConverts all alphabetic characters to lowercase, taking into account the host environment's current locale.
toUpperCasefunctionConverts all the alphabetic characters in a string to uppercase.
toLocaleUpperCasefunctionReturns a string where all alphabetic characters have been converted to uppercase, taking into account the host environment's current locale.
trimfunctionRemoves the leading and trailing white space and line terminator characters from a string.
lengthnumberReturns the length of a String object.
substrfunctionGets a substring beginning at the specified location and having the specified length.
valueOffunctionReturns the primitive value of the specified object.
codePointAtfunctionReturns a nonnegative integer Number less than 1114112 (0x110000) that is the code point value of the UTF-16 encoded code point starting at the string element at position pos in the String resulting from converting this object to a String. If there is no element at that position, the result is undefined. If a valid UTF-16 surrogate pair does not begin at pos, the result is the code unit at pos.
includesfunctionReturns true if searchString appears as a substring of the result of converting this object to a String, at one or more positions that are greater than or equal to position; otherwise, returns false.
endsWithfunctionReturns true if the sequence of elements of searchString converted to a String is the same as the corresponding elements of this object (converted to a String) starting at endPosition – length(this). Otherwise returns false.
normalizeotherReturns the String value result of normalizing the string into the normalization form named by form as specified in Unicode Standard Annex #15, Unicode Normalization Forms.
repeatfunctionReturns a String value that is made from count copies appended together. If count is 0, the empty string is returned.
startsWithfunctionReturns true if the sequence of elements of searchString converted to a String is the same as the corresponding elements of this object (converted to a String) starting at position. Otherwise returns false.
anchorfunctionReturns an `<a>` HTML anchor element and sets the name attribute to the text value
bigfunctionReturns a `<big>` HTML element
blinkfunctionReturns a `<blink>` HTML element
boldfunctionReturns a `<b>` HTML element
fixedfunctionReturns a `<tt>` HTML element
fontcolorfunctionReturns a `<font>` HTML element and sets the color attribute value
fontsizeotherReturns a `<font>` HTML element and sets the size attribute value
italicsfunctionReturns an `<i>` HTML element
linkfunctionReturns an `<a>` HTML element and sets the href attribute value
smallfunctionReturns a `<small>` HTML element
strikefunctionReturns a `<strike>` HTML element
subfunctionReturns a `<sub>` HTML element
supfunctionReturns a `<sup>` HTML element
padStartfunctionPads the current string with a given string (possibly repeated) so that the resulting string reaches a given length. The padding is applied from the start (left) of the current string.
padEndfunctionPads the current string with a given string (possibly repeated) so that the resulting string reaches a given length. The padding is applied from the end (right) of the current string.
trimEndfunctionRemoves the trailing white space and line terminator characters from a string.
trimStartfunctionRemoves the leading white space and line terminator characters from a string.
trimLeftfunctionRemoves the leading white space and line terminator characters from a string.
trimRightfunctionRemoves the trailing white space and line terminator characters from a string.
matchAllfunctionMatches a string with a regular expression, and returns an iterable of matches containing the results of that search.
replaceAllotherReplace all instances of a substring in a string, using a regular expression or search string.
atfunctionReturns a new String consisting of the single UTF-16 code unit located at the specified index.
__@iterator@51functionIterator
conditionalother
disabledboolean
hintstring
labelstring
selectedboolean
valuestring

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 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
          name="where-do-you-live"
          id="where-do-you-live-radio-0"
          class="govuk-radios__input"
          type="radio"
          value="england"
        />
        <label
          for="where-do-you-live-radio-0"
          class="govuk-label govuk-radios__label"
        >
          England
        </label>
      </div>
      <div class="govuk-radios__item">
        <input
          name="where-do-you-live"
          id="where-do-you-live-radio-1"
          class="govuk-radios__input"
          type="radio"
          value="scotland"
        />
        <label
          for="where-do-you-live-radio-1"
          class="govuk-label govuk-radios__label"
        >
          Scotland
        </label>
      </div>
      <div class="govuk-radios__item">
        <input
          name="where-do-you-live"
          id="where-do-you-live-radio-2"
          class="govuk-radios__input"
          type="radio"
          value="wales"
        />
        <label
          for="where-do-you-live-radio-2"
          class="govuk-label govuk-radios__label"
        >
          Wales
        </label>
      </div>
      <div class="govuk-radios__item">
        <input
          name="where-do-you-live"
          id="where-do-you-live-radio-3"
          class="govuk-radios__input"
          type="radio"
          value="northern-ireland"
        />
        <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 class="govuk-fieldset">
    <legend class="govuk-fieldset__legend">
      Where do you live?
    </legend>
    <div class="govuk-radios">
      <div class="govuk-radios__item">
        <input
          name="where-do-you-live"
          id="where-do-you-live-radio-0"
          class="govuk-radios__input"
          type="radio"
          value="england"
        />
        <label
          for="where-do-you-live-radio-0"
          class="govuk-label govuk-radios__label"
        >
          England
        </label>
      </div>
      <div class="govuk-radios__item">
        <input
          name="where-do-you-live"
          id="where-do-you-live-radio-1"
          class="govuk-radios__input"
          type="radio"
          value="scotland"
        />
        <label
          for="where-do-you-live-radio-1"
          class="govuk-label govuk-radios__label"
        >
          Scotland
        </label>
      </div>
      <div class="govuk-radios__item">
        <input
          name="where-do-you-live"
          id="where-do-you-live-radio-2"
          class="govuk-radios__input"
          type="radio"
          value="wales"
        />
        <label
          for="where-do-you-live-radio-2"
          class="govuk-label govuk-radios__label"
        >
          Wales
        </label>
      </div>
      <div class="govuk-radios__item">
        <input
          name="where-do-you-live"
          id="where-do-you-live-radio-3"
          class="govuk-radios__input"
          type="radio"
          value="northern-ireland"
        />
        <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>
    <div id="changed-name-hint" class="govuk-hint">
      This includes changing your last name or
      spelling your name differently.
    </div>
    <div class="govuk-radios govuk-radios--inline">
      <div class="govuk-radios__item">
        <input
          name="changed-name"
          id="changed-name-radio-0"
          class="govuk-radios__input"
          type="radio"
          value="yes"
        />
        <label
          for="changed-name-radio-0"
          class="govuk-label govuk-radios__label"
        >
          Yes
        </label>
      </div>
      <div class="govuk-radios__item">
        <input
          name="changed-name"
          id="changed-name-radio-1"
          class="govuk-radios__input"
          type="radio"
          value="no"
        />
        <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>
    <div id="sign-in-hint" class="govuk-hint">
      This includes changing your last name or
      spelling your name differently.
    </div>
    <div class="govuk-radios">
      <div class="govuk-radios__item">
        <input
          name="sign-in"
          id="sign-in-radio-0"
          class="govuk-radios__input"
          type="radio"
          value="government-gateway"
        />
        <label
          for="sign-in-radio-0"
          class="govuk-label govuk-radios__label"
        >
          Sign in with Government Gateway
        </label>
        <div
          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.
        </div>
      </div>
      <div class="govuk-radios__item">
        <input
          name="sign-in"
          id="sign-in-radio-1"
          class="govuk-radios__input"
          type="radio"
          value="govuk-verify"
        />
        <label
          for="sign-in-radio-1"
          class="govuk-label govuk-radios__label"
        >
          Sign in with GOV.UK Verify
        </label>
        <div
          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.
        </div>
      </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 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
          name="where-do-you-live"
          id="where-do-you-live-radio-0"
          class="govuk-radios__input"
          type="radio"
          value="england"
        />
        <label
          for="where-do-you-live-radio-0"
          class="govuk-label govuk-radios__label"
        >
          England
        </label>
      </div>
      <div class="govuk-radios__item">
        <input
          name="where-do-you-live"
          id="where-do-you-live-radio-1"
          class="govuk-radios__input"
          type="radio"
          value="scotland"
        />
        <label
          for="where-do-you-live-radio-1"
          class="govuk-label govuk-radios__label"
        >
          Scotland
        </label>
      </div>
      <div class="govuk-radios__item">
        <input
          name="where-do-you-live"
          id="where-do-you-live-radio-2"
          class="govuk-radios__input"
          type="radio"
          value="wales"
        />
        <label
          for="where-do-you-live-radio-2"
          class="govuk-label govuk-radios__label"
        >
          Wales
        </label>
      </div>
      <div class="govuk-radios__item">
        <input
          name="where-do-you-live"
          id="where-do-you-live-radio-3"
          class="govuk-radios__input"
          type="radio"
          value="northern-ireland"
        />
        <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
          name="where-do-you-live"
          id="where-do-you-live-radio-5"
          class="govuk-radios__input"
          type="radio"
          value="abroad"
        />
        <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

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>
    <div id="how-contacted-hint" class="govuk-hint">
      Select one option.
    </div>
    <div class="govuk-radios">
      <div class="govuk-radios__item">
        <input
          name="how-contacted"
          id="how-contacted-radio-0"
          class="govuk-radios__input"
          type="radio"
          aria-controls="conditional-how-contacted-radio-0"
          aria-expanded="false"
          value="email"
        />
        <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
            autocomplete="email"
            name="contact-by-email"
            spellcheck="false"
            id="contact-by-email-input"
            class="govuk-input govuk-!-width-one-third"
            type="email"
          />
        </div>
      </div>
      <div class="govuk-radios__item">
        <input
          name="how-contacted"
          id="how-contacted-radio-1"
          class="govuk-radios__input"
          type="radio"
          aria-controls="conditional-how-contacted-radio-1"
          aria-expanded="false"
          value="phone"
        />
        <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
            autocomplete="tel"
            name="contact-by-phone"
            spellcheck="false"
            id="contact-by-phone-input"
            class="govuk-input govuk-!-width-one-third"
            type="tel"
          />
        </div>
      </div>
      <div class="govuk-radios__item">
        <input
          name="how-contacted"
          id="how-contacted-radio-2"
          class="govuk-radios__input"
          type="radio"
          aria-controls="conditional-how-contacted-radio-2"
          aria-expanded="false"
          value="text message"
        />
        <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
            autocomplete="tel"
            name="contact-by-text"
            spellcheck="false"
            id="contact-by-text-input"
            class="govuk-input govuk-!-width-one-third"
            type="tel"
          />
        </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 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
          name="filter"
          id="filter-radio-0"
          class="govuk-radios__input"
          type="radio"
          value="month"
        />
        <label
          for="filter-radio-0"
          class="govuk-label govuk-radios__label"
        >
          Monthly
        </label>
      </div>
      <div class="govuk-radios__item">
        <input
          name="filter"
          id="filter-radio-1"
          class="govuk-radios__input"
          type="radio"
          value="year"
        />
        <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 changed-name-error"
    class="govuk-fieldset"
  >
    <legend class="govuk-fieldset__legend">
      <h1 class="govuk-heading-l">
        Have you changed your name?
      </h1>
    </legend>
    <div id="changed-name-hint" class="govuk-hint">
      This includes changing your last name or
      spelling your name differently.
    </div>
    <p
      id="changed-name-error"
      class="govuk-error-message"
    >
      <span class="govuk-visually-hidden">
        Error:
      </span>
      Select yes if you have changed your name
    </p>
    <div class="govuk-radios govuk-radios--inline">
      <div class="govuk-radios__item">
        <input
          name="changed-name"
          id="changed-name-radio-0"
          class="govuk-radios__input"
          type="radio"
          value="yes"
        />
        <label
          for="changed-name-radio-0"
          class="govuk-label govuk-radios__label"
        >
          Yes
        </label>
      </div>
      <div class="govuk-radios__item">
        <input
          name="changed-name"
          id="changed-name-radio-1"
          class="govuk-radios__input"
          type="radio"
          value="no"
        />
        <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’.