Single radio input for mutually exclusive choices. Use RadioGroup when you want arrow-key navigation and one bindable value for the set.
Default usage you can copy and adapt.
Use a label and a shared name to form a native radio group.
Pick a plan (native grouping via shared name).
Selected: basic
Use RadioGroup for options arrays, a semantic fieldset/legend, and roving focus with arrow keys.
Disable either the whole group or individual options to prevent selection.
Bind the selected value and use it to drive UI (e.g. helper copy or conditional fields).
Summary
Selected plan: team
The props you are most likely to need, with types and defaults.
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| id | string | No | generated | Stable id; generated when omitted |
| name | string | No | — | Radio group name (native HTML grouping) |
| value | string | No | — | Radio value submitted with forms |
| label | string | No | — | Visible label text |
| checked | boolean | No | false | Controlled checked state (supports bind:checked) |
| defaultChecked | boolean | No | false | Initial checked state for uncontrolled usage |
| disabled | boolean | No | false | Disable the radio |
| onChange | (event: Event) => void | No | undefined | Change handler (alias: onchange) |
| onchange | (event: Event) => void | No | undefined | Alias for onChange |