Skip to content

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

Free

Settings List Switch for React

Two divided rows: Marketing emails starts off, and Security emails starts on, each with a label and a description.

A bordered list has two rows. Marketing emails is off, with Receive emails about new products. Security emails is on, with Receive emails about account security.

Use a divided list for related settings without a card around each one. One featured setting can stand alone in a card. Choices that wait for Save fit a Checkbox. In React, Base UI keeps each switch's own state.

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 flex-col divide-y rounded-lg border bg-background">
  <Field className="p-4" orientation="horizontal">
    <FieldContent>
      <FieldLabel
        className="font-medium"
        htmlFor="switch-settings-list-marketing"
      >
        Marketing emails
      </FieldLabel>
      <FieldDescription>Receive emails about new products</FieldDescription>
    </FieldContent>
    <Switch id="switch-settings-list-marketing" />
  </Field>
  <Field className="p-4" orientation="horizontal">
    <FieldContent>
      <FieldLabel
        className="font-medium"
        htmlFor="switch-settings-list-security"
      >
        Security emails
      </FieldLabel>
      <FieldDescription>
        Receive emails about account security
      </FieldDescription>
    </FieldContent>
    <Switch defaultChecked id="switch-settings-list-security" />
  </Field>
</div>

FAQ

How are the two settings stacked?

The wrapper is flex flex-col divide-y rounded-lg border bg-background. Each row is a horizontal Field with p-4, holding a FieldContent and a Switch.

Which switch starts on?

Marketing emails starts off. Security emails starts on through its default prop. The prop is defaultChecked.

How is each label tied to its switch?

Each row is its own Field, so each label belongs to its own switch. The Switch has an id, and the FieldLabel points at it with htmlFor.

How do I control this switch in React?

Each switch keeps its own state here. To control them, keep each switch's on or off state in your own state, such as one object with a key per setting, and pass it back. 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.

Which keys toggle the switch?

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

API Reference

Field

Sets orientation="horizontal", htmlFor="switch-settings-list-marketing" and htmlFor="switch-settings-list-security". The rest is on the Field page.

Switch

Sets id="switch-settings-list-marketing", defaultChecked and id="switch-settings-list-security". The rest is on the Switch page.

All 19 switch examples