Usage
import { RadioGroup } from '@kivora/react';
function Demo() {
const [selected, setSelected] = useState('a');
return (
<RadioGroup
options={[
{ value: 'a', label: 'Option A' },
{ value: 'b', label: 'Option B' },
{ value: 'c', label: 'Option C' }
]}
value={selected}
onChange={setSelected}
/>
);
}
Props
options
Array<{ value: string; label: string; disabled?: boolean }>
required
Array of radio button options. Each option must have a value and label.
Controlled selected value.
Default selected value for uncontrolled mode.
Called when selection changes. Receives the selected option’s value.
Name attribute for the radio group. Auto-generated if not provided.
Disables all radio buttons in the group.
orientation
'vertical' | 'horizontal'
default:"'vertical'"
Layout direction of the radio buttons.
Additional CSS classes to apply to the radio group container.
Examples
Basic Radio Group
<RadioGroup
options={[
{ value: 'react', label: 'React' },
{ value: 'vue', label: 'Vue' },
{ value: 'svelte', label: 'Svelte' }
]}
defaultValue="react"
/>
Horizontal Layout
<RadioGroup
options={[
{ value: 'xs', label: 'XS' },
{ value: 's', label: 'S' },
{ value: 'm', label: 'M' },
{ value: 'l', label: 'L' },
{ value: 'xl', label: 'XL' }
]}
orientation="horizontal"
/>
With Disabled Options
<RadioGroup
options={[
{ value: 'free', label: 'Free' },
{ value: 'pro', label: 'Pro' },
{ value: 'enterprise', label: 'Enterprise', disabled: true }
]}
value={plan}
onChange={setPlan}
/>
Fully Disabled
<RadioGroup
options={[
{ value: 'a', label: 'Option A' },
{ value: 'b', label: 'Option B' }
]}
disabled
defaultValue="a"
/>
function FormDemo() {
const [formData, setFormData] = useState({ plan: 'basic' });
return (
<form>
<RadioGroup
options={[
{ value: 'basic', label: 'Basic - $10/month' },
{ value: 'pro', label: 'Pro - $25/month' },
{ value: 'enterprise', label: 'Enterprise - Custom' }
]}
value={formData.plan}
onChange={(plan) => setFormData({ ...formData, plan })}
/>
</form>
);
}
Notes
- All options in a group are mutually exclusive (only one can be selected)
- Uses native radio inputs for accessibility and keyboard navigation
- Custom visual indicators with smooth animations
- Each option can be individually disabled via the
disabled property
- Group-level
disabled prop disables all options
- Focus ring visible on keyboard navigation
- Horizontal orientation uses flexbox with wrapping support