Components
Radio
A Radio is a form control that allows the user to select a value from a set of options
Basic Usage
A Radio is a form control that allows the user to select a value from a set of options
import { RadioGroup, RadioGroupItem, Label } from "@epilot/volt-ui"
<RadioGroup defaultValue="daily">
<div className="flex items-center gap-2">
<RadioGroupItem value="daily" id="daily" />
<Label htmlFor="daily">Daily</Label>
</div>
<div className="flex items-center gap-2">
<RadioGroupItem value="weekly" id="weekly" />
<Label htmlFor="weekly">Weekly</Label>
</div>
<div className="flex items-center gap-2">
<RadioGroupItem value="monthly" id="monthly" />
<Label htmlFor="monthly">Monthly</Label>
</div>
</RadioGroup>API Reference
RadioGroup
The root component that wraps a group of radio items. Manages the selected value state for all radio items within it.
| Prop | Type | Default | Description |
|---|---|---|---|
value | string | - | Controlled value of the selected radio item. |
defaultValue | string | - | Uncontrolled default value of the selected radio item. |
onValueChange | (value: string) => void | - | Callback fired when the selected value changes. |
disabled | boolean | false | When true, prevents all radio items in the group from being interacted with. |
required | boolean | false | When true, indicates that a radio item must be selected before form submission. |
name | string | - | The name of the radio group, used when submitting a form. |
className | string | - | Additional CSS classes to apply to the radio group container. |
RadioGroupItem
An individual radio button item within a radio group. Each item must have a unique value.
| Prop | Type | Default | Description |
|---|---|---|---|
value | string | - | The value of the radio item (required). Must be unique within the radio group. |
disabled | boolean | false | When true, prevents the radio item from being interacted with. |
id | string | - | The unique identifier for the radio item element. |
className | string | - | Additional CSS classes to apply to the radio item. |
aria-invalid | boolean | false | When true, indicates that the radio item is invalid. |