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

Components

Free

Switch for React Aria

Q: How do I add a label to a Switch?

Put the Switch in a horizontal Field next to a FieldLabel, as the default demo does: clicking the label toggles the Switch, and screen readers read the label with it. Add a FieldDescription for a line of help under it, as in the Description demo. With React Aria, give the Switch an id and point the FieldLabel at it with htmlFor.

Q: Does the React Aria Switch submit its value in a form?

Yes. Give it a name: when on, it submits its value, which defaults to "on", and when off it submits nothing, like a checkbox.

Q: How do I make a smaller Switch?

Set size="sm"; the default size is default. Both sizes appear in the Sizes demo. For a different look, edit the Switch file in your ui folder, where the track and thumb sizes are plain classes.

Q: How do I show an error on a Switch?

Mark its Field invalid, as the Invalid demo does: the Switch takes the destructive color, and a FieldDescription or FieldError under it says what is wrong. Use it for a required agreement, like accepting terms.

An instant on or off for settings that don't wait on a save button. For React with React Aria, when a checkbox would look like a choice to submit later.

Flip a setting on or off. The change applies without a save button under the row.

Use it for a preference that should take effect immediately, like airplane mode. A Checkbox fits a choice you submit with a form, or several options that can all be true. In React, React Aria still submits a named switch, so keep a label next to the thumb.

PreviewCode

Airplane Mode

Installation

Free with an account. It carries your token, so the CLI installs everything in one go.

Google GitHub

Use email insteadNo credit card

Anatomy

Switch
├── SwitchLabel
├── SwitchControl
└── SwitchThumb

Usage

import { Field, FieldLabel } from "@/components/ui/field";
import { Switch } from "@/components/ui/switch";

<Field className="w-fit" orientation="horizontal">
  <Switch />
  <FieldLabel>Airplane Mode</FieldLabel>
</Field>

Accessibility

Space: Toggle the switch.
Enter: Toggle the switch.

Demos

Description

A horizontal field puts the label and a FieldDescription in FieldContent, with the switch on the other side. The description carries the consequence: sharing follows you across devices and turns off when you leave. Add that line when the label is too short to be safe, and skip it when the label is already a full sentence.

PreviewCode

Choice Card

FieldLabel wraps the whole field, so the title, the description, and the switch are one hit target. Sharing sits next to notifications, which starts checked. Use the card when a setting needs more than one line and the empty space should toggle it. Use a plain row when a stack of cards would waste the page.

PreviewCode

Disabled

disabled on both the Field and the Switch grays the row and blocks the toggle. Set both, because the field covers the label and the switch covers the control. Use it when the plan or role cannot change the setting, and say why nearby. Off is a chosen value, while disabled means the person cannot choose.

PreviewCode

Invalid

invalid on the Field and aria-invalid on the Switch turn the control to the destructive color. The description says the terms have to be accepted before continuing. Use that pair for a required agreement or a setting that blocks the next step, not for a preference that is merely unset. The color does not announce itself, so the text under the label has to say what is wrong.

PreviewCode

Sizes

size accepts sm or default. Small fits a tight settings row or secondary type, and default matches body text, which is also what you get when the prop is omitted. There is no larger step. Edit the switch styles rather than scaling the control, or the thumb blurs and the hit area drifts.

PreviewCode

Rtl

dir set to rtl on the field and the switch, with an Arabic label and description. The text leads from the right, and the thumb moves with the writing direction instead of a left-to-right slide. Set dir on the switch when a parent direction will not reach it. Logical alignment keeps the control at the end of the row without physical margins.

PreviewCode

FAQ

How do I control a Switch in React?

Keep the on or off state in state and pass it back to the Switch. Use the default prop instead when you only need the starting state. With React Aria, pass isSelected and onChange, which receives the new boolean.

How do I add a label to a Switch?

Put the Switch in a horizontal Field next to a FieldLabel, as the default demo does: clicking the label toggles the Switch, and screen readers read the label with it. Add a FieldDescription for a line of help under it, as in the Description demo. With React Aria, give the Switch an id and point the FieldLabel at it with htmlFor.

Does the React Aria Switch submit its value in a form?

Yes. Give it a name: when on, it submits its value, which defaults to "on", and when off it submits nothing, like a checkbox.

How do I make a smaller Switch?

Set size="sm"; the default size is default. Both sizes appear in the Sizes demo. For a different look, edit the Switch file in your ui folder, where the track and thumb sizes are plain classes.

How do I show an error on a Switch?

Mark its Field invalid, as the Invalid demo does: the Switch takes the destructive color, and a FieldDescription or FieldError under it says what is wrong. Use it for a required agreement, like accepting terms.

Should I use a Switch or a Checkbox?

Use a Switch for a setting that takes effect at once, like turning notifications on. Use a Checkbox for a choice that is submitted later with a form, or when several options can be picked in a list.

How do I install the Switch in React?

Run the command in the Installation section above: it adds the Switch to your ui folder. Pair it with the Field component for its label. The command uses the shadcn CLI.

API Reference

Switch

data-slot="switch"

PropType

children?ReactNode

The label for the element.

defaultSelected?boolean

Whether the element should be selected (uncontrolled).

isSelected?boolean

Whether the element should be selected (controlled).

onChange?(isSelected: boolean) → void

Handler that is called when the element's selection state changes.

Parameters: isSelected – boolean
Returns: void

size?"sm" | "default"

The size.

Type: "sm" | "default"
Default: "default"

value?string

The value of the input element, used when submitting an HTML form. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefvalue).