Switch
A setting with on and off states.
Upstream documentationExamples
Installation
Run the Ninaero registry command to install the component and its dependencies, including shared theme styles.
Install Switch
pnpm dlx shadcn@latest add 'https://ninaero.pages.dev/r/switch.json'Usage
A complete example using the installed component and hook paths.
Switch usage
"use client";import { useId } from "react";import { Label } from "@/components/ui/label";import { Switch } from "@/components/ui/switch";function SwitchPreview() { const id = useId(); return ( <div className="flex items-center gap-2"> <Switch id={id} defaultChecked /> <Label htmlFor={id}>Show hints</Label> </div> );}export default function Demo() { return <SwitchPreview />;}API Reference
Ninaero exports and local defaults are listed below. See the upstream reference for inherited primitive props and additional composition examples.
Switch
Switch props
SwitchPrimitive.Root.Props & { size?: "sm" | "default"; sound?: boolean;}- size
- "default"
- sound
- true