Storybook
SketchExamples
Radio button list
A ChoiceList component can be used to render a radio button group or checkbox group. Use the type prop to specify the type of field to display.
Radio button children
Radio buttons can have optional checked or unchecked children that are conditionally shown based on the state of the checkbox.
Code
React
Radio buttons can be managed as a group using <ChoiceList> or individually using <Choice>.
Note that each of the items in the choices array represents props that will be passed to an individual <Choice> component. You can therefore define any of the props listed in the <Choice> component table below, including all valid attributes of the HTML input element.
<ChoiceList> component
| Name | Type | Default | Description |
|---|---|---|---|
choicesrequired | ChoiceProps[] | Array of | |
className | string | Additional classes to be added to the root element. | |
disabled | boolean | Disables the entire field. | |
errorMessage | React.ReactNode | ||
errorMessageClassName | string | Additional classes to be added to the error message | |
errorPlacement | 'top' | 'bottom' | Location of the error message relative to the field input | |
hint | React.ReactNode | Additional hint text to display | |
requirementLabel | React.ReactNode | Text showing the requirement ("Required", "Optional", etc.). See Required and Optional Fields. | |
inversed | boolean | Applies the "inverse" UI theme | |
labelrequired | React.ReactNode | Label for the field | |
labelClassName | string | Additional classes to be added to the | |
namerequired | string | The field's | |
onBlur | (...args: any[]) => any | Called anytime any choice is blurred | |
onComponentBlur | (...args: any[]) => any | Called when any choice is blurred and the focus does not land on one of the other choices inside this component (i.e., when the whole component loses focus) | |
onChange | (...args: any[]) => any | ||
size | literal | Sets the size of the checkbox or radio button | |
typerequired | 'checkbox' | 'radio' | Sets the type to render |
<Choice> component
| Name | Type | Default | Description |
|---|---|---|---|
checked | boolean | Sets the input's | |
checkedChildren | React.ReactNode | Content to be shown when the choice is checked. See Checked children and the expose within pattern on the Guidance tab for detailed instructions. | |
uncheckedChildren | React.ReactNode | Content to be shown when the choice is not checked | |
className | string | Additional classes to be added to the root | |
inputClassName | string | Additional classes to be added to the | |
label | React.ReactNode | Label text or HTML. | |
labelClassName | string | Additional classes to be added to the | |
defaultChecked | boolean | Sets the initial | |
disabled | boolean | ||
errorMessage | React.ReactNode | ||
errorMessageClassName | string | Additional classes to be added to the error message | |
inputRef | (...args: any[]) => any | Access a reference to the | |
hint | React.ReactNode | Additional hint text to display below the choice's label | |
id | string | A unique ID to be used for the input field, as well as the label's
| |
requirementLabel | React.ReactNode | Text showing the requirement ("Required", "Optional", etc.). See Required and Optional Fields. | |
inversed | boolean | Applies the "inverse" UI theme | |
size | literal | ||
namerequired | string | The | |
onBlur | (...args: any[]) => any | ||
onChange | (event: React.ChangeEvent<HTMLInputElement>) => any | ||
typerequired | 'checkbox' | 'radio' | Sets the type to render | |
valuerequired | number | string | The | |
This component passes any additional props to its underlying <input> element as attributes. See the corresponding MDN documentation for <input> for a list of valid attributes. | |||
Styles
The following Sass variables can be overridden to customize choice fields:
Form components
This component also makes use of form field styles, which can be customized by the following variables:
Guidance
When to use
Radio buttons
- When users need to select only one option out of a set of mutually exclusive choices.
When to consider alternatives
- If there are too many options to display on a mobile screen. Consider a
dropdownmenu if you don’t have enough space to list out all available options, and if the user can only select one of the options. - Never use radio buttons for optional questions, since once a radio button is selected from a list, it or another choice will remain selected.
Usage
- Don't rely on the visual difference between radio buttons and checkboxes. Make it clear with words when users can select one or multiple options.
- Users should be able to tap on or click on either the text label or the checkbox to select or deselect an option.
- In general, list choices vertically; horizontal listings can make it difficult to tell which label pertains to which choice. An exception is where you have binary choices with short labels, like 'Yes / No'. The convention here is for horizontal alignment.
- Avoid using negative language in labels as they can be counterintuitive. For example, “I want to receive a promotional email” instead of “I don’t want to receive promotional email.”
- Use caution if you decide to set a default value. Setting a default value can discourage users from making conscious decisions, seem pushy, or alienate users who don’t fit into your assumptions. In addition, you'll never know if the user explicitly chose that option or just didn't notice the question. If you're unsure, leave nothing selected by default.
View the "Forms" guidelines for additional guidance and best practices.
Checked children and the expose within pattern
- The
<Choice>component includes acheckedChildrenprop that can expose hidden text information or form elements. This expose within pattern is especially useful if you need to collect data from follow up questions or give just-in-time feedback. - Checked children can be exposed by checking the parent checkbox or radio button
- The
checkedChildrenprop should return one or more items wrapped in adivwith the following className:.ds-c-choice__checkedChild. This class sets the spacing and border color for the exposed elements. - Add the className
.ds-c-choice__checkedChild--inverseto thedivto show the inverse white border - You may need to add the className
.ds-u-margin--0to your child element(s) to avoid extra top margin - If you opt for smaller radio buttons or checkboxes, add className
.ds-c-choice__checkedChild--smallto your checked child container
Accessibility
- Surround a related set of choices with a
<fieldset>. The<legend>provides context for the grouping. Do not usefieldsetandlegendfor a single checkbox. - Some screen readers read the
legendtext for eachfieldset, so it should be brief and descriptive. - Each input should have a semantic
idattribute, and its correspondinglabelshould have the same value in itsforattribute. - The custom checkboxes and radio buttons here are accessible to screen readers because the default fields are moved off-screen.
checkedChildrenwill be announced to screen readers when they are exposed. They have been tested with the following devices:- Windows 10 + Internet Explorer 11 + JAWS screen reader
- Windows 10 + Chrome + JAWS
- Windows10 - Firefox + NVDA
- NVDA reads out the
<select>label and every<option>value
- NVDA reads out the
- MacOS Mojave + Safari + VoiceOver
Related patterns
Learn more
- Form Guidelines
- GOV.UK Checkbox/Radio buttons discussion
- "We've updated the radios and checkboxes on GOV.UK"
- Four steps for choosing form elements on the Web (PDF)
Component maturity
For more information about how we tested and validated our work for each checklist item, read our component maturity documentation.