Radio button ✨
Radio button and toggle switch components for single-choice selections. Click the code examples to copy them.
Radio Group with Label
A radio group with a label and multiple options, including a disabled option
Selected value: option1
Radio Group without Label
A radio group without a label prop, using external label element
Radio Group (Vertical)
Radio buttons arranged vertically using custom valueClassName
Toggle Switch
Various toggle switch configurations and styles
Basic Toggle
A simple toggle switch with label
Off
Controlled Toggle
A toggle with onChange handler
Off
Disabled Toggle
A toggle in disabled state
Off
Toggle with External Label
Toggle with label element outside the component
Off
Disabled Toggle (On)
A disabled toggle in the on state with custom label
Disabled (on)
Split Style Toggle
Toggle with split style showing on/off labels
Split Style Toggle with Label
Larger split toggle with external label
Full Width Layout
Toggles with space-between layout for forms
On
Off
Props Reference
| Prop | Type | Description |
|---|---|---|
| name | string | Input name attribute |
| label | string | Label for the radio group |
| options | array | Array of radio options with label, value, and optional disabled |
| defaultValue | string | Initial selected value |
| disabled | boolean | Disables all radio buttons in the group |
| onChange | function | Callback when selection changes (receives selected value) |
| valueClassName | string | Custom styles for options container (e.g., "flex flex-col" for vertical) |
| value | boolean | (Toggle only) Current toggle state |
| onLabel / offLabel | string | (Toggle only) Labels for on/off states in split style |
| style | ToggleStyle | (Toggle only) Toggle style (ToggleStyle.Split for split view) |