Material 3 Checkbox

Forms

About

A native checkbox input styled with Material 3 Expressive's container, outline, checkmark and state-layer motion, supporting controlled/uncontrolled and indeterminate states.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Material 3 Checkbox to your project and fits it to your theme.

Code

How Material 3 Checkbox is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { Checkbox } from "@/components/ui/checkbox";
import { useState } from "react";

const initialItems = [
  { id: "item-1", label: "Notify on comments", selected: true },
  { id: "item-2", label: "Notify on mentions", selected: false },
  { id: "item-3", label: "Notify on new followers", selected: false },
];

export default function CheckboxIndeterminateDemo() {
  const [items, setItems] = useState(initialItems);

  const allChecked = items.every((item) => item.selected);
  const someChecked = items.some((item) => item.selected);

  const selectAll = (checked: boolean) => {
    setItems((current) =>
      current.map((item) => ({ ...item, selected: checked })),
    );
  };

  const toggleItem = (id: string, checked: boolean) => {
    setItems((current) =>
      current.map((item) =>
        item.id === id ? { ...item, selected: checked } : item,
      ),
    );
  };

  return (
    <div className="flex min-h-[240px] w-full items-center justify-center bg-[var(--background)] text-[var(--foreground)]">
      <div className="flex flex-col gap-3">
        <label className="flex items-center gap-3 text-base font-medium">
          <Checkbox
            aria-label="Select all"
            checked={allChecked}
            indeterminate={!allChecked && someChecked}
            onCheckedChange={selectAll}
          />
          Select all
        </label>
        <div className="ml-6 flex flex-col gap-2">
          {items.map((item) => (
            <label key={item.id} className="flex items-center gap-3 text-sm">
              <Checkbox
                checked={item.selected}
                onCheckedChange={(checked) => toggleItem(item.id, checked)}
              />
              {item.label}
            </label>
          ))}
        </div>
      </div>
    </div>
  );
}