React Alert Dialog - Form with Checkboxes
An alert dialog form with multiple checkboxes and descriptive labels for independent multi-select preferences
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Sometimes users need to pick multiple options, not just one. This React alert dialog presents checkboxes with labels and helper text for notification preferences where email, push, and SMS choices are independent—not mutually exclusive. Built with shadcn/ui and Radix UI, the space-x-3 layout and items-start alignment handle multi-line descriptions gracefully. Perfect for preference selection, feature opt-ins, or any scenario where users should be able to check all that apply without radio button constraints forcing single choices.
Pattern created by @haydenbleasel
Installation
npx shadcn@latest add https://www.shadcn.io/registry/alert-dialog-form-7.jsonnpx shadcn@latest add https://www.shadcn.io/registry/alert-dialog-form-7.jsonpnpm dlx shadcn@latest add https://www.shadcn.io/registry/alert-dialog-form-7.jsonbunx shadcn@latest add https://www.shadcn.io/registry/alert-dialog-form-7.jsonRelated patterns you will also like
Form with Radio Group
Single-choice alternative
Checkbox Component
Standalone checkbox patterns
Multiple Inputs Dialog
Form with multiple fields
Checkbox Confirmation
Checkbox used for agreement
Single Input Dialog
Basic single field form
Standard Dialog
General dialog for custom content
Questions you might have
React Alert Dialog - Form with Radio Group
An alert dialog form using RadioGroup with labels and descriptions for mutually exclusive choices like format selection
React Alert Dialog - Simple Information Alert
A simple alert dialog for non-critical information announcements with a single OK acknowledgment button