Radio
Radios are core interaction and form fields that are specifically used when the user can select “one” of “many” options. When there are multiple options that can be selected at the same time, instead use the “checkbox” component. Radios are best when there are maximum 5 options - otherwise a Select input bar is a much better choice so the UX doesn’t get cluttered.
Examples
Default
Default Radio Button
Labeled Radio Button
Add a label by passing the label prop to the component.
Detailed Radio Button
Add a description by passing the description prop to the component.
Stay on top
Company is always better
It's the magic number
Error Radio Button
Display in error state by passing the error prop to the component.
Stay on top
Company is always better
It's the magic number
Installation
Properties
For more advanced usage, see https://www.radix-ui.com/primitives/docs/components/radio-group (opens in a new tab).
Label for the RadioGroupItem.
Description for the RadioGroupItem.
Disables the RadioGroupItem.
Whether the RadioGroupItem has an error.