A native checkbox input styled with Material 3 Expressive's container, outline, checkmark and state-layer motion, supporting controlled/uncontrolled and indeterminate states.
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>
);
}
