RadioGroup Component
A group of radio buttons for selecting a single option from multiple choices with easy state management.
Form Control
Live Preview
Current value: option1
Usage
import { RadioGroup } from '@featherstudio/react-daisyui-kit';
import { useState } from 'react';
export default function App() {
const [selected, setSelected] = useState('option1');
return (
<RadioGroup
value={selected}
onChange={setSelected}
name="plan"
direction="vertical"
options={[
{ value: 'option1', label: 'Option 1' },
{ value: 'option2', label: 'Option 2' },
{ value: 'option3', label: 'Option 3', disabled: true },
]}
/>
);
}Features
Single Selection
Only one option can be selected at a time.
Easy State Management
Simple onChange callback handling.
Accessible
Keyboard navigation and semantic HTML.
Flexible Layout
Vertical or horizontal arrangement.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| value | string | '' | Selected value |
| onChange | (value: string) => void | - | Change handler |
| options | Array<{ label, value, disabled? }> | [] | Radio options list |
| name | string | - | Native radio group name attribute |
| size | 'sm' | 'md' | 'lg' | 'md' | Radio input size preset |
| direction | 'horizontal' | 'vertical' | 'vertical' | Layout direction of radio options |
| onBlur | () => void | - | Blur callback for validation flows |
| error | string | string[] | - | Error state payload for form integration |