Neumorphism UI

Checkbox

Use Checkbox for independent choices, consent, or selecting several items from a set.

Preview

Checked, mixed, and disabled

Compare a checked price-alert preference, a controlled indeterminate workspace option, and an unavailable option.

Installation

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

npx shadcn@latest add @neumorphism-ui/checkbox

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

Checked, mixed, and disabled

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

Usage

Connect the Checkbox id to a visible Label. Use defaultChecked for an initial choice, or checked and onCheckedChange when application state controls it.

"use client";

import { useId } from "react";
import { Checkbox } from "@/components/ui/checkbox";
import { Label } from "@/components/ui/label";

export default function Example() {
  const id = useId();
  return (
    <div className="flex items-center gap-2">
      <Checkbox id={id} name="updates" />
      <Label htmlFor={id}>Receive product updates</Label>
    </div>
  );
}

API Reference

Layers a neumorphic surface over a transparent native input to preserve form submission and browser accessibility. Supports controlled, uncontrolled, and indeterminate states with a shadcn-style onCheckedChange callback.

ComponentPropTypeDefaultDescription
Checkboxcheckedboolean | "indeterminate"—The controlled checked or mixed state.
CheckboxdefaultCheckedbooleanfalseThe initial checked state for uncontrolled usage.
CheckboxonCheckedChange(checked: boolean | "indeterminate") => void—Called when the checked state changes.
CheckboxdisabledbooleanfalseDisables input and pointer interaction.
Checkboxname / value / requirednative input props—Native checkbox attributes used for form submission.

Accessibility

  • 01

    A real input[type=checkbox] preserves form submission and keyboard interaction with Space.

  • 02

    Connect Label htmlFor to the Checkbox id, or place Checkbox inside a label.

  • 03

    In the indeterminate state, both aria-checked=mixed and the DOM indeterminate property are set.