Switch

FREE

Toggle switch in two sizes with optional icons inside the thumb.

Playground

Change the props and watch the component and its code update live.

Dark mode

Props

Label

Size

On icon

Off icon

Primary color

Disabled

Code

import { Moon, Sun } from "lucide-react";
import { Label } from "@/components/ui/field";
import { Switch } from "@/components/ui/switch";

<Switch
  id="switch"
  checkedIcon={<Moon />}
  uncheckedIcon={<Sun />}
/>
<Label htmlFor="switch">Dark mode</Label>

Installation

Terminal

npx @bloxa/cli add switch
# or: npx shadcn@latest add @bloxa/switch

Packages installed automatically: radix-ui

Examples

Sizes

Notifications

Compact mode (small)

With icons

Dark mode

API reference

Every component also accepts the props of the element it renders.

Switch

Prop	Type	Default	Description
size	"sm" \| "md"	"md"	Size.
checkedIcon	ReactNode	—	Thumb icon while on.
uncheckedIcon	ReactNode	—	Thumb icon while off.