Switch

Demos

A switch with its label.

Result notifications

"use client"

import { Switch } from "@workspace/ui/components/switch"

export function SwitchDemo() {
  return (
    <label className="flex w-full max-w-xs items-center justify-between gap-4 text-xs">
      Result notifications
      <Switch defaultChecked />
    </label>
  )
}

Usage

Use a switch for a setting that takes effect right away, like notifications. If the change only applies after a Save button, use a checkbox instead.

Import it from @workspace/ui/components/switch.

Anatomy

Switch — The track and thumb. Wrap it in a label with its text.

Notes

The label should describe the setting, not the action. Write "Notifications", not "Turn on notifications".
Space toggles the switch when it has focus.

Examples

Sizes

default and sm.

DefaultSmall

"use client"

import { Switch } from "@workspace/ui/components/switch"

export function SwitchSizes() {
  return (
    <div className="grid w-full max-w-xs gap-4">
      <label className="flex items-center justify-between gap-4 text-xs">
        Default
        <Switch defaultChecked />
      </label>
      <label className="flex items-center justify-between gap-4 text-xs">
        Small
        <Switch size="sm" defaultChecked />
      </label>
    </div>
  )
}

Disabled

A switch that cannot be changed.

Research programme (closed)

"use client"

import { Switch } from "@workspace/ui/components/switch"

export function SwitchDisabled() {
  return (
    <label className="flex w-full max-w-xs items-center justify-between gap-4 text-xs text-muted-foreground">
      Research programme (closed)
      <Switch disabled />
    </label>
  )
}

Controlled

Hold the state with checked and onCheckedChange.

Share reports with my doctor

Reports are private.

"use client"

import * as React from "react"

import { Switch } from "@workspace/ui/components/switch"

export function SwitchControlled() {
  const [shared, setShared] = React.useState(false)

  return (
    <div className="grid w-full max-w-xs gap-2">
      <label className="flex items-center justify-between gap-4 text-xs">
        Share reports with my doctor
        <Switch checked={shared} onCheckedChange={setShared} />
      </label>
      <p className="text-xs text-muted-foreground">
        {shared ? "Dr. Patel can see new reports." : "Reports are private."}
      </p>
    </div>
  )
}

Props

These are the props you set most often. Unlisted props pass through to the underlying element.

Switch

Prop	Type	Default	Description
`defaultChecked`	`boolean`	`false`	On by default.
`checked`	`boolean`	—	State when controlled.
`onCheckedChange`	`(checked) => void`	—	Called when the state changes.
`size`	`"default" or "sm"`	`default`	Size of the switch.
`disabled`	`boolean`	`false`	Blocks input and dims the switch.
`name`	`string`	—	Field name for form submission.