Switch

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

Notifications

Installation

Import from the package. Do not run shadcn add in your app.

import { Switch } from "@carsxe/design-system/components/switch"

Usage

import { Switch } from "@carsxe/design-system/components/switch"
import { Label } from "@carsxe/design-system/components/label"

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

Small

Compact

Disabled

Unavailable

API Reference

Prop	Type	Default
size	"default" \| "sm"	"default"
defaultChecked	boolean	—
disabled	boolean	—