PersianLabs/ui

Switch

A control that toggles between checked and unchecked. Built on Base UI's switch primitive.

Last updated August 7, 2026

CreditsModifiedPublished

Copied from shadcn/ui.

  • The thumb slides toward the reading-end (mirrored in RTL) instead of always sliding right

Overview

import { Label } from "@/components/ui/label"
import { Switch } from "@/components/ui/switch"
 
export function SwitchDemoExample() {
  return (
    <div className="flex items-center gap-2">
      <Switch id="switch-demo-airplane" />
      <Label htmlFor="switch-demo-airplane">Airplane Mode</Label>
    </div>
  )
}

Installation

$ npx shadcn@latest add https://ui.persian-labs.ir/r/switch.json

Usage

import { Switch } from "@/components/ui/switch"
 
export function Example() {
  return <Switch />
}

Size

Use size="sm" for a smaller switch.

import { Label } from "@/components/ui/label"
import { Switch } from "@/components/ui/switch"
 
export function SwitchSizeExample() {
  return (
    <div className="flex flex-col gap-4">
      <div className="flex items-center gap-2">
        <Switch id="switch-size-sm" size="sm" defaultChecked />
        <Label htmlFor="switch-size-sm">Small</Label>
      </div>
      <div className="flex items-center gap-2">
        <Switch id="switch-size-default" defaultChecked />
        <Label htmlFor="switch-size-default">Default</Label>
      </div>
    </div>
  )
}

RTL

import { Label } from "@/components/ui/label"
import { Switch } from "@/components/ui/switch"
 
export function SwitchRtlExample() {
  return (
    <div className="flex items-center gap-2">
      <Switch id="switch-rtl-notifications" defaultChecked />
      <Label htmlFor="switch-rtl-notifications">اعلان‌ها</Label>
    </div>
  )
}

API Reference

Switch

PropTypeDefaultDescription
checkedbooleanundefinedThe checked state. Use when controlled.
defaultCheckedbooleanfalseThe initial checked state when uncontrolled.
onCheckedChange(checked, details) => void—Called when the checked state changes.
size"default" | "sm""default"The size of the switch.
disabledbooleanfalsePrevents interaction with the switch.
Edit this page on GitHub
PreviousSeparatorNextTabs