Baby Baltazar

Switch

A control that allows the user to toggle between two states.

Installation

Install this component via the shadcn CLI.

npx shadcn@latest add https://baby-baltazar-xi.vercel.app/r/switch.json

Or install the theme first: npx shadcn@latest add https://baby-baltazar-xi.vercel.app/r/sthlm-theme.json

Preview

Interactive component demo.

States

Settings Example

Usage

How to use this component in your code.

{/* States */}
<Switch />                          {/* Off */}
<Switch defaultChecked />           {/* On */}
<Switch disabled />                 {/* Disabled */}
<Switch disabled defaultChecked />  {/* Disabled + On */}

{/* With Label */}
<div className="flex items-center space-x-2">
  <Switch id="mode" />
  <Label htmlFor="mode">Toggle</Label>
</div>