{ "name": "checkbox", "title": { "es": "Checkbox", "en": "Checkbox" }, "summary": { "es": "Casillas con el diseño de coss ui sobre un checkbox nativo. Incluye «Todo» con estado intermedio.", "en": "coss ui checkboxes over a native checkbox. Includes “All” with a mixed state." }, "category": "forms", "status": "stable", "nivel": "primitivos", "updated": "2026-09-29", "license": "MIT", "page": "https://componentes-lovat.vercel.app/c/checkbox/", "requires": [], "files": [ { "type": "html", "url": "https://componentes-lovat.vercel.app/raw/checkbox/checkbox.html", "content": "
\n Exportar\n \n
\n \n \n \n
\n
\n\n\n" }, { "type": "css", "url": "https://componentes-lovat.vercel.app/raw/checkbox/checkbox.css", "content": "/* checkbox · Componentes (MIRÓ Labs). Diseño de coss ui (MIT, © coss.com, antes Origin UI).\n Generado por tools/build_css.py desde checkbox.tw.json. No editar a mano. Necesita tokens.css. */\n.c-checkbox__indicator{position:absolute}\n.c-checkbox{position:relative}\n.c-checkbox__indicator{inset:-1px}\n.c-checkbox-group__legend{margin-bottom:calc(var(--spacing)*1)}\n.c-checkbox__indicator{display:flex}\n.c-checkbox-group{display:flex}\n.c-checkbox{display:inline-flex}\n.c-label{display:inline-flex}\n.c-checkbox svg{width:calc(var(--spacing)*3.5);height:calc(var(--spacing)*3.5)}\n.c-checkbox{width:calc(var(--spacing)*4.5);height:calc(var(--spacing)*4.5);flex-shrink:0}\n.c-checkbox-group{flex-direction:column}\n.c-checkbox{align-items:center}\n.c-checkbox__indicator{align-items:center}\n.c-label{align-items:center}\n.c-checkbox{justify-content:center}\n.c-checkbox__indicator{justify-content:center}\n.c-label{gap:calc(var(--spacing)*2)}\n.c-checkbox-group{gap:calc(var(--spacing)*3)}\n.c-checkbox{border-radius:.25rem}\n.c-checkbox__indicator{border-radius:.25rem}\n.c-checkbox{border-style:var(--tw-border-style);border-width:1px;border-color:var(--input);background-color:var(--background)}\n.c-label{font-size:var(--text-base);line-height:calc(var(--spacing)*4.5)}\n.c-checkbox-group__legend{font-size:var(--text-base);line-height:calc(var(--spacing)*4.5)}\n.c-label__description{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}\n.c-label{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}\n.c-checkbox-group__legend{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}\n.c-label__description{--tw-font-weight:var(--font-weight-normal);font-weight:var(--font-weight-normal)}\n.c-label{color:var(--foreground)}\n.c-checkbox-group__legend{color:var(--foreground)}\n.c-label__description{color:var(--muted-foreground)}\n.c-checkbox__indicator{color:var(--primary-foreground)}\n.c-checkbox{--tw-shadow-alpha:5%;--tw-shadow:0 1px 2px 0 var(--tw-shadow-color,#0000000d);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}\n@supports (color:lab(0% 0 0)){\n.c-checkbox{--tw-shadow:0 1px 2px 0 var(--tw-shadow-color,lab(0% 0 0/.05))}\n}\n.c-checkbox{--tw-ring-color:var(--ring);transition-property:box-shadow;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration));--tw-outline-style:none;outline-style:none}\n.c-checkbox:not(:is(.dark *)){background-clip:padding-box}\n.c-checkbox:before{content:var(--tw-content);pointer-events:none;content:var(--tw-content);position:absolute;content:var(--tw-content);inset:calc(var(--spacing)*0);content:var(--tw-content);border-radius:3px}\n.c-checkbox:not(:has(>.c-checkbox__input:disabled)):not(:has(>.c-checkbox__input:is(:checked,:indeterminate))):not([aria-invalid=true]):before{content:var(--tw-content);--tw-shadow:0 1px var(--tw-shadow-color,#0000000a)}\n@supports (color:color-mix(in lab, red, red)){\n.c-checkbox:not(:has(>.c-checkbox__input:disabled)):not(:has(>.c-checkbox__input:is(:checked,:indeterminate))):not([aria-invalid=true]):before{--tw-shadow:0 1px var(--tw-shadow-color,color-mix(in oklab,var(--color-black)4%,transparent))}\n}\n.c-checkbox:not(:has(>.c-checkbox__input:disabled)):not(:has(>.c-checkbox__input:is(:checked,:indeterminate))):not([aria-invalid=true]):before{box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}\n.c-checkbox:has(>.c-checkbox__input:focus-visible){--tw-ring-shadow:var(--tw-ring-inset,)0 0 0 calc(2px + var(--tw-ring-offset-width))var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);--tw-ring-offset-width:1px;--tw-ring-offset-shadow:var(--tw-ring-inset,)0 0 0 var(--tw-ring-offset-width)var(--tw-ring-offset-color);--tw-ring-offset-color:var(--background)}\n.c-checkbox[aria-invalid=true]{border-color:var(--destructive)}\n@supports (color:color-mix(in lab, red, red)){\n.c-checkbox[aria-invalid=true]{border-color:color-mix(in oklab,var(--destructive)36%,transparent)}\n}\n.c-checkbox:has(>.c-checkbox__input:focus-visible)[aria-invalid=true]{border-color:var(--destructive)}\n@supports (color:color-mix(in lab, red, red)){\n.c-checkbox:has(>.c-checkbox__input:focus-visible)[aria-invalid=true]{border-color:color-mix(in oklab,var(--destructive)64%,transparent)}\n}\n.c-checkbox:has(>.c-checkbox__input:focus-visible)[aria-invalid=true]{--tw-ring-color:var(--destructive)}\n@supports (color:color-mix(in lab, red, red)){\n.c-checkbox:has(>.c-checkbox__input:focus-visible)[aria-invalid=true]{--tw-ring-color:color-mix(in oklab,var(--destructive)48%,transparent)}\n}\n.c-checkbox__input:checked~.c-checkbox__indicator{background-color:var(--primary)}\n.c-checkbox:has(>.c-checkbox__input:disabled){cursor:not-allowed;opacity:.64}\n.c-checkbox__input:indeterminate~.c-checkbox__indicator{color:var(--foreground)}\n.c-checkbox__input:not(:checked,:indeterminate)~.c-checkbox__indicator{display:none}\n@media (min-width:40rem){\n.c-checkbox svg{width:calc(var(--spacing)*3);height:calc(var(--spacing)*3)}\n.c-checkbox{width:calc(var(--spacing)*4);height:calc(var(--spacing)*4)}\n.c-label{font-size:var(--text-sm);line-height:calc(var(--spacing)*4)}\n.c-checkbox-group__legend{font-size:var(--text-sm);line-height:calc(var(--spacing)*4)}\n}\n.c-checkbox:is(.dark *):not(:has(>.c-checkbox__input:is(:checked,:indeterminate))){background-color:var(--input)}\n@supports (color:color-mix(in lab, red, red)){\n.c-checkbox:is(.dark *):not(:has(>.c-checkbox__input:is(:checked,:indeterminate))){background-color:color-mix(in oklab,var(--input)32%,transparent)}\n}\n.c-checkbox:is(.dark *):not(:has(>.c-checkbox__input:disabled)):not(:has(>.c-checkbox__input:is(:checked,:indeterminate))):not([aria-invalid=true]):before{content:var(--tw-content);--tw-shadow:0 -1px var(--tw-shadow-color,#ffffff0f)}\n@supports (color:color-mix(in lab, red, red)){\n.c-checkbox:is(.dark *):not(:has(>.c-checkbox__input:disabled)):not(:has(>.c-checkbox__input:is(:checked,:indeterminate))):not([aria-invalid=true]):before{--tw-shadow:0 -1px var(--tw-shadow-color,color-mix(in oklab,var(--color-white)6%,transparent))}\n}\n.c-checkbox:is(.dark *):not(:has(>.c-checkbox__input:disabled)):not(:has(>.c-checkbox__input:is(:checked,:indeterminate))):not([aria-invalid=true]):before{box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}\n.c-checkbox:is(.dark *)[aria-invalid=true]{--tw-ring-color:var(--destructive)}\n@supports (color:color-mix(in lab, red, red)){\n.c-checkbox:is(.dark *)[aria-invalid=true]{--tw-ring-color:color-mix(in oklab,var(--destructive)24%,transparent)}\n}\n.c-checkbox:is(:has(>.c-checkbox__input:disabled),:has(>.c-checkbox__input:is(:checked,:indeterminate)),:has(>.c-checkbox__input[aria-invalid=true])){--tw-shadow:0 0 #0000;box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}\n/* propio */\n.c-checkbox__input{position:absolute;inset:-1px;z-index:1;margin:0;opacity:0;cursor:pointer;appearance:none}\n.c-checkbox__input:disabled{cursor:not-allowed}\n.c-checkbox .c-checkbox__dash{display:none}\n.c-checkbox__input:indeterminate~.c-checkbox__indicator .c-checkbox__check{display:none}\n.c-checkbox__input:indeterminate~.c-checkbox__indicator .c-checkbox__dash{display:block}\n.c-label{cursor:pointer}\n.c-label:has(:disabled){cursor:not-allowed;opacity:.64}\n.c-label--top{align-items:flex-start}\n.c-label--top .c-checkbox{margin-top:1px}\n.c-label__text{display:grid;gap:.25rem}\n.c-checkbox-group__items{display:flex;flex-direction:column;gap:.75rem;padding-left:1.5rem}\nfieldset.c-checkbox-group{border:0;margin:0;padding:0;min-width:0}\n" }, { "type": "js", "url": "https://componentes-lovat.vercel.app/raw/checkbox/checkbox.js", "content": "/* Checkbox «Todo»: marca o desmarca el grupo y queda intermedio si solo hay algunos. */\n(function () {\n const C = (window.Componentes = window.Componentes || {});\n\n function setup(set) {\n const all = set.querySelector('[data-c-all]');\n const items = [...set.querySelectorAll('input[type=checkbox]:not([data-c-all])')];\n if (!all || !items.length) return;\n const sync = () => {\n const on = items.filter((i) => i.checked).length;\n all.checked = on === items.length;\n all.indeterminate = on > 0 && on < items.length;\n };\n all.addEventListener('change', () => { items.forEach((i) => { if (!i.disabled) i.checked = all.checked; }); sync(); });\n items.forEach((i) => i.addEventListener('change', sync));\n sync();\n }\n\n function init(root) {\n (root || document).querySelectorAll('[data-c-checkall]:not([data-c-ready])').forEach((el) => {\n el.dataset.cReady = '';\n try { setup(el); } catch (e) { console.warn('[checkbox]', e); }\n });\n }\n\n C.checkbox = { init };\n if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', () => init());\n else init();\n})();\n" }, { "type": "standalone", "url": "https://componentes-lovat.vercel.app/r/checkbox.html" } ], "tokensFile": "https://componentes-lovat.vercel.app/tokens.css", "darkTheme": "add class 'dark' to ", "contexto": "ambos", "densidad": "media", "tono": "sobria", "states": [ "rest", "hover", "focus", "checked", "mixed", "disabled" ], "use": { "es": [ "Para elegir varias opciones.", "Para una aceptación." ], "en": [ "To choose several options.", "For a single agreement." ] }, "avoid": { "es": [ "Si solo se puede una: usa radios.", "Para algo que se aplica al instante: usa un switch." ], "en": [ "If only one is allowed: use radios.", "For instant settings: use a switch." ] }, "a11y": { "roles": [ "checkbox", "group" ], "keyboard": [ { "keys": "Espacio / Space", "es": "Marca o desmarca", "en": "Checks or unchecks" } ], "notes": { "es": [ "El input real está encima, invisible: el lector y los agentes usan un checkbox de verdad.", "«Todo» usa indeterminate, que se anuncia como «mixta»." ], "en": [ "The real input sits on top, invisible: screen readers and agents use a real checkbox.", "“All” uses indeterminate, announced as “mixed”." ] }, "test": { "es": [ "Marca una exportación: «Todo» queda intermedio." ], "en": [ "Check one export: “All” becomes mixed." ] } }, "issues": { "es": [], "en": [] }, "credits": [ { "source": "coss ui (MIT) · checkbox.tsx", "url": "https://coss.com/ui" }, { "source": "W3C WAI-ARIA APG, Checkbox", "url": "https://www.w3.org/WAI/ARIA/apg/patterns/checkbox/" } ], "changes": [ { "date": "2026-09-29", "es": "Diseño de coss ui en HTML, CSS y JS sin dependencias", "en": "coss ui design in dependency-free HTML, CSS and JS" } ], "partes": [], "pieza": "https://componentes-lovat.vercel.app/r/checkbox.html" }