Radio
A group of mutually exclusive options where only one can be selected at a time. Wrap individual Radio items inside a RadioGroup to manage the shared value and onChange handler.
1<RadioGroup value={plan} onChange={setPlan}>
2 <Radio value="free" label="Free" />
3 <Radio value="pro" label="Pro" />
4 <Radio value="enterprise" label="Enterprise" />
5</RadioGroup>
6
Usage
1import { RadioGroup, Radio } from "atlas";
2
3<RadioGroup value={value} onChange={setValue}>
4 <Radio value="free" label="Free" />
5 <Radio value="pro" label="Pro" />
6 <Radio value="enterprise" label="Enterprise" />
7</RadioGroup>
8
Examples
Default
The default
RadioGroup renders a vertical stack of mutually exclusive Radio options.1<RadioGroup value={plan} onChange={setPlan}>
2 <Radio value="free" label="Free" />
3 <Radio value="pro" label="Pro" />
4 <Radio value="enterprise" label="Enterprise" />
5</RadioGroup>
6
With descriptions
Pass a
description to each Radio to add supporting text beneath the label, giving users more context about each option.1<RadioGroup value={plan} onChange={setPlan}>
2 <Radio value="free" label="Free" description="Up to 5 projects." />
3 <Radio value="pro" label="Pro" description="Unlimited projects and analytics." />
4 <Radio value="enterprise" label="Enterprise" description="Custom SLA and support." />
5</RadioGroup>
6
Disabled
Set
disabled on the RadioGroup to lock the current selection and prevent any changes.1<RadioGroup value="pro" disabled>
2 <Radio value="free" label="Free" />
3 <Radio value="pro" label="Pro" />
4 <Radio value="enterprise" label="Enterprise" />
5</RadioGroup>
6
API Reference
| Prop | Type | Default |
|---|---|---|
| value | string | - |
| onChange | (value: string) => void | - |
| name | string | - |
| disabled | boolean | false |