Boolean Checkbox state with Minecraft artwork.
Preview
Example source could not be loaded: checkbox-example. Reload this page to retry.Usage
Import Checkbox from @/components/ui/checkbox. Use checked and onCheckedChange(next, details) for controlled state, or defaultChecked for an uncontrolled field. The primary example starts unchecked at scale 2.
Composition
Associate Checkbox with Label using id and htmlFor. Supply name and value when the checked value belongs in a native form. Use disabled to prevent activation; the playground also shows a checked disabled field.
API and accessibility
scale accepts 1, 2 or 3 and defaults to 2. The native sprites cover boolean states. Indeterminate semantics inherited from Base UI are a web behavior; they do not establish a native mixed-state appearance.
See the underlying API for shared semantics.
Disabled
Example source could not be loaded: checkbox-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.
import { Checkbox as CheckboxPrimitive } from "@base-ui/react/checkbox";
import * as React from "react";
import { minecraftClasses as cn, minecraftStyle } from "./minecraft-render";
import type { MinecraftProps } from "./minecraft-render";
import "./minecraft-checkbox.css";
import { playMinecraftClick } from "./minecraft-sound";
interface CheckboxPaintStyle extends React.CSSProperties {
"--mc-checkbox-checked": string;
"--mc-checkbox-checked-focused": string;