Switch

A control that toggles between checked and not checked.

Airplane mode

Installation

Add the switch component with the shadcn CLI.

bash

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

Usage

tsx

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

Examples

Default

Airplane mode

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>