Switch

Airplane Mode

<div class="flex items-center gap-2">
  <Switch id="airplane-mode" />
  <Label for="airplane-mode">Airplane Mode</Label>
</div>

Installation

npx bearnie add switch

Usage

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

<Switch id="mode" />

Examples

Checked

Enable notifications

<div class="flex items-center gap-2">
  <Switch id="notifications" checked />
  <Label for="notifications">Enable notifications</Label>
</div>

Disabled

Disabled switch

<div class="flex items-center gap-2">
  <Switch id="disabled" disabled />
  <Label for="disabled" class="opacity-50">Disabled switch</Label>
</div>

With description

Marketing emails

Receive emails about new products and updates.

<div class="flex items-start gap-2">
  <Switch id="marketing" class="mt-1" />
  <div class="grid gap-1">
    <Label for="marketing">Marketing emails</Label>
    <p class="text-sm text-muted-foreground">Receive emails about new products and updates.</p>
  </div>
</div>

Anatomy

Switch - A single toggle element

Props

Prop	Type	Default	Description
id	string	-	Element ID for label association
name	string	-	Form field name
checked	boolean	false	Default checked state
disabled	boolean	false	Disables the switch
class	string	-	Additional CSS classes