Radio components allow users to select a single option from a set of mutually exclusive choices.
The components support various sizes, colors, and can be used individually or as part of a RadioGroup.
The Radio components include the following:
The Radio component allows users to select a single option from a set of choices. It can be used independently or as part of a RadioGroup.
| Radio Props | Type | Description |
|---|---|---|
modelValue | any | |
value | any | The value associated with this radio button. |
disabled | boolean | When true, disables the radio button. |
themeController | boolean | When true, the page's theme will match the radio button's |
color | string | Sets the color variant. Options: - |
neutral | boolean | Applies the neutral color variant. |
| primary | boolean | Applies the primary color variant. |
| secondary | boolean | Applies the secondary color variant. |
| accent | boolean | Applies the accent color variant. |
| success | boolean | Applies the success color variant. |
| warning | boolean | Applies the warning color variant. |
| info | boolean | Applies the info color variant. |
| error | boolean | Applies the error color variant. |
size | string | Sets the size variant. Options: - |
| xs | boolean | Applies the extra small size variant. |
| sm | boolean | Applies the small size variant. |
| md | boolean | Applies the medium size variant. |
| lg | boolean | Applies the large size variant. |
| xl | boolean | Applies the extra large size variant. |
| Radio Events | Arguments | Description |
|---|---|---|
update:modelValue |
The RadioGroup component groups radio buttons for a unified selection experience. It provides shared state and styling to child Radio components.
| RadioGroup Props | Type | Description |
|---|---|---|
modelValue | any | |
name | string | The name attribute for the radio button group. Required for proper radio button functionality. |
color | string | Sets the color variant for all radio buttons in the group. Options: - |
| neutral | boolean | Applies the neutral color variant to all radio buttons in the group. |
| primary | boolean | Applies the primary color variant to all radio buttons in the group. |
| secondary | boolean | Applies the secondary color variant to all radio buttons in the group. |
| accent | boolean | Applies the accent color variant to all radio buttons in the group. |
| success | boolean | Applies the success color variant to all radio buttons in the group. |
| warning | boolean | Applies the warning color variant to all radio buttons in the group. |
| info | boolean | Applies the info color variant to all radio buttons in the group. |
| error | boolean | Applies the error color variant to all radio buttons in the group. |
size | string | Sets the size variant for all radio buttons in the group. Options: - |
| xs | boolean | Applies the extra small size variant to all radio buttons in the group. |
| sm | boolean | Applies the small size variant to all radio buttons in the group. |
| md | boolean | Applies the medium size variant to all radio buttons in the group. |
| lg | boolean | Applies the large size variant to all radio buttons in the group. |
| xl | boolean | Applies the extra large size variant to all radio buttons in the group. |
| RadioGroup Events | Arguments | Description |
|---|---|---|
update:modelValue |
| RadioGroup Slots | Description |
|---|---|
default | The default slot. Place |
| RadioGroup Provides | Type | Description |
|---|---|---|
radio-group | Provides the radio group state to child |