Neumorphism UI

Switch

Use Switch for a setting that turns on or off, usually with an immediate effect.

Preview

Live, optional, and locked settings

Toggle controlled live prices, try an email-alert setting, and compare a disabled administrator policy.

Installation

New to this Registry? Complete the base setup before continuing.

npx shadcn@latest add @neumorphism-ui/switch

Install the shared base once, then add components and their dependencies with the CLI.

Live, optional, and locked settings

npx shadcn@latest add @neumorphism-ui/label @neumorphism-ui/switch
Registry JSON

Usage

Connect a visible Label to the switch id. Set defaultChecked for an initial value or connect checked and onCheckedChange to the setting your application owns.

"use client";

import { useId } from "react";
import { Label } from "@/components/ui/label";
import { Switch } from "@/components/ui/switch";

export default function Example() {
  const id = useId();
  return (
    <div className="flex items-center gap-3">
      <Switch id={id} name="notifications" defaultChecked />
      <Label htmlFor={id}>Email notifications</Label>
    </div>
  );
}

API Reference

Applies role=switch to a native checkbox input to preserve form and browser behavior. Supports checked, defaultChecked, and onCheckedChange.

ComponentPropTypeDefaultDescription
Switchchecked / defaultCheckedboolean—The controlled on state or initial uncontrolled state.
SwitchonCheckedChange(checked: boolean) => void—Called when the on state changes.
SwitchonChangeReact.ChangeEventHandler<HTMLInputElement>—Receives the native checkbox change event.
SwitchdisabledbooleanfalseDisables input and pointer interaction.
Switchname / value / requirednative input props—Native checkbox attributes used for form submission.

Accessibility

  • 01

    Applying role=switch to a real checkbox communicates the checked state to assistive technology and preserves Space key interaction.

  • 02

    Connect Label htmlFor to the Switch id, or provide an aria-label.

  • 03

    Checkbox may be more appropriate for a boolean choice that is not applied immediately and requires a separate save action.