Github

Switch

PreviousNext

A control that allows the user to toggle between checked and not checked.

import { Label } from "@/components/ui/label";
import { Switch } from "@/components/ui/switch";

export function SwitchDemo() {
	return (
		<div className="flex items-center space-x-2">
			<Switch id="airplane-mode" />
			<Label htmlFor="airplane-mode">Airplane Mode</Label>
		</div>
	);
}

Installation

pnpm dlx shadcn@latest add https://herocn.dev/r/switch.json

Usage

import { Switch } from "@/components/ui/switch"
<Switch />

Examples

Description

Focus is shared across devices, and turns off when you leave the app.

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

export function SwitchDescription() {
	return (
		<Field orientation="horizontal" className="max-w-sm">
			<FieldContent>
				<FieldLabel htmlFor="switch-focus-mode">
					Share across devices
				</FieldLabel>
				<FieldDescription>
					Focus is shared across devices, and turns off when you leave the app.
				</FieldDescription>
			</FieldContent>
			<Switch id="switch-focus-mode" />
		</Field>
	);
}

Choice Card

Card-style selection where FieldLabel wraps the entire Field for a clickable card pattern.

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

export function SwitchChoiceCard() {
	return (
		<FieldGroup className="w-full max-w-sm">
			<FieldLabel htmlFor="switch-share">
				<Field orientation="horizontal">
					<FieldContent>
						<FieldTitle>Share across devices</FieldTitle>
						<FieldDescription>
							Focus is shared across devices, and turns off when you leave the
							app.
						</FieldDescription>
					</FieldContent>
					<Switch id="switch-share" />
				</Field>
			</FieldLabel>
			<FieldLabel htmlFor="switch-notifications">
				<Field orientation="horizontal">
					<FieldContent>
						<FieldTitle>Enable notifications</FieldTitle>
						<FieldDescription>
							Receive notifications when focus mode is enabled or disabled.
						</FieldDescription>
					</FieldContent>
					<Switch id="switch-notifications" defaultChecked />
				</Field>
			</FieldLabel>
		</FieldGroup>
	);
}

Disabled

Add the disabled prop to the Switch component to disable the switch. Add the data-disabled prop to the Field component for styling.

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

export function SwitchDisabled() {
	return (
		<Field orientation="horizontal" data-disabled className="w-fit">
			<Switch id="switch-disabled-unchecked" disabled />
			<FieldLabel htmlFor="switch-disabled-unchecked">Disabled</FieldLabel>
		</Field>
	);
}

Invalid

Add the aria-invalid prop to the Switch component to indicate an invalid state. Add the data-invalid prop to the Field component for styling.

You must accept the terms and conditions to continue.

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

export function SwitchInvalid() {
	return (
		<Field orientation="horizontal" className="max-w-sm" data-invalid>
			<FieldContent>
				<FieldLabel htmlFor="switch-terms">
					Accept terms and conditions
				</FieldLabel>
				<FieldDescription>
					You must accept the terms and conditions to continue.
				</FieldDescription>
			</FieldContent>
			<Switch id="switch-terms" aria-invalid />
		</Field>
	);
}

Size

Use the size prop to change the size of the switch.

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

export function SwitchSizes() {
	return (
		<FieldGroup className="w-full max-w-[10rem]">
			<Field orientation="horizontal">
				<Switch id="switch-size-sm" size="sm" />
				<FieldLabel htmlFor="switch-size-sm">Small</FieldLabel>
			</Field>
			<Field orientation="horizontal">
				<Switch id="switch-size-default" size="default" />
				<FieldLabel htmlFor="switch-size-default">Default</FieldLabel>
			</Field>
			<Field orientation="horizontal">
				<Switch id="switch-size-large" size="lg" />
				<FieldLabel htmlFor="switch-size-large">Large</FieldLabel>
			</Field>
		</FieldGroup>
	);
}

RTL

يتم مشاركة التركيز عبر الأجهزة، ويتم إيقاف تشغيله عند مغادرة التطبيق.

"use client";

import {
	type Translations,
	useTranslation,
} from "@/components/language-selector";
import {
	Field,
	FieldContent,
	FieldDescription,
	FieldLabel,
} from "@/components/ui/field";
import { Switch } from "@/components/ui/switch";

const translations: Translations = {
	en: {
		dir: "ltr",
		values: {
			label: "Share across devices",
			description:
				"Focus is shared across devices, and turns off when you leave the app.",
		},
	},
	ar: {
		dir: "rtl",
		values: {
			label: "المشاركة عبر الأجهزة",
			description:
				"يتم مشاركة التركيز عبر الأجهزة، ويتم إيقاف تشغيله عند مغادرة التطبيق.",
		},
	},
	he: {
		dir: "rtl",
		values: {
			label: "שיתוף בין מכשירים",
			description: "המיקוד משותף בין מכשירים, וכבה כשאתה עוזב את האפליקציה.",
		},
	},
};

export function SwitchRtl() {
	const { dir, language, t } = useTranslation(translations, "ar");

	return (
		<div lang={language} dir={dir}>
			<Field orientation="horizontal" className="max-w-sm">
				<FieldContent>
					<FieldLabel htmlFor="switch-focus-mode-rtl">{t.label}</FieldLabel>
					<FieldDescription>{t.description}</FieldDescription>
				</FieldContent>
				<Switch id="switch-focus-mode-rtl" />
			</Field>
		</div>
	);
}

API Reference

Switch

PropTypeDefault