Thrive Design System

Components

Radio Group

A set of mutually exclusive radio buttons for selecting a single option from a list.

Installation

npm install @thrivecart/ui
yarn add @thrivecart/ui
pnpm add @thrivecart/ui
bun add @thrivecart/ui

Usage

import { RadioGroup, Radio } from '@thrivecart/ui';

Examples

Basic Radio Group

Default

Simple radio group with options

<RadioGroup defaultValue="email">
<Radio value="email" label="Email" />
<Radio value="sms" label="SMS" />
<Radio value="push" label="Push Notification" />
</RadioGroup>

Best Practices

✓

Always set a default value

Pre-select the most common option to reduce user effort.

✓

Keep options visible

Radio buttons work best when all options are visible without scrolling.

✗

Don't use for binary choices

For yes/no, on/off choices, use a Checkbox or Switch instead.

✗

Don't use for many options

If there are more than 5-7 options, use a Select dropdown.

Props

Props

Accessibility

  • Arrow keys navigate between options within the group.
  • Space key selects the focused option.
  • Uses role="radiogroup" on the container.
  • Only the selected radio button is in the tab order.