{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "checkbox", "type": "registry:ui", "title": "Checkbox", "description": "Native with shadcn polish — peer-checked SVG indicator, indeterminate support, htmx-ready.", "files": [ { "path": "registry/ui/checkbox.tsx", "type": "registry:ui", "target": "components/ui/checkbox.tsx", "content": "/** @jsxImportSource hono/jsx */\nimport { cn, type ClassValue } from \"@/registry/lib/cn\"\n\n// Native with shadcn polish. Source of truth:\n// repos/shadcn-ui/apps/v4/registry/new-york-v4/ui/checkbox.tsx\n//\n// The upstream shadcn uses Radix Checkbox, which renders a styled div with\n// role=\"checkbox\" and hides the native input. We can't depend on Radix in\n// our SSR setup, so we keep a real (form-submittable,\n// keyboard-accessible, accessible-name aware) and layer a check icon on top.\n//\n// Pairing with a Label: use the htmlFor pattern — clicking the label toggles\n// the checkbox. Indeterminate state must be set via JS (the HTML attribute\n// alone won't do it); we mirror the data-state attribute on the wrapper so\n// custom styling can react.\n\nconst inputBase =\n \"peer size-4 shrink-0 appearance-none rounded-[4px] border border-input bg-background shadow-xs transition-shadow outline-none \" +\n \"focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 \" +\n \"disabled:cursor-not-allowed disabled:opacity-50 \" +\n \"checked:border-primary checked:bg-primary \" +\n \"indeterminate:border-primary indeterminate:bg-primary \" +\n \"aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 \" +\n \"dark:bg-input/30\"\n\nexport function checkboxClasses(opts?: { class?: ClassValue }): string {\n return cn(inputBase, opts?.class)\n}\n\ntype CheckboxProps = {\n id?: string\n name?: string\n value?: string\n checked?: boolean\n defaultChecked?: boolean\n // Render the SSR hook for an initially-indeterminate checkbox. `indeterminate`\n // is an IDL-only property with no HTML content attribute (WHATWG HTML: it is\n // initially false and \"cannot be set using an HTML attribute\"), so an SSR\n // component emits data-initial-indeterminate=\"true\" and a tiny on-mount\n // script flips el.indeterminate. See repos/whatwg-html/source (indeterminate\n // IDL attribute) and the input/checkbox MDN reference.\n indeterminate?: boolean\n required?: boolean\n disabled?: boolean\n readonly?: boolean\n form?: string\n class?: ClassValue\n ariaLabel?: string\n ariaLabelledby?: string\n ariaDescribedby?: string\n ariaInvalid?: boolean\n // ID of a visible element containing an error message. Pair with\n // ariaInvalid for the full WCAG error-identification pattern.\n // See repos/mdn/files/en-us/web/accessibility/aria/reference/attributes/aria-errormessage/index.md\n ariaErrormessage?: string\n // ARIA flag for non-editable checkboxes. Unlike HTML readonly (not valid\n // on checkbox), aria-readonly keeps the element focusable + announces it\n // as read-only. Use when you want the user to land on the box and hear\n // *why* it's locked. See repos/mdn/files/en-us/web/accessibility/aria/reference/attributes/aria-readonly/index.md\n ariaReadonly?: boolean\n // Tri-state semantic. The DOM property `indeterminate` controls the\n // visual ::indeterminate pseudo (we set it from JS in docs); this prop\n // surfaces the same to assistive tech via aria-checked=\"mixed\".\n // See repos/mdn/files/en-us/web/accessibility/aria/reference/roles/checkbox_role/index.md:30,66-67\n ariaChecked?: boolean | \"mixed\"\n // If this checkbox toggles visibility/state of other UI, point at the\n // controlled element's id.\n ariaControls?: string\n\n // htmx — fire on the input's change event. Useful for \"save on toggle\"\n // patterns where the server records the new state and may return updated\n // UI (e.g. a row swap).\n \"hx-get\"?: string\n \"hx-post\"?: string\n \"hx-put\"?: string\n \"hx-patch\"?: string\n \"hx-target\"?: string\n \"hx-swap\"?: string\n \"hx-trigger\"?: string\n \"hx-vals\"?: string\n \"hx-include\"?: string\n}\n\nexport function Checkbox(props: CheckboxProps) {\n const {\n class: className,\n ariaLabel,\n ariaLabelledby,\n ariaDescribedby,\n ariaInvalid,\n ariaErrormessage,\n ariaReadonly,\n ariaChecked,\n ariaControls,\n checked,\n defaultChecked,\n indeterminate,\n ...rest\n } = props\n\n return (\n \n checked like React. Resolve it\n // here so the prop is real: explicit `checked` wins, then `defaultChecked`,\n // and `false` serializes to no attribute (never an invalid defaultChecked=\"...\").\n checked={(checked ?? defaultChecked) || undefined}\n // indeterminate has no HTML content attribute; emit the on-mount hook\n // a script reads to set el.indeterminate. See repos/whatwg-html/source.\n data-initial-indeterminate={indeterminate ? \"true\" : undefined}\n {...rest}\n />\n {/* Check icon — visible only when peer (the input) is :checked. */}\n \n )\n}\n" }, { "path": "registry/jinja2/checkbox.html", "type": "registry:file", "target": "templates/components/checkbox.html", "content": "{# Checkbox macro — shadcn-htmx, htmx v4 + Tailwind v4.\n Mirrors registry/ui/checkbox.tsx. The macro renders a native\n wrapped in a span so a check/dash SVG can layer\n on top via Tailwind's peer-checked / peer-indeterminate variants.\n\n Usage:\n {% from \"components/checkbox.html\" import checkbox %}\n #}\n\n{% macro checkbox(\n id=none,\n name=none,\n value=none,\n checked=false,\n indeterminate=false,\n required=false,\n disabled=false,\n readonly=false,\n form=none,\n aria_label=none,\n aria_labelledby=none,\n aria_describedby=none,\n aria_invalid=none,\n extra_class=\"\",\n **attrs\n) %}\n{%- set base -%}\npeer size-4 shrink-0 appearance-none rounded-[4px] border border-input bg-background shadow-xs transition-shadow outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 checked:border-primary checked:bg-primary indeterminate:border-primary indeterminate:bg-primary aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 dark:bg-input/30\n{%- endset -%}\n\n \n \n \n\n{% endmacro %}\n" }, { "path": "registry/go-templates/checkbox.tmpl", "type": "registry:file", "target": "components/checkbox.tmpl", "content": "{{/*\n Checkbox template — shadcn-htmx, htmx v4 + Tailwind v4.\n Mirrors registry/ui/checkbox.tsx.\n\n Usage:\n\n type CheckboxArgs struct {\n ID, Name, Value string\n Checked, Indeterminate, Required, Disabled, Readonly bool\n Form, AriaLabel, AriaLabelledby, AriaDescribedby string\n AriaInvalid string // \"true\" | \"false\"\n Attrs map[string]string\n }\n\n tpl.ExecuteTemplate(w, \"checkbox\", CheckboxArgs{\n ID: \"terms\", Name: \"terms\", Required: true,\n })\n*/}}\n\n{{define \"checkbox\"}}\n{{- $base := \"peer size-4 shrink-0 appearance-none rounded-[4px] border border-input bg-background shadow-xs transition-shadow outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 checked:border-primary checked:bg-primary indeterminate:border-primary indeterminate:bg-primary aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 dark:bg-input/30\" -}}\n\n \n \n \n\n{{end}}\n" }, { "path": "registry/phoenix/checkbox.ex", "type": "registry:file", "target": "lib/my_app_web/components/checkbox.ex", "content": "defmodule ShadcnHtmx.Components.Checkbox do\n @moduledoc \"\"\"\n Checkbox — shadcn-htmx, htmx v4 + Tailwind v4 for Phoenix.\n\n Native `` styled with shadcn polish. Pair with the\n Label component for the click-target / accessible-name pattern.\n\n ## Examples\n\n \n\n <.checkbox name=\"newsletter\" checked\n hx-post=\"/preferences/newsletter\" hx-trigger=\"change\" />\n \"\"\"\n\n use Phoenix.Component\n\n @input_base \"peer size-4 shrink-0 appearance-none rounded-[4px] border border-input bg-background shadow-xs \" <>\n \"transition-shadow outline-none \" <>\n \"focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 \" <>\n \"disabled:cursor-not-allowed disabled:opacity-50 \" <>\n \"checked:border-primary checked:bg-primary \" <>\n \"indeterminate:border-primary indeterminate:bg-primary \" <>\n \"aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 \" <>\n \"dark:bg-input/30\"\n\n attr :class, :string, default: nil\n\n # `indeterminate` is an IDL-only property — no HTML content attribute exists\n # for it (WHATWG HTML: initially false, \"cannot be set using an HTML\n # attribute\"). Emit data-initial-indeterminate=\"true\" so an on-mount script\n # can set el.indeterminate. See repos/whatwg-html/source.\n attr :indeterminate, :boolean, default: false\n\n attr :rest, :global,\n include:\n ~w(hx-get hx-post hx-put hx-patch hx-target hx-swap hx-trigger hx-vals hx-include\n id name value checked required disabled readonly form\n aria-label aria-labelledby aria-describedby aria-invalid)\n\n def checkbox(assigns) do\n assigns = assign(assigns, :input_base, @input_base)\n\n ~H\"\"\"\n \n \n \n \"\"\"\n end\nend\n" }, { "path": "registry/html/checkbox.html", "type": "registry:file", "target": "snippets/checkbox.html", "content": "\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n" } ] }