Switch

Toggle switch via Radix UI

Default

Usage

import { Switch } from '@tryvienna/ui'

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

Examples

Default

Default

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

Checked

Checked

<div className="flex items-center gap-2">
  <Switch id="checked-switch" defaultChecked />
  <Label htmlFor="checked-switch">Enabled by default</Label>
</div>

Disabled

Disabled

<div className="grid gap-4">
  <div className="flex items-center gap-2">
    <Switch id="disabled-off" disabled />
    <Label htmlFor="disabled-off">Disabled (off)</Label>
  </div>
  <div className="flex items-center gap-2">
    <Switch id="disabled-on" disabled defaultChecked />
    <Label htmlFor="disabled-on">Disabled (on)</Label>
  </div>
</div>

Settings Group

Settings Group

<div className="grid gap-6 w-80">
  <div className="flex items-center justify-between">
    <div className="grid gap-1">
      <Label htmlFor="notifications">Notifications</Label>
      <p className="text-muted-foreground text-sm">Receive push notifications</p>
    </div>
    <Switch id="notifications" defaultChecked />
  </div>
  <div className="flex items-center justify-between">
    <div className="grid gap-1">
      <Label htmlFor="sounds">Sound effects</Label>
      <p className="text-muted-foreground text-sm">Play sounds for actions</p>
    </div>
    <Switch id="sounds" />
  </div>
  <div className="flex items-center justify-between">
    <div className="grid gap-1">
      <Label htmlFor="dark-mode">Dark mode</Label>
      <p className="text-muted-foreground text-sm">Use dark color theme</p>
    </div>
    <Switch id="dark-mode" defaultChecked />
  </div>
</div>

API Reference

Switch

Also accepts all props from SwitchPrimitive.Root.

Data Attributes

Component	data-slot
Switch	"switch"