Radio Button
A radio button for selecting a single option from a group. Supports labels, hints, sizes, and disabled state.
With Label
Radio buttons with labels inside a RadioGroup.
With Label
Option one
Option two
Option three
Label and Hint
Radio buttons with both label and descriptive hint text.
Label and Hint
Basic planUp to 10 users and 20 GB data.
Business planUp to 20 users and 40 GB data.
Enterprise planUnlimited users and unlimited data.
Disabled
Disabled radio group with one option pre-selected.
Disabled
Selected (disabled)This option is selected but disabled.
Unselected (disabled)This option is disabled.
Sizes
Two sizes: sm (18px) and md (22px), shown side by side.
Small / Medium
Basic planUp to 10 users and 20 GB data.
Business planUp to 20 users and 40 GB data.
Enterprise planUnlimited users and unlimited data.
Basic planUp to 10 users and 20 GB data.
Business planUp to 20 users and 40 GB data.
Enterprise planUnlimited users and unlimited data.
Usage
Import RadioButton and RadioGroup, then compose.
tsx
import { RadioButton, RadioGroup } from "@/components/ui/RadioButton";
<RadioGroup aria-label="Plans" defaultValue="basic">
<RadioButton label="Basic plan" hint="Up to 10 users." value="basic" />
<RadioButton label="Business plan" hint="Up to 20 users." value="business" />
<RadioButton label="Enterprise plan" hint="Unlimited users." value="enterprise" />
</RadioGroup>RadioButton Props
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| label | string | — | Label text next to the radio. |
| hint | string | — | Hint/description text below the label. |
| value | string | — | Value of this radio option (required). |
| size | "sm" | "md" | "sm" | Size of the radio circle. |
| disabled | boolean | false | Disable the radio. |
| checked | boolean | — | Controlled checked state. |
| onChange | (value: string) => void | — | Called when selected. |
RadioGroup Props
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| defaultValue | string | — | Initially selected value. |
| value | string | — | Controlled selected value. |
| onChange | (value: string) => void | — | Called when selection changes. |
| size | "sm" | "md" | "sm" | Size applied to all children. |
| disabled | boolean | false | Disable all children. |
| aria-label | string | — | Accessible label for the group. |