Skip to content

shadcn.io is an independent project built on shadcn/ui

Free

Form with Checkboxes Alert Dialog for Ark UI

A notification dialog with three checkboxes. Email and push start checked, SMS starts unchecked, and nothing is saved.

Each option has a label and a short description. Email and push start checked. SMS does not. Save Preferences does not store the choices.

Use checkboxes when any combination is allowed. For one choice out of several, use a Radio Group. In React, Ark UI does not save the preferences.

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

Anatomy

Alert Dialog anatomy: content, title, description, cancel, action

Usage

<AlertDialog>
  <AlertDialogTrigger asChild>
    <Button variant="outline">Notification Settings</Button>
  </AlertDialogTrigger>
  <AlertDialogContent>
    <AlertDialogHeader>
      <AlertDialogTitle>Notification Preferences</AlertDialogTitle>
      <AlertDialogDescription>
        Choose which notifications you want to receive.
      </AlertDialogDescription>
    </AlertDialogHeader>
    <FieldGroup>
      <Field orientation="horizontal">
        <Checkbox defaultChecked name="email-notifications" />
        <FieldContent>
          <FieldLabel>Email Notifications</FieldLabel>
          <FieldDescription>
            Receive email updates about your account activity
          </FieldDescription>
        </FieldContent>
      </Field>
      <Field orientation="horizontal">
        <Checkbox defaultChecked name="push-notifications" />
        <FieldContent>
          <FieldLabel>Push Notifications</FieldLabel>
          <FieldDescription>
            Get push notifications on your devices
          </FieldDescription>
        </FieldContent>
      </Field>
      <Field orientation="horizontal">
{/* The rest of the file is under Installation. */}

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.

API Reference

Alert Dialog

Sets asChild. The rest is on the Alert Dialog page.

Button

Sets variant="outline". The rest is on the Button page.

Field

Sets orientation="horizontal". The rest is on the Field page.

Checkbox

Sets defaultChecked, name="email-notifications", name="push-notifications" and name="sms-notifications". The rest is on the Checkbox page.

All 39 alert dialog examples