Balance Logo
Reckon Design System


Radios are used in forms when a user needs to select a single value from several options.
pnpm add @reckon-web/radio
Import usage
import {
} from '@reckon-web/radio';
  • Code
  • API

Radio buttons allow users to make a single selection among a group of options. In a form, always place radios underneath one another to aid in a user’s ability to scan the form.


The Radio component maps to a radio input and a label. The label is provided as children to the component. If you need custom label behaviour use the RadioPrimitive component.

Open in Playroom


The Radio component passes on the original event through the onChange handler. Use the event target's checked property to get the latest value and update state accordingly.


The Radio is available in a "small" size. Reserve this appearance for data-rich, dense interfaces.


  • List options in a logical order (alphabetically, numerically, time-based, etc.)
  • Most likely to least likely to be selected
  • Include at least two or more choices
  • Include mutually exclusive options—this means that each option must be independent from every other option in the list
  • By default, no radio elements should be selected


Use the RadioGroup to implement a group of radios. Each Radio within a group must have a "value" prop.


Use the RadioPrimitive to implement custom behaviours and appearances.

Copyright © 2022 Reckon. Designed and developed in partnership with Thinkmill.
Bitbucket logoJira software logoConfluence logo