Checkbox · group · select all
Real checkboxes with an animated tick — indeterminate states, groups with select-all and Shift-click ranges, limits, tiles and validation messages.
Single · indeterminate · sizes · tones · states
Group · select all · Shift-click a range
Row · limit · cards
attachments: — · toppings: cheese · permissions: read, comment
Usage
import { signal } from "./index.js";import { Checkbox, CheckboxGroup } from "./components/checkbox.js"; const agree = signal(false);Checkbox({ value: agree, label: "Remember me", description: "On this device" })Checkbox({ value: signal(null), label: "Indeterminate" }) // null = —Checkbox({ value: terms, label: "I accept the terms", error: () => !terms() && "Required" }) // a group: its value is an array; select all (with its own — state), Shift-click rangesconst files = signal([]);CheckboxGroup({ value: files, label: "Attachments", options: names, selectAll: true }) // a limit, a row, tilesCheckboxGroup({ value: toppings, max: 3, direction: "row", options })CheckboxGroup({ value: perms, variant: "card", options: [{ value: "read", label: "Read", description: "…" }] })// size "sm" · "lg", tone "success" · "danger" · "warning", disabled, readOnly, name (forms)