Radio
v1.0.0A single-select radio group with keyboard arrow navigation, animated selection indicator, accessible ARIA radiogroup semantics, and error state support.
Basic Radio Group
A simple uncontrolled radio group with label and description on each option. Arrow keys navigate between options.
Basic features for individuals
Advanced analytics and API access
Dedicated support and SLA
Controlled Radio Group
Control the selected value externally with the <code>value</code> and <code>onValueChange</code> props.
Single instance, 1 GB RAM
Three instances, 4 GB RAM each
Unlimited instances, custom SLA
Selected: starter
Disabled State
Disable the entire group or individual radio options. Disabled radios are skipped during keyboard navigation.
End of life — no longer supported
Active LTS with security backports
Latest with experimental features
North Virginia
Ireland
Singapore
The region group is fully disabled.
Error State
Pass an <code>error</code> prop to individual Radio items to show destructive border styling with an animated error message.
Visa, Mastercard, Amex
Pay with your PayPal balance
PayPal is currently unavailable in your region.
BTC, ETH, USDC
Inline Horizontal Layout
Radio groups stack vertically by default, but you can use flexbox classes to lay them out horizontally.
API Reference
Properties accepted by the RadioGroup context wrapper and individual Radio items.
Property | Type | Default | Description |
|---|---|---|---|
| value (RadioGroup) | string | undefined | Controlled selected value for the entire radio group. |
| defaultValue (RadioGroup) | string | undefined | Uncontrolled initial selected value on first render. |
| onValueChange (RadioGroup) | (value: string) => void | undefined | Callback triggered when a radio option is selected. |
| disabled (RadioGroup) | boolean | false | Disables all radio children within the group context. |
| label (RadioGroup) | string | undefined | Accessible legend label for the radio group fieldset. |
| value (Radio) | string | required | Unique value for this radio option within the group. |
| label (Radio) | React.ReactNode | undefined | Primary label rendered beside the radio circle. |
| description (Radio) | React.ReactNode | undefined | Secondary text rendered below the label. |
| error (Radio) | string | undefined | Error message with destructive border and animated text. |
| disabled (Radio) | boolean | false | Disables this specific radio option. |