Radio
A styled <input type="radio"> with optional label, description, and error message. Use the name prop to group radio buttons into a single-choice set.
Basic group
<Stack gap="sm">
<Radio label="React" name="framework" value="react" />
<Radio label="Vue" name="framework" value="vue" />
<Radio label="Davaux" name="framework" value="davaux" checked />
</Stack>With description and error
This is the first option with a description.
This option is not available.
<Radio
label="Option A"
description="This is the first option."
name="group"
value="a"
/>
<Radio
label="Option B"
error="This option is not available."
name="group"
value="b"
/>States
<Radio label="Default" name="states" value="default" />
<Radio label="Checked" name="states" value="checked" checked />
<Radio label="Disabled" name="states" value="disabled" disabled />Sizes and colors
<Radio size="xs" label="xs" name="sizes" value="xs" />
<Radio size="md" label="md" name="sizes" value="md" checked color="green" />
<Radio size="xl" label="xl" name="sizes" value="xl" color="violet" />Props
| Prop | Type | Default | Description |
|---|---|---|---|
id | string | — | Associates label with radio via HTML for/id |
label | ReactNode | — | Clickable label beside the radio button |
description | ReactNode | — | Helper text below the label |
error | ReactNode|boolean | — | Error message; pass true for styles only |
checked | boolean | — | Selected state (SSR snapshot) |
disabled | boolean | — | Disables the radio button |
required | boolean | — | Marks the field as required |
size | 'xs'|'sm'|'md'|'lg'|'xl' | — | Radio button size |
color | string | — | Fill color of the selected radio button |
iconColor | string | — | Color of the dot inside the selected radio |
labelPosition | 'right'|'left' | 'right' | Side on which the label is rendered |
name | string | — | Groups radio buttons into a single-choice set |
value | string | — | Value submitted when selected |
class | string | — | Additional CSS class names |
style | object | — | Inline styles |