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

import Switch from "@/components/ui/switch/Switch.astro";
import Label from "@/components/ui/label/Label.astro";

Usage

import { Switch } from "@/components/ui/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