shadcn.io is not affiliated with official shadcn/ui
Form examples · Advanced
Form with Radio Buttons for React
A plan picker with three radio buttons, Free, Pro and Enterprise, that needs a choice before it continues.
Exclusive choices need radio buttons: one plan out of three, and none picked until the user decides. The RadioGroup sits in a FieldSet with a FieldLegend and a FieldDescription, wired to React Hook Form by a Controller, and a Zod enum makes the choice required. Use it for plan selection, payment methods or shipping options.
Preview
Installation
FAQ
What values can the plan field take?
plan is z.enum(["free", "pro", "enterprise"]). The labels are "Free - $0/month", "Pro - $9/month" and "Enterprise - Contact us", and the form stores the enum value, such as pro.
How does a choice get into React Hook Form?
A Controller named plan renders the group, and each option is a horizontal Field. RadioGroup takes value={field.value ?? null} and passes the next value to field.onChange; each RadioGroupItem has an id its FieldLabel targets.
What error shows if nothing is selected?
The enum's error is "You need to select a plan." Continue with no choice marks the Field invalid and shows it in the FieldError under the description.
Is a plan selected on first paint?
No. useForm gets only the resolver, so plan starts unset and no option is checked. The group's legend is "Select your plan".
Related
- Form with SelectA required country select with a
- Form with Mixed ControlsA support request form that mixes a text
- Basic Radio GroupA vertical radio group of three options
- Simple Select FieldA country select with a label and a
- Form with CheckboxA form with three checkboxes and their
- Form with Multiple SelectsA name input and three required selects