Components

Radios

Where do you live?

England

Scotland

Wales

Northern Ireland

HTML
React

<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

Name	Type	Description
toString	function	Returns a string representation of a string. Returns a string representation of an object.
charAt	function	Returns the character at the specified index.
charCodeAt	function	Returns the Unicode value of the character at the specified location.
concat	function	Returns a string that contains the concatenation of two or more strings.
indexOf	function	Returns the position of the first occurrence of a substring.
lastIndexOf	function	Returns the last occurrence of a substring in the string.
localeCompare	other	Determines whether two strings are equivalent in the current locale. Determines whether two strings are equivalent in the current or specified locale.
match	other	Matches 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.
replace	other	Replaces 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.
search	other	Finds the first substring match in a regular expression search.
slice	function	Returns a section of a string.
split	other	Split a string into substrings using the specified separator and return them as an array.
substring	function	Returns the substring at the specified location within a String object.
toLowerCase	function	Converts all the alphabetic characters in a string to lowercase.
toLocaleLowerCase	function	Converts all alphabetic characters to lowercase, taking into account the host environment's current locale.
toUpperCase	function	Converts all the alphabetic characters in a string to uppercase.
toLocaleUpperCase	function	Returns a string where all alphabetic characters have been converted to uppercase, taking into account the host environment's current locale.
trim	function	Removes the leading and trailing white space and line terminator characters from a string.
length	number	Returns the length of a String object.
substr	function	Gets a substring beginning at the specified location and having the specified length.
valueOf	function	Returns the primitive value of the specified object.
codePointAt	function	Returns 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.
includes	function	Returns 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.
endsWith	function	Returns 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.
normalize	other	Returns 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.
repeat	function	Returns a String value that is made from count copies appended together. If count is 0, the empty string is returned.
startsWith	function	Returns 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.
anchor	function	Returns an `<a>` HTML anchor element and sets the name attribute to the text value
big	function	Returns a `<big>` HTML element
blink	function	Returns a `<blink>` HTML element
bold	function	Returns a `<b>` HTML element
fixed	function	Returns a `<tt>` HTML element
fontcolor	function	Returns a `<font>` HTML element and sets the color attribute value
fontsize	other	Returns a `<font>` HTML element and sets the size attribute value
italics	function	Returns an `<i>` HTML element
link	function	Returns an `<a>` HTML element and sets the href attribute value
small	function	Returns a `<small>` HTML element
strike	function	Returns a `<strike>` HTML element
sub	function	Returns a `<sub>` HTML element
sup	function	Returns a `<sup>` HTML element
padStart	function	Pads 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.
padEnd	function	Pads 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.
trimEnd	function	Removes the trailing white space and line terminator characters from a string.
trimStart	function	Removes the leading white space and line terminator characters from a string.
trimLeft	function	Removes the leading white space and line terminator characters from a string.
trimRight	function	Removes the trailing white space and line terminator characters from a string.
matchAll	function	Matches a string with a regular expression, and returns an iterable of matches containing the results of that search.
replaceAll	other	Replace all instances of a substring in a string, using a regular expression or search string.
at	function	Returns a new String consisting of the single UTF-16 code unit located at the specified index.
__@iterator@45	function	Iterator
conditional	other
disabled	other
hint	other
label	string
selected	other
value	string

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?

England

Scotland

Wales

Northern Ireland

HTML
React

<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?

England

Scotland

Wales

Northern Ireland

HTML
React

<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.

Yes

HTML
React

<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?

HTML
React

<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’.

HTML
React

<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.

Email address

Phone

Phone number

Text message

Mobile phone number

HTML
React

<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

Monthly

Yearly

HTML
React

<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

Yes

HTML
React

<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’.