Radio Groups

Radio buttons are generally used in groups - collections, describing a set of related options. Only one radio button in a given group can be selected at the same time.

Primary Radio Group:
Circle ShapeCircle shape to indicate whether the radio input is checked or not.
Circle ShapeCircle shape to indicate whether the radio input is checked or not.
Circle ShapeCircle shape to indicate whether the radio input is checked or not.
Secondary Radio Group:
Circle ShapeCircle shape to indicate whether the radio input is checked or not.
Circle ShapeCircle shape to indicate whether the radio input is checked or not.
Circle ShapeCircle shape to indicate whether the radio input is checked or not.

Variations

Primary Radio Buttons

Primary radio group:
Circle ShapeCircle shape to indicate whether the radio input is checked or not.
Circle ShapeCircle shape to indicate whether the radio input is checked or not.
Circle ShapeCircle shape to indicate whether the radio input is checked or not.
copydone

Secondary Radio Buttons

Secondary radio button group:
Circle ShapeCircle shape to indicate whether the radio input is checked or not.
Circle ShapeCircle shape to indicate whether the radio input is checked or not.
Circle ShapeCircle shape to indicate whether the radio input is checked or not.
copydone

Usage

All radio buttons should be wrapped in a <fieldset> element that should have a<legend> tag to provide a description for the grouping.

Use the radio buttons to:

  • Select a single option from a list
  • Expose all available options

Specs

Radio buttons come in two basic styles (primary and secondary). Both have 1rem (16px) height and width and 0.5rem spacing between the button and the label.

Accessibility notes

The <fieldset> surrounds the entire grouping of checkboxes or radio buttons. The <legend>provides a description of the grouping.

Check out the latest release!