RadioGroup
Component used when only one choice may be selected in a series of options
Name@spark-ui/radio-group
Version2.1.2
LicenseMIT
RadioGroup#
Contains all the parts of a radio group.
| Attribute | Type | Description | Default |
| asChild | boolean | Change the component to the HTML tag or custom component of the only child. | null |
| defaultValue | string | The value of the radio item that should be checked when initially rendered. Use when you do not need to control the state of the radio items. | null |
| value | string | The controlled value of the radio item to check. Should be used in conjunction with onValueChange. | null |
| onValueChange | (value: string) => void | Event handler called when the value changes. | null |
| disabled | boolean | When true, prevents the user from interacting with radio items. | null |
| name | string | The name of the group. Submitted with its owning form as part of a name/value pair. | null |
| required | boolean | When true, indicates that the user must check a radio item before the owning form can be submitted. | null |
| orientation | "horizontal" | "vertical" | The orientation of the component. | null |
| dir | "ltr" | "rtl" | The reading direction of the radio group. | null |
| loop | boolean | When true, keyboard navigation will loop from last item to first, and vice versa. | null |
| intent | "main" | "support" | "accent" | "basic" | "success" | "alert" | "error" | "info" | "neutral" | - | null |
RadioGroup.Radio#
An item in the group that can be checked.
| Attribute | Type | Description | Default |
| asChild | boolean | Change the component to the HTML tag or custom component of the only child. | null |
| value* | string | The value given as data when submitted with a name. | null |
| disabled | boolean | When true, prevents the user from interacting with the radio item. | null |
| required | boolean | When true, indicates that the user must check the radio item before the owning form can be submitted. | null |
| intent | "main" | "support" | "accent" | "basic" | "success" | "alert" | "error" | "info" | "neutral" | - | null |