Checkbox

1/** @jsxImportSource hono/jsx */
2import { cn, type ClassValue } from "@/registry/lib/cn"
3 
4// Native <input type="checkbox"> with shadcn polish. Source of truth:
5//   repos/shadcn-ui/apps/v4/registry/new-york-v4/ui/checkbox.tsx
6//
7// The upstream shadcn uses Radix Checkbox, which renders a styled div with
8// role="checkbox" and hides the native input. We can't depend on Radix in
9// our SSR setup, so we keep a real <input type="checkbox"> (form-submittable,
10// keyboard-accessible, accessible-name aware) and layer a check icon on top.
11//
12// Pairing with a Label: use the htmlFor pattern — clicking the label toggles
13// the checkbox. Indeterminate state must be set via JS (the HTML attribute
14// alone won't do it); we mirror the data-state attribute on the wrapper so
15// custom styling can react.
16 
17const inputBase =
18  "peer size-4 shrink-0 appearance-none rounded-[4px] border border-input bg-background shadow-xs transition-shadow outline-none " +
19  "focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 " +
20  "disabled:cursor-not-allowed disabled:opacity-50 " +
21  "checked:border-primary checked:bg-primary " +
22  "indeterminate:border-primary indeterminate:bg-primary " +
23  "aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 " +
24  "dark:bg-input/30"
25 
26export function checkboxClasses(opts?: { class?: ClassValue }): string {
27  return cn(inputBase, opts?.class)
28}
29 
30type CheckboxProps = {
31  id?: string
32  name?: string
33  value?: string
34  checked?: boolean
35  defaultChecked?: boolean
36  // Render the SSR hook for an initially-indeterminate checkbox. `indeterminate`
37  // is an IDL-only property with no HTML content attribute (WHATWG HTML: it is
38  // initially false and "cannot be set using an HTML attribute"), so an SSR
39  // component emits data-initial-indeterminate="true" and a tiny on-mount
40  // script flips el.indeterminate. See repos/whatwg-html/source (indeterminate
41  // IDL attribute) and the input/checkbox MDN reference.
42  indeterminate?: boolean
43  required?: boolean
44  disabled?: boolean
45  readonly?: boolean
46  form?: string
47  class?: ClassValue
48  ariaLabel?: string
49  ariaLabelledby?: string
50  ariaDescribedby?: string
51  ariaInvalid?: boolean
52  // ID of a visible element containing an error message. Pair with
53  // ariaInvalid for the full WCAG error-identification pattern.
54  // See repos/mdn/files/en-us/web/accessibility/aria/reference/attributes/aria-errormessage/index.md
55// … truncated