Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Alert Dialog examples · Form

Form with Checkboxes Alert Dialog for React

An alert dialog with checkboxes, each with a description, for choosing which notifications to receive.

Framework
UI library

Some choices aren't exclusive: people can want email and push but not SMS. This React alert dialog lists three notification channels as checkboxes, each with a one-line description. It's shadcn.io's Alert Dialog on Base UI with Checkbox and Field parts.

Preview

Preview width

Installation

Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
GoogleGitHub
Use email insteadNo credit card

FAQ

Checkboxes or radio buttons?

Checkboxes for independent choices, where any combination is valid. Radio buttons when picking one should rule out the others, as in Form with Radio Group.

Should some boxes start checked?

Check the options most people want, here email and push, to save them clicks. Leave anything privacy-related or marketing unchecked so it stays opt-in.

How is each row built?

A horizontal Field holds the Checkbox and a FieldContent with FieldLabel and FieldDescription, inside a FieldGroup. The field aligns the checkbox with the first line of text when the description wraps.

How long should each description be?

One short sentence that says what checking it means. Longer explanations belong on a settings page.

Should I require at least one?

Only if your logic needs it. Turning everything off is a valid choice for notifications; if you do require one, disable Save Preferences and say why.

Are the checkboxes labelled?

Each FieldLabel is tied to its control, so clicking the label focuses or toggles it and screen readers announce it. Each also has a name, so the values submit with a form.

All 39 alert dialog examples