Skip to content

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

Free

Square Switch with Label for React

A square switch that starts on, beside the label Enable notifications. Clicking that label toggles the switch.

A square switch starts on, next to the label Enable notifications. The label and the switch are tied, so clicking the words toggles it.

Use a visible label for almost every setting. The square corners are only the shape. If the choice waits for a form submit, use a Checkbox. In React, Base UI reads the label with the switch.

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

<Field className="w-fit" orientation="horizontal">
  <Switch
    className="rounded-sm **:data-[slot=switch-thumb]:rounded"
    defaultChecked
    id="square-switch-notifications"
  />
  <FieldLabel htmlFor="square-switch-notifications">
    Enable notifications
  </FieldLabel>
</Field>

FAQ

How are the corners squared off?

The Switch sets rounded-sm for the track and **:data-[slot=switch-thumb]:rounded for the thumb. The thumb is the part with data-slot="switch-thumb", so the selector reaches it on every library.

Why does the text toggle the switch?

The Switch and a FieldLabel sit in a horizontal Field with w-fit. The Switch has an id, and the FieldLabel points at it with htmlFor.

How do I control this switch in React?

The switch starts on through its default prop, which only sets the starting state; after that it keeps its own state. To control it, keep the on or off state in your own state and pass it back. The prop is defaultChecked. Pass checked; onCheckedChange receives the new boolean.

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.

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" and htmlFor="square-switch-notifications". The rest is on the Field page.

Switch

Sets defaultChecked and id="square-switch-notifications". The rest is on the Switch page.

All 19 switch examples