shadcn.io is not affiliated with official shadcn/ui
Radio Group examples · Form
Radio Group with Disabled States for React
Three radio groups compared: all enabled, all disabled, and one disabled option in an enabled group.
Disabled radios show a choice that exists but is not available right now, instead of hiding it. This example puts the three cases one under another, each named by a FieldLegend: a normal group, a group that is disabled as a whole, and a group with one disabled option. In React, Base UI skips disabled items and keeps their value.
Preview
Installation
FAQ
How is the middle group fully disabled?
That RadioGroup is disabled and sets defaultValue to option-3, so Disabled and selected stays the value while both items are off. The prop is disabled.
How is a single option disabled?
The third group sets defaultValue to option-5, and the item with the value option-6 is disabled. The Enabled item in that group stays usable. Set disabled on that RadioGroupItem.
What does the first group show?
It has no disabled prop. defaultValue is option-1, labeled Enabled and selected, and the second item is labeled Enabled.
Why are the disabled labels faded?
Each disabled option sits in a Field with data-disabled, and the label fades with it, so the text matches the dimmed radio. Leave data-disabled off and the label stays at full strength.
Related
- Basic Radio GroupA vertical radio group of three options
- Radio Group in FormA required notification setting in a form
- Radio Group with CardsPlan options as bordered cards, where
- Radio Group with Custom ContentPricing tiers as selectable cards, each
- Radio Group with IconsPayment method options with an icon
- Horizontal Radio GroupA radio group with its three options in a