Component · <input type="checkbox" role="switch">

Switch

An on/off toggle. A native checkbox with role switch.

NotificationsDark wallpaper

Install

npx @lazizbekio/mitame add switch

Usage

import { Switch } from "@/components/mitame/ui/switch";

export default function SwitchDemo() {
  return (
    <div className="flex flex-col gap-3">
      <Switch defaultChecked>Notifications</Switch>
      <Switch>Dark wallpaper</Switch>
    </div>
  );
}

Props

Prop	Type	Default	Description
`children`	`ReactNode`	—	The label.
`...props`	`InputHTMLAttributes`	—	checked, defaultChecked, onChange, name, disabled…

Keyboard

Key	Does
`Space`	Toggle

Styling

Every part has a data-slot starting with switch, and state lives in data-state,data-variant and friends. Pass any class to override; theme styles sit in a lower CSS layer, so yours win. See Theming.