Radio is a form component that allows users to select a single option from a group of mutually exclusive choices. It must be used within a RadioGroup component.
Basic usage
import { RadioGroup, Radio, View } from 'reshaped';
function Example() {
return (
<RadioGroup name="plan">
<View gap={3}>
<Radio value="free">Free Plan</Radio>
<Radio value="pro">Pro Plan</Radio>
<Radio value="enterprise">Enterprise Plan</Radio>
</View>
</RadioGroup>
);
}
With labels
import { RadioGroup, Radio, View, Text } from 'reshaped';
function LabelExample() {
return (
<RadioGroup name="plan">
<View gap={3}>
<Radio value="free">
<View gap={1}>
<Text weight="medium">Free Plan</Text>
<Text variant="body-2" color="neutral-faded">
Perfect for individuals
</Text>
</View>
</Radio>
<Radio value="pro">
<View gap={1}>
<Text weight="medium">Pro Plan</Text>
<Text variant="body-2" color="neutral-faded">
For small teams
</Text>
</View>
</Radio>
</View>
</RadioGroup>
);
}
import { RadioGroup, Radio, View } from 'reshaped';
<RadioGroup name="size">
<View gap={3}>
<Radio size="small" value="s">Small radio</Radio>
<Radio size="medium" value="m">Medium radio</Radio>
<Radio size="large" value="l">Large radio</Radio>
</View>
</RadioGroup>
Disabled state
import { RadioGroup, Radio, View } from 'reshaped';
<RadioGroup name="disabled">
<View gap={3}>
<Radio value="option-1">Enabled option</Radio>
<Radio value="option-2" disabled>Disabled option</Radio>
</View>
</RadioGroup>
Accessibility
Radio follows accessibility best practices:
- Uses semantic HTML radio input
- Must be used within RadioGroup for proper ARIA roles
- Supports ARIA attributes via
inputAttributes
- Label is properly associated with input
- Keyboard accessible (Arrow keys to navigate, Space to select)
- Screen reader announces checked/unchecked state
Value of the input element
Name of the input element. Usually inherited from RadioGroup.
Component checked state, enables controlled mode. Usually managed by RadioGroup.
Default checked state, enables uncontrolled mode
Disable the form field from the form submission
Indicate that the form field has an error. Automatically inherited from FormControl or RadioGroup.
size
'small' | 'medium' | 'large'
default:"medium"
Component size. Supports responsive values.
onChange
(args: { value: boolean }) => void
Callback when the input value changes
onFocus
(e: React.FocusEvent) => void
Callback when the input is focused
onBlur
(e: React.FocusEvent) => void
Callback when the input is blurred
Node for inserting children
Additional classname for the root element
Additional attributes for the root label element
Additional attributes for the input element. Use for ARIA attributes.
Radio components should always be used inside a RadioGroup for proper form handling and accessibility.