Radio
Managed radio group and item controls for one-of-many selection.
Add it to your project
Eject the complete radio group, then import from its generated local barrel. The copied source and CSS belong to your application.
bash
pnpm exec toucan eject radiobash
npx toucan eject radioapp.tsx
import { Radio, RadioGroup } from '@/components/toucan/radio';Use when
Users must choose exactly one visible option from a short set.
Avoid when
Multiple choices are valid or the option list is long.
Example
Plan
Basic features
Advanced features
Custom solutions
API reference
Generated from packages/react/src/components. Only Toucan-specific props are listed; forwarded native props remain available as noted for each export.
RadioRadioGroup
Radio
Props type: RadioProps
| Name | Type | Default | Required | Description |
|---|---|---|---|---|
description | string | undefined | No | Supporting text connected to the control. |
disabled | boolean | undefined | No | Prevents interaction when true. |
label | string | — | Required | Visible or accessible label for the control. |
value | string | — | Required | Controlled value. |
Also accepts the native input attributes that are not replaced by a Toucan prop.
RadioGroup
Props type: RadioGroupProps
| Name | Type | Default | Required | Description |
|---|---|---|---|---|
defaultValue | string | undefined | No | Initial value when the component is uncontrolled. |
description | string | undefined | No | Supporting text connected to the control. |
disabled | boolean | false | No | Prevents interaction when true. |
error | string | undefined | No | Validation error text or error state. |
hideLabel | boolean | undefined | No | Visually hide the label while keeping it available to assistive technology. |
label | string | undefined | No | Visible or accessible label for the control. |
name | string | undefined | No | Form field name submitted with the control. |
onChange | (value: string) => void | undefined | No | Called when the value changes. |
orientation | "horizontal" | "vertical" | 'vertical' | No | Horizontal or vertical orientation. |
required | boolean | undefined | No | Marks the control as required. |
value | string | undefined | No | Controlled value. |
Also accepts the native div attributes that are not replaced by a Toucan prop.
Type exports
RadioGroupProps, RadioProps
Accessibility
- RadioGroup provides group labelling.
- Arrow keys move and select options using native radio behavior.
Token families
radiofocus