Radio buttons are used for a list of two or more options when a user can only select one option. If there are seven or more options use a dropdown menu instead.
npm install @nib-components/radio
As a form input, @nib-components/form-control must wrap this component to provide an accessible label, help text, and validation styling. Note: You will also need to install the peerDependencies @nib/icons and @nib-components/theme.
import Radio from '@nib-components/radio';
<Radio/> is wrapped in a
<FormControl/>, all FormControl props such as
disabled will be passed down to this component. This includes the
label which will align with the
for attribute on the
All props passed directly to
<Radio/> will be applied to the underlying
<input> as attributes.
|string||The radio input subtitle.|
|boolean||Whether the label is bold. If subtitle is provided, the default value changes to |
|boolean||Whether the |
The user can select the radio button by clicking the radio circle directly or by clicking on its label. Therefore links cannot be included in radio button labels. The target container height for each radio option is 56px. This large target size makes it easy for users to select/unselect the option, even if they are using a touch screen device or have limited dexterity.
By default, no option is selected. Requiring the user to select the relevant option reduces data entry errors.
On desktop and ipad devices the length of the radio option container will be dependant on the length of the text; the container padding remains the same.
Radio options are displayed inline by default. This can be toggled via the
On mobile and small screens (480px of less) radio options are full-width and stacked. This allows users to easily reach and select options.
Labels help the user understand what option to select. Labels are short, concise and use sentence-style capitalisation.
Denote optional controls by adding “(Optional)" to the end of the label.
Help text is an instruction that supports a user to make an accurate selection. It can also be used to clarify how the information will be used. It is optional and should only be used where needed.
Help text should appear below the label and above the radio options. Use sentence-style capitalisation and concise sentence/s.
- Help text displayed above the radio options allows screen readers to read the help information before the user makes a selection.
Subtitles are an optional prop to provide more context to the option. Subtitles should be added to all options in the group, or none. Otherwise, alignment will suffer, especially if rendering the options inline.