Radio group
A set of mutually exclusive options where one value can be selected.
Use a radio group when people must choose exactly one option from a short, visible list. Use a select when the list is long or space is limited.
Built on Radix UI Radio GroupUpstream API
Send updates to the workshop inbox.
Call the workshop when the job changes.
Import
import { RadioGroup, RadioGroupItem } from "@workshop1/ui/components/radio-group"States
Set defaultValue for an initially selected option or control the group with value and onValueChange. Disable an individual item when it is unavailable while keeping the other choices usable.
Accessibility
Give the group an accessible label with aria-label or a visible field label. Radix supplies radio keyboard behaviour; keep each item paired with a visible Label.
Best practices
- Put the most likely option first and select a useful default when appropriate.
- Keep option labels short and mutually exclusive.
- Do not hide the only explanation for a disabled option in a tooltip.