Radio Component
The Radio component allows users to select a single option from a list of choices. It provides various customization options for size, color, and appearance.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| checked | boolean | false | Whether the radio button is checked |
| size | "xs" | "sm" | "md" | "lg" | "xl" | "md" | Sets the size of the radio button |
| variant | "primary" | "secondary" | "success" | "warning" | "error" | "ghost" | "primary" | Sets the color variant of the radio button |
| label | string | undefined | Label text for the radio button |
| isButton | boolean | false | Renders the radio as a button |
| wrapperClass | string | "" | Additional CSS classes for the wrapper element |
| sx | React.CSSProperties | {} | Custom styles to be applied to the radio button |
Usage
import { Radio } from 'knoxui-react';
const [selectedValue, setSelectedValue] = useState('');
<Radio
checked={selectedValue === 'option1'}
onChange={() => setSelectedValue('option1')}
label="Option 1"
/>