Components

Radio buttons

Single-choice selection within a group, built on React Aria. Supports an optional hint per option, horizontal/vertical orientation, and two sizes - driven from config/design-system.config.ts.

Component Playground

Live instance - the controls read their options from the same config that drives the Variants section below.

Starter

Growth

Scale

sm · vertical

Controls

Size

Orientation

Hint

Sizes

Two sizes - sm (default) and md.

Small / Medium

sm

md

With hint text

Pass a hint to a RadioButton for supporting detail beneath its label.

Labelled with hint

Starter

For individuals trying things out.

Growth

For small teams that need more room.

Scale

For organisations with advanced needs.

Disabled

Disabled dims every option in the group and prevents interaction. Pass isDisabled on a single RadioButton to disable just that option instead.

Group disabled

Starter

Growth

Scale

Orientation

Groups stack vertically by default - pass orientation="horizontal" to lay options out in a row.

Group

A real-world plan selector - the common pattern for pricing and settings pages.

Plan selector

Starter

1 user, community support.

Growth

Up to 10 users, priority support.

Scale

Unlimited users, dedicated support.

API

RadioGroup holds the selected value and orientation; each RadioButton inside it is one option.

RadioGroup

Prop	Type	Default
`size`	`"sm" \| "md"`	`"sm"`
`value`	`string`	`-`
`defaultValue`	`string`	`-`
`onChange`	`(value: string) => void`	`-`
`orientation`	`"horizontal" \| "vertical"`	`"vertical"`
`isDisabled`	`boolean`	`false`
`isRequired`	`boolean`	`false`
`name`	`string`	`-`
`className`	`string`	`-`
`children`	`ReactNode`	`-`

RadioButton

Prop	Type	Default
`value`	`string`	`-`
`size`	`"sm" \| "md"`	`inherited from RadioGroup`
`label`	`ReactNode`	`-`
`hint`	`ReactNode`	`-`
`isDisabled`	`boolean`	`false`
`className`	`string`	`-`

Usage

import { RadioButton, RadioGroup } from "@/components/base/radio-buttons/radio-buttons";

<RadioGroup defaultValue="growth" aria-label="Plan">
  <RadioButton value="starter" label="Starter" />
  <RadioButton value="growth" label="Growth" />
  <RadioButton value="scale" label="Scale" />
</RadioGroup>

Figma

No linked Figma file yet - this component was pulled in via the Untitled UI CLI, not designed in Figma first.