Switch

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

Switch

import { Switch } from "@/components/optics/switch";import { Label } from "@/components/optics/label";<div className="flex items-center space-x-2">  <Switch    id="airplane-mode"    variant="raised"  />  <Label htmlFor="airplane-mode">    Airplane Mode  </Label></div>

import { Switch } from "@/components/optics/switch";import { Label } from "@/components/optics/label";<div className="flex items-center space-x-2">  <Switch    id="airplane-mode"    variant="raised"  />  <Label htmlFor="airplane-mode">    Airplane Mode  </Label></div>

Installation

pnpm dlx shadcn@latest add @optics/switch

Props

Name	Type
variant	string(default: default)
inputRef	React.Ref<HTMLInputElement>
onCheckedChange	(...args) => void
uncheckedValue	string
nativeButton	boolean
render	React.ReactElement

Star Rating Table

Switch

Show Code

Installation

Props