# Switch shadcn switch as a two-state pixel toggle with a dithered on side. Source: https://www.ui95.dev/components/switch ## Examples ```tsx import { Label } from "@/components/ui/label" import { Switch } from "@/components/ui/switch" import type { ShowcaseDemo } from "../types" type SwitchState = { label: string size: "sm" | "default" isChecked: boolean isDisabled?: boolean isInvalid?: boolean } const STATES: readonly SwitchState[] = [ { label: "off", size: "default", isChecked: false }, { label: "on", size: "default", isChecked: true }, { label: "sm off", size: "sm", isChecked: false }, { label: "sm on", size: "sm", isChecked: true }, { label: "disabled off", size: "default", isChecked: false, isDisabled: true }, { label: "disabled on", size: "default", isChecked: true, isDisabled: true }, { label: "invalid", size: "default", isChecked: false, isInvalid: true }, ] function renderSwitch({ label, size, isChecked, isDisabled, isInvalid }: SwitchState) { const id = `switch-${label.replace(/\s/g, "-")}` return (

Turbo

) } export const demo: ShowcaseDemo = { span: "single", variants: STATES.map((state) => ({ label: state.label, render: () => renderSwitch(state) })), } ``` ## Installation ```bash npx shadcn@latest add https://www.ui95.dev/r/switch.json ``` Run it in a Radix shadcn project that already has the UI95 theme. Dependencies: ```bash npm install cn radix-ui ``` `components/ui/switch.tsx` ```tsx "use client" import { cn } from "cn" import { Switch as SwitchPrimitive } from "radix-ui" import * as React from "react" function Switch({ className, size = "default", ...props }: React.ComponentProps & { size?: "sm" | "default" }) { return ( ) } export { Switch } ``` ## API reference ### Switch | Prop | Type | Default | | --- | --- | --- | | `size` | `"default" \| "sm"` | `"default"` | ## Sounds - `switch.on` - `switch.off`