Radio Group
The Radio Group component provides a user-friendly control that allows users to select a single option from a predefined set. Commonly used in forms and surveys, it simplifies decision-making and ensures a clear and straightforward selection process.
Additional Examples
As Form Field
Configurable Props
<RadioGroup>
Prop | Type | Default/ Options | Description |
|---|---|---|---|
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. | |
value | string | The controlled value of the radio item to check. Should be used in conjunction with onValueChange. | |
onValueChange | function (value: string) => void | Event handler called when the value changes. | |
disabled | boolean | When true, prevents the user from interacting with radio items. | |
name | string | The name of the group. Submitted with its owning form as part of a name/value pair. | |
required | boolean | When true, indicates that the user must check a radio item before the owning form can be submitted. | |
loop | boolean | true | When true, keyboard navigation will loop from last item to first, and vice versa. |
<RadioGroupItem>
Prop | Type | Default/ Options | Description |
|---|---|---|---|
value | string | The value given as data when submitted with a name. | |
disabled | boolean | When true, prevents the user from interacting with radio items. | |
required | boolean | When true, indicates that the user must check a radio item before the owning form can be submitted. |