Switch - neobrutal-ui

Use Switch for an on/off setting. Use Checkbox for an explicit choice or agreement submitted with a form. Decide whether changing the switch saves immediately or remains a draft.

Loading preview...

"use client";

import { useState } from "react";

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

export default function SwitchDemo() {
  const [enabled, setEnabled] = useState(true);

  return (
    <div className="w-full max-w-sm rounded-base border-2 border-border bg-secondary-background p-4 shadow-shadow">
      <div className="flex items-start justify-between gap-4">
        <div>
          <label htmlFor="auto-publish" className="text-sm font-heading leading-none select-none">
            Auto-publish documentation
          </label>
          <p className="mt-1 text-sm leading-5 text-foreground/75">
            Deploy the docs site after the registry checks pass.
          </p>
        </div>
        <Switch id="auto-publish" checked={enabled} onCheckedChange={setEnabled} />
      </div>
      <output className="mt-4 block border-t-2 border-border pt-3 text-sm">
        Preview setting: <strong>{enabled ? "enabled" : "disabled"}</strong>
      </output>
    </div>
  );
}

#Installation

Complete the base setup. For manual installation:

First time? Install the shared base once.

npx shadcn@latest add https://neobrutal-ui.andongmin.com/r/switch.json

npm install @base-ui/react@^1.8.0

Create components/ui/switch.tsx:

"use client";

import { Switch as SwitchPrimitive } from "@base-ui/react/switch";

import { cn } from "@/lib/utils";

type SwitchProps = SwitchPrimitive.Root.Props & {
  size?: "sm" | "default";
};

function Switch({ className, nativeButton, render, size = "default", ...props }: SwitchProps) {
  const usesDefaultButton = render === undefined;

  return (
    <SwitchPrimitive.Root
      data-slot="switch"
      data-size={size}
      nativeButton={nativeButton ?? usesDefaultButton}
      render={render ?? <button type="button" />}
      {...props}
      className={(state) =>
        cn(
          "peer group/switch relative inline-flex shrink-0 cursor-pointer items-center rounded-full border-2 border-border bg-secondary-background transition-colors outline-none focus-visible:ring-1 focus-visible:ring-ring data-[size=default]:h-6 data-[size=default]:w-12 data-[size=sm]:h-5 data-[size=sm]:w-10 data-checked:bg-main data-unchecked:bg-secondary-background data-disabled:cursor-not-allowed data-disabled:opacity-50",
          typeof className === "function" ? className(state) : className,
        )
      }
    >
      <SwitchPrimitive.Thumb
        data-slot="switch-thumb"
        className="pointer-events-none block rounded-full border-2 border-border bg-white ring-0 transition-transform group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 group-data-[size=default]/switch:data-checked:translate-x-6 group-data-[size=sm]/switch:data-checked:translate-x-5 data-unchecked:translate-x-1 rtl:group-data-[size=default]/switch:data-checked:-translate-x-6 rtl:group-data-[size=sm]/switch:data-checked:-translate-x-5 rtl:data-unchecked:-translate-x-1"
      />
    </SwitchPrimitive.Root>
  );
}

export { Switch };

#Usage

"use client";
import { useState } from "react";
import { Switch } from "@/components/ui/switch";

export default function NotificationSetting() {
  const [enabled, setEnabled] = useState(false);
  return (
    <div className="grid gap-3">
      <div className="flex items-center gap-3">
        <Switch id="notifications" checked={enabled} onCheckedChange={setEnabled} />
        <label htmlFor="notifications">Email notifications</label>
      </div>
      <p role="status">Preview setting: {enabled ? "on" : "off"}.</p>
    </div>
  );
}

#API reference

Prop	Purpose	Default
`checked` / `onCheckedChange`	Controlled boolean state	Uncontrolled
`defaultChecked`	Initial state	`false`
`size`	`default` or `sm`	`default`
`name` / `value`	Form key and checked value	Native behavior
`disabled` / `required`	Interaction and form constraints	`false`
`id`	Visible label target	Generated if omitted

#Accessibility

Use a stable label describing the setting, not changing action text such as Enable/Disable. Do not rely only on color to show state. Show pending or error state for server updates and never imply an unsaved change has been persisted.