An ON/OFF cycle button with accessible switch state.
Preview
Example source could not be loaded: switch-example. Reload this page to retry.Usage
Import Switch from @/components/ui/switch. Use checked/onCheckedChange(next, details) or defaultChecked. The example starts OFF and toggles clouds through an associated label.
Composition
Supply an external Label using id/htmlFor, or an accessible name directly. The painted ON/OFF words are hidden from accessibility APIs and do not replace that name. disabled prevents pointer and keyboard activation.
API and accessibility
Only size="default" is supported; another size throws. Scale defaults to 2. This is web switch semantics on the native CycleButton appearance, without a sliding-thumb variant. The playground demonstrates controlled and locked settings.
See the underlying API for shared semantics.
Locked setting
Example source could not be loaded: switch-disabled-example. Reload this page to retry.Installation
Component source
This is the component implementation. Its supporting styles, helpers and resources are also required. See complete manual installation.
"use client";
import { Switch as SwitchPrimitive } from "@base-ui/react/switch";
import * as React from "react";
import { minecraftClasses as cn, minecraftStyle } from "./minecraft-render";
import type { MinecraftProps } from "./minecraft-render";
import { playMinecraftClick } from "./minecraft-sound";
import { MinecraftText } from "./minecraft-text";
import "./minecraft-button.css";
import "./minecraft-switch.css";