Yami

Switch

A control that toggles between checked and not checked.

Installation

Add the switch component with the shadcn CLI.

npx shadcn@latest add https://yami.ui.unsanity.ai/r/switch.json

Usage

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

<div className="flex items-center gap-2">
  <Switch id="airplane" defaultChecked />
  <Label htmlFor="airplane">Airplane mode</Label>
</div>

Examples

Default

Code

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

<div className="flex items-center gap-2">
  <Switch id="airplane" defaultChecked />
  <Label htmlFor="airplane">Airplane mode</Label>
</div>