ComponentsForms
Radio group
Pick exactly one option from a small set.
Theme
Motion
Pick exactly one option from a small set.
<RadioGroup aria-label="Billing" defaultValue="monthly">
<div className="flex items-center gap-2">
<Radio id="monthly" value="monthly" />
<Label htmlFor="monthly">Monthly</Label>
</div>
<div className="flex items-center gap-2">
<Radio id="yearly" value="yearly" />
<Label htmlFor="yearly">Yearly</Label>
</div>
</RadioGroup>The same component at all four levels. Pick the one that fits your project; they share tokens, so they mix.
npm i junco @junco/tailwindimport { RadioGroup, Radio, Label } from "junco";
<RadioGroup aria-label="Billing" defaultValue="monthly">
<div className="flex items-center gap-2">
<Radio id="monthly" value="monthly" />
<Label htmlFor="monthly">Monthly</Label>
</div>
</RadioGroup>Make the whole card the label for a bigger target. The ring follows the checked radio.
RadioGroup#value / defaultValueonValueChangeorientationdisabledname / required| Prop | Type | Default |
|---|---|---|
value / defaultValueControlled or initial value. | string | – |
onValueChangeCalled when the choice changes. | (value: string) => void | – |
orientationLayout and which arrow keys move between options. | "vertical" | "horizontal" | "vertical" |
disabledDisables every option. | boolean | false |
name / requiredFor native form submission. | string / boolean | – |
Radio#valuesizedisabled| Prop | Type | Default |
|---|---|---|
valueRequired. The group's value when this one is checked. | string | – |
sizeCircle size. | "sm" | "md" | "lg" | "md" |
disabledSkips this option. | boolean | false |
| Key | Action |
|---|---|
| Tab | Moves focus into the group (to the checked option) and out again. |
| ↑↓ | Moves to and checks the previous or next option. |
| ←→ | Same, for horizontal groups. |
| Space | Checks the focused option. |