Balance Logo
Balance
Reckon Design System

Radio

Radios are used in forms when a user needs to select a single value from several options.
Install
pnpm add @reckon-web/radio
Import usage
import {
RadioPrimitive,
Radio
} 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.

Usage

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

Controlled

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

Guidelines

  • 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

Primitive

Use the RadioPrimitive to implement custom behaviours and appearances.

Copyright © 2021 Reckon. Designed and developed in partnership with Thinkmill.