Component
Radio
A single-select group of radio options with full keyboard and ARIA support. Built on the headless @refraction-ui/radio core.
Basic
Compose RadioItems inside a RadioGroup. Use defaultValue for uncontrolled state.
Installation
$
pnpm add @refraction-ui/react-radioUsage
tsx
import { RadioGroup, RadioItem } from '@refraction-ui/react'
export function MyComponent() {
return (
<RadioGroup defaultValue="standard" name="shipping">
<RadioItem value="standard">Standard — 5-7 business days</RadioItem>
<RadioItem value="express">Express — 2-3 business days</RadioItem>
<RadioItem value="overnight">Overnight — next business day</RadioItem>
</RadioGroup>
)
}Horizontal
Set orientation="horizontal" to lay items out in a row.
Controlled
Drive the selection from state with value and onValueChange.
Selected: weekly
Disabled
Disable the whole group via RadioGroup or a single option via RadioItem.
RadioGroup props
| Prop | Type | Default | Description |
|---|---|---|---|
value | string | -- | Controlled selected value. Pair with `onValueChange`. |
defaultValue | string | -- | Initial selected value when uncontrolled. |
onValueChange | (value: string) => void | -- | Called with the newly selected value. |
name | string | -- | Form field name shared by the group. |
orientation | 'vertical' | 'horizontal' | 'vertical' | Layout direction of the items. |
disabled | boolean | false | Disables every item in the group. |
className | string | -- | Additional CSS classes for the group container. |
RadioItem props
| Prop | Type | Default | Description |
|---|---|---|---|
value | string | -- | Unique value this item selects. Required. |
children | React.ReactNode | -- | Label content rendered beside the radio circle. |
disabled | boolean | false | Disables just this item. |
className | string | -- | Additional CSS classes for the item label. |