{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"checkbox","type":"registry:ui","title":"Checkbox","description":"A native checkbox with a clear checked, unchecked and indeterminate state.","dependencies":[],"registryDependencies":["https://caliperui.site/r/styles.json"],"files":[{"path":"ui/checkbox.tsx","type":"registry:ui","target":"components/ui/checkbox.tsx","content":"\"use client\";\n\nimport {\n useImperativeHandle,\n useLayoutEffect,\n useRef,\n type ComponentProps,\n} from \"react\";\nimport \"./checkbox.css\";\n\nexport type CheckboxProps = Omit, \"type\"> & {\n indeterminate?: boolean;\n};\n\nexport function Checkbox({\n ref,\n indeterminate = false,\n ...props\n}: CheckboxProps) {\n const input = useRef(null);\n useImperativeHandle(ref, () => input.current!, []);\n\n // Native activation clears mixed state. Derive this prop from the group's\n // selection; synchronize again whenever the caller renders that state.\n useLayoutEffect(() => {\n if (input.current) input.current.indeterminate = indeterminate;\n });\n\n return (\n \n \n \n \n \n \n \n \n \n );\n}\n"},{"path":"ui/checkbox.css","type":"registry:file","target":"components/ui/checkbox.css","content":"/* checkbox.tsx's styles; it imports this file. Edit freely. */\n@layer theme, base, components, utilities;\n\n@layer components {\n /* The native input fills the target; the smaller indicator is decorative. */\n [data-slot=\"checkbox-root\"] {\n position: relative;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n width: var(--control-height);\n height: var(--control-height);\n vertical-align: middle;\n }\n\n [data-slot=\"checkbox\"] {\n position: absolute;\n inset: 0;\n width: 100%;\n height: 100%;\n margin: 0;\n appearance: none;\n border: 0;\n background: transparent;\n outline: none;\n cursor: pointer;\n touch-action: manipulation;\n }\n\n /* Choice marks: one 18px recessed mark for checkbox and radio. Checked\n marks fill with ink; the check stroke draws itself and the radio dot\n settles in. The switch thumb stretches while pressed, then settles. */\n [data-slot=\"checkbox-indicator\"] {\n box-sizing: border-box;\n display: flex;\n align-items: center;\n justify-content: center;\n pointer-events: none;\n background: var(--field);\n box-shadow: var(--shadow-field);\n transition:\n background-color var(--duration-fast) var(--ease-out),\n box-shadow var(--duration-fast) var(--ease-out);\n }\n\n [data-slot=\"checkbox-indicator\"] {\n width: 18px;\n height: 18px;\n }\n\n [data-slot=\"checkbox-indicator\"] {\n border-radius: var(--radius-mark);\n color: var(--accent-foreground);\n }\n [data-slot=\"checkbox-indicator\"] svg {\n width: 12px;\n height: 12px;\n stroke: currentColor;\n stroke-width: 2;\n stroke-linecap: round;\n stroke-linejoin: round;\n }\n [data-slot=\"checkbox-indicator\"] path {\n stroke-dasharray: 20;\n stroke-dashoffset: 20;\n transition: stroke-dashoffset 200ms var(--ease-out);\n }\n [data-slot=\"checkbox\"]:checked:not(:indeterminate) + [data-slot=\"checkbox-indicator\"] [data-mark=\"check\"],\n [data-slot=\"checkbox\"]:indeterminate + [data-slot=\"checkbox-indicator\"] [data-mark=\"mixed\"] {\n stroke-dashoffset: 0;\n }\n\n [data-slot=\"checkbox\"]:checked + [data-slot=\"checkbox-indicator\"],\n [data-slot=\"checkbox\"]:indeterminate + [data-slot=\"checkbox-indicator\"] {\n background: var(--accent);\n box-shadow: 0 0 0 1px var(--accent), inset 0 1px 0 rgb(255 255 255 / 14%);\n }\n\n @media (hover: hover) {\n [data-slot=\"checkbox\"]:hover:not(:disabled):not(:checked)\n + [data-slot=\"checkbox-indicator\"] {\n box-shadow: var(--shadow-field-hover);\n }\n }\n\n [data-slot=\"checkbox\"]:focus-visible + [data-slot=\"checkbox-indicator\"] {\n outline: 2px solid var(--ring);\n outline-offset: 2px;\n }\n\n [data-slot=\"checkbox\"][aria-invalid=\"true\"]\n + [data-slot=\"checkbox-indicator\"] {\n box-shadow: var(--shadow-field-invalid);\n outline-color: var(--destructive);\n }\n\n [data-slot=\"checkbox\"]:disabled {\n cursor: not-allowed;\n }\n [data-slot=\"checkbox\"]:disabled + [data-slot=\"checkbox-indicator\"] {\n background: var(--sunken);\n box-shadow: var(--shadow-field-quiet);\n color: var(--muted-foreground);\n }\n [data-slot=\"checkbox\"]:disabled:is(:checked, :indeterminate) + [data-slot=\"checkbox-indicator\"] {\n background: var(--border);\n box-shadow: none;\n }\n\n @media (forced-colors: active) {\n [data-slot=\"checkbox-indicator\"] {\n forced-color-adjust: none;\n background: Canvas;\n border-color: CanvasText;\n }\n [data-slot=\"checkbox\"]:checked + [data-slot=\"checkbox-indicator\"],\n [data-slot=\"checkbox\"]:indeterminate + [data-slot=\"checkbox-indicator\"] {\n background: Highlight;\n border-color: Highlight;\n }\n [data-slot=\"checkbox\"]:is(:checked, :indeterminate) + [data-slot=\"checkbox-indicator\"] {\n color: HighlightText;\n }\n [data-slot=\"checkbox-indicator\"] {\n border: 1px solid CanvasText;\n box-shadow: none;\n }\n [data-slot=\"checkbox\"]:hover:not(:disabled)\n + [data-slot=\"checkbox-indicator\"] {\n border-color: CanvasText;\n }\n [data-slot=\"checkbox\"]:focus-visible + [data-slot=\"checkbox-indicator\"] {\n outline-color: Highlight;\n }\n }\n\n @media (prefers-reduced-motion: reduce) {\n [data-slot=\"checkbox-indicator\"],\n [data-slot=\"checkbox-indicator\"] path {\n transition: none;\n }\n }\n}\n"}],"categories":["inputs"],"meta":{"tier":"free","license":"MIT","family":"inputs","docs":"/docs/components/checkbox"}}