Radio

View Storybook

A radio is an input control that allows users to select only one option from a number of choices.

Classes

Class Applies to Description
.d-radio-group N/A Radio's parent wrapper.
.d-radio__input N/A Wraps radio's input.
.d-radio N/A Styles radio's input.
.d-radio__copy N/A Wraps radio's label.
.d-radio__label N/A Styles radio's label.
.d-radio-group--disabled .d-radio-group Styles radio group in a disabled state.
.d-radio--error .d-radio Styles radio's input in an error state.
.d-radio--success .d-radio Styles radio's input in a success state.
.d-radio--warning .d-radio Styles radio's input in a warning state.
.d-validation-message N/A Applies base styles to radio's validation message.
.d-validation-message--error .d-validation-message Styles radio's validation message in an error state.
.d-validation-message--success .d-validation-message Styles radio's validation message in a success state.
.d-validation-message--warning .d-validation-message Styles radio's validation message in a warning state.

Examples

Base Styles

Stacked Group

With Description Text

With Validation States

Accessibility

The best accessibility is semantic HTML. Most screen readers understand how to parse inputs if they’re correctly formatted. When it comes to checkboxes, there are a few things to keep in mind:

  • All inputs should have an id attribute.
  • Associate checkbox labels with their inputs using the for attribute. This correlates with the checkbox's id.
  • If you have a group of related checkboxes, use a fieldset to group them and a legend to title the group.

For further information, please visit Gov.UK’s article, "Using the fieldset and legend elements".