Skip to content

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

Free

Form with Switch for React

Email, push, and desktop notification switches on bordered rows. Email and desktop start turned on.

Three switches sit on bordered rows under Notification Settings. Email and desktop start on, and push starts off. Each row has a label and a one-line description.

Use it for settings that take effect on their own, with no required choice. A must-accept term is a Checkbox. In React, Base UI does not save the switches. The form does.

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

Usage

<form className="w-full max-w-md" onSubmit={form.handleSubmit(onSubmit)}>
  <FieldGroup>
    <FieldSet>
      <FieldLegend>Notification Settings</FieldLegend>
      <FieldGroup className="gap-4">
        {notifications.map((notification) => (
          <Controller
            control={form.control}
            key={notification.name}
            name={notification.name}
            render={({ field }) => (
              <Field
                className="rounded-lg border p-4"
                orientation="horizontal"
              >
                <FieldContent>
                  <FieldLabel
                    htmlFor={`form-with-switch-${notification.name}`}
                  >
                    {notification.label}
                  </FieldLabel>
                  <FieldDescription>
                    {notification.description}
                  </FieldDescription>
                </FieldContent>
                <Switch
                  checked={field.value}
                  id={`form-with-switch-${notification.name}`}
                  name={field.name}
                  onCheckedChange={field.onChange}
                />
{/* The rest of the file is under Installation. */}

FAQ

How is each switch connected to the form?

The rows come from one notifications array mapped to a Controller each. Switch takes checked={field.value} and onCheckedChange={field.onChange}.

Which switches start on?

defaultValues sets emailNotifications and desktopNotifications to true and pushNotifications to false.

How is each row arranged?

Each row is Field orientation="horizontal" with rounded-lg border p-4: FieldContent with the FieldLabel and FieldDescription first, then the Switch. The rows sit in a FieldGroup inside a FieldSet whose FieldLegend is Notification Settings.

What do the three descriptions say?

Email Notifications: "Receive notifications via email." Push Notifications: "Receive push notifications on your device." Desktop Notifications: "Receive notifications on your desktop."

Does this form show a validation message?

No. Each value is z.boolean(), and on or off both pass, so the rows have no FieldError. Add a refine and a FieldError if one setting must be on.

What does Save Preferences log?

Save Preferences is a type="submit" button. form.handleSubmit(onSubmit) logs { desktopNotifications, emailNotifications, pushNotifications } to the console.

API Reference

Field

Sets orientation="horizontal", htmlFor, form-with-switch-, notification and name. The rest is on the Field page.

Switch

Sets checked={field.value}, id, form-with-switch-, notification, name and name={field.name}. The rest is on the Switch page.

Button

Sets type="submit". The rest is on the Button page.

All 42 form examples