Radio Component

A form control that allows a single selection from a group of choices.

HTML gives us native radio buttons that are fully accessible by default. Unfortunately, the look-and-feel of these controls is often at odds with a web site's design system or branding guidelines. This issue is compounded by the fact that native radio buttons are traditionally very difficult to re-style. Our pattern shows how modern CSS and SVG can be used to create a custom facade over the native radio buttons, while maintaining accessibility requirements.

The purpose of a radio button is to collect form data. Therefore, radio buttons should always be used in conjunction with a form, label and submit button.

The radio is decoupled from its text label to allow more flexibility in terms of layout. How and where you provide this label is up to you, but do not forget it!

If requiring multi-selection, please consider checkboxes or listbox instead.