Radios
<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 | Default | 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@51 | function | Iterator | |
conditional | other | ||
disabled | boolean | ||
hint | string | ||
label | string | ||
selected | boolean | ||
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.
<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].
<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).
<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.
<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’.
<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.
<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.
<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:
<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’.