Skip to content

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

Free

Settings Card Switch for React

A bordered card with a bell emoji, the label Notifications, a short description, and a switch that starts off.

A bordered card shows a bell emoji, the label Notifications, the line A short description goes here, and a switch that starts off.

The emoji gives each setting its own cue when you have a stack of cards. A divided list is lighter. Submit-later choices fit a Checkbox. In React, Base UI keeps this switch off until someone turns it on.

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

Switch anatomy: root, control, thumb, label

Usage

<div className="flex items-start gap-3 rounded-lg border bg-background p-4">
  <div className="flex size-10 shrink-0 items-center justify-center rounded-lg bg-linear-to-br from-primary to-primary/60">
    <span aria-hidden="true" className="text-lg">
      🔔
    </span>
  </div>
  <Field className="flex-1" orientation="horizontal">
    <FieldContent>
      <FieldLabel
        className="font-medium"
        htmlFor="switch-settings-card-notifications"
      >
        Notifications
      </FieldLabel>
      <FieldDescription>A short description goes here.</FieldDescription>
    </FieldContent>
    <Switch id="switch-settings-card-notifications" />
  </Field>
</div>

FAQ

How is the bell drawn on the card?

A span with text-lg shows the bell emoji inside a size-10 rounded-lg tile with bg-linear-to-br from-primary to-primary/60. The emoji has aria-hidden, since the label already says Notifications. The card is flex items-start gap-3 rounded-lg border bg-background p-4.

How is Notifications tied to the switch?

A horizontal Field holds a FieldContent, with the FieldLabel and the FieldDescription, and then the Switch. The Switch has an id, and the FieldLabel points at it with htmlFor.

How do I control this switch in React?

Nothing in this file sets the on state, so the switch starts off and keeps its own state. To control it, keep the on or off state in your own state and pass it back. To start it on, use the default prop. The prop is defaultChecked. Pass checked; onCheckedChange receives the new boolean.

Does this switch submit with a form?

Give it a name. When on, it submits its value, which defaults to on. When off, it submits nothing. With Base UI, uncheckedValue sets what it submits when off.

How do I make this switch smaller?

Set size="sm". The default size is default. For a different track or thumb, edit those classes in the Switch file in your ui folder.

Which keys toggle the switch?

Tab moves focus to the switch. Space toggles it, and so does Enter.

API Reference

Field

Sets orientation="horizontal" and htmlFor="switch-settings-card-notifications". The rest is on the Field page.

Switch

Sets id="switch-settings-card-notifications". The rest is on the Switch page.

All 19 switch examples