Balance Logo
Reckon Design System
Open playroom

Radio Button Group

A radio button group is used to toggle parts of a form based on user selection. This component is meant to replace all usage of SegmentedControl in forms.
pnpm add @balance-web/radio-button-group
Import usage
import {
} from '@balance-web/radio-button-group';
  • Code
  • API


Use a radio button group only when the options are predefined and there are at least 2 and at most 3 options.

The RadioButtonGroup component behaves similar to an input component since it is a radio group under the hood. It fills the container and must be wrapped in a Field component for it to recieve form validation errors.

Note: It's recommended to frame the component as a yes/no question.

Bad ❌

Edit in Playroom

Good ✅


Toggle between required form sections and field validation based on user selection.

Yes/no/maybe(as text) option

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