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 @herocn/switch

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