Radio Buttons

Permits user to select only one option from a list of two or more

Default

Default and standard spacing for radio buttons.

Copy to clipboard
View source in repository View in repository
View in code sandbox View in sandbox

Compact

Compact spacing for radio buttons.

Copy to clipboard
View source in repository View in repository
View in code sandbox View in sandbox

Custom

Custom styles for radio buttons.

Copy to clipboard
View source in repository View in repository
View in code sandbox View in sandbox

Accessibility

To ensure that usage of this component complies with accessibility guidelines:

  • Each radio button must be focusable and keyboard accessible:
    • When radio button has focus, the Space key changes the selection
    • Tab key moves to next element in list
  • Fieldsets should be:
    • Used when associating group of radio buttons
    • Identified or described as a group using a <legend> tag
  • Avoid nested fieldsets
  • Custom radio buttons maintain accessibility requirements. The radio button icon is only visually hidden and replaced with custom style

This component has compliance with WCAG guidelines by:

  • Wrapping the input in a label element and label is automatically associated with it

For more information, review techniques and failures for: