{ "name": "switch", "title": { "es": "Switch", "en": "Switch" }, "summary": { "es": "Interruptor para ajustes que se aplican al instante.", "en": "Toggle for settings applied instantly." }, "category": "forms", "status": "stable", "nivel": "primitivos", "updated": "2026-09-29", "license": "MIT", "page": "https://componentes-lovat.vercel.app/c/switch/", "requires": [], "files": [ { "type": "html", "url": "https://componentes-lovat.vercel.app/raw/switch/switch.html", "content": "
\n \n \n \n
\n" }, { "type": "css", "url": "https://componentes-lovat.vercel.app/raw/switch/switch.css", "content": "/* switch · Componentes (MIRÓ Labs). Diseño de coss ui (MIT, © coss.com, antes Origin UI).\n Generado por tools/build_css.py desde switch.tw.json. No editar a mano. Necesita tokens.css. */\n.c-switch__thumb{pointer-events:none}\n.c-switch{position:relative}\n.c-switch__thumb{display:block}\n.c-switch{display:inline-flex}\n.c-switch-label{display:inline-flex}\n.c-switch__thumb{aspect-ratio:1}\n.c-switch{height:calc(var(--thumb-size) + 2px)}\n.c-switch__thumb{height:100%}\n.c-switch{width:calc(var(--thumb-size)*2 - 2px);flex-shrink:0}\n.c-switch__thumb{transform-origin:0}\n.c-switch{align-items:center}\n.c-switch-label{align-items:center;gap:calc(var(--spacing)*2)}\n.c-switch__thumb{border-radius:var(--thumb-size)}\n.c-switch{border-radius:3.40282e38px}\n.c-switch__thumb{background-color:var(--background)}\n.c-switch{padding:1px}\n.c-switch-label{font-size:var(--text-base);line-height:calc(var(--spacing)*4.5)}\n.c-switch-label__description{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}\n.c-switch-label{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}\n.c-switch-label__description{--tw-font-weight:var(--font-weight-normal);font-weight:var(--font-weight-normal)}\n.c-switch-label{color:var(--foreground)}\n.c-switch-label__description{color:var(--muted-foreground)}\n.c-switch__thumb{--tw-shadow-alpha:5%;--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000000d),0 1px 2px -1px 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-switch__thumb{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,lab(0% 0 0/.05)),0 1px 2px -1px var(--tw-shadow-color,lab(0% 0 0/.05))}\n}\n.c-switch{transition-property:background-color,box-shadow;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration));--tw-duration:.2s;transition-duration:.2s}\n.c-switch__thumb{will-change:transform}\n.c-switch{--tw-outline-style:none;outline-style:none;--thumb-size:calc(var(--spacing)*5)}\n.c-switch__thumb{transition:translate .15s,border-radius .15s,scale .1s .1s,transform-origin .15s}\n.c-switch:has(>.c-switch__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-color:var(--ring);--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-switch__input:checked~.c-switch__thumb{transform-origin:var(--thumb-size)50%;--tw-translate-x:calc(var(--thumb-size) - 4px);translate:var(--tw-translate-x)var(--tw-translate-y)}\n.c-switch:has(>.c-switch__input:checked){background-color:var(--primary)}\n.c-switch:has(>.c-switch__input:disabled){cursor:not-allowed;opacity:.64}\n.c-switch:not(:has(>.c-switch__input:checked)){background-color:var(--input)}\n@media (min-width:40rem){\n.c-switch-label{font-size:var(--text-sm);line-height:calc(var(--spacing)*4)}\n.c-switch{--thumb-size:calc(var(--spacing)*4)}\n}\n/* propio */\n.c-switch__input{position:absolute;inset:0;z-index:1;margin:0;opacity:0;cursor:pointer;appearance:none;border-radius:9999px}\n.c-switch__input:disabled{cursor:not-allowed}\n:is(.c-switch:active,.c-switch-label:active):not(:has(:disabled)) .c-switch__thumb{scale:1.1 1;border-radius:var(--thumb-size)/calc(var(--thumb-size)*1.1)}\n.c-switch-label{cursor:pointer;justify-content:space-between;width:100%}\n.c-switch-label:has(:disabled){cursor:not-allowed;opacity:.64}\n.c-switch-label__text{display:grid;gap:.25rem}\n.c-switch-list{display:grid;gap:1rem;width:100%;max-width:22rem}\n" }, { "type": "standalone", "url": "https://componentes-lovat.vercel.app/r/switch.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", "disabled" ], "use": { "es": [ "Para ajustes inmediatos (modo avión, avisos)." ], "en": [ "For immediate settings (airplane mode, notifications)." ] }, "avoid": { "es": [ "Dentro de un formulario con botón de enviar: usa checkbox." ], "en": [ "Inside a form with a submit button: use a checkbox." ] }, "a11y": { "roles": [ "switch" ], "keyboard": [ { "keys": "Espacio / Space", "es": "Enciende o apaga", "en": "Turns on or off" } ], "notes": { "es": [ "Checkbox nativo con role=switch: se anuncia «activado / desactivado».", "Toda la fila es clicable." ], "en": [ "Native checkbox with role=switch: announced as “on / off”.", "The whole row is clickable." ] }, "test": { "es": [ "Pulsa Espacio sobre «Modo avión»: se anuncia «activado»." ], "en": [ "Press Space on “Airplane mode”: “on” is announced." ] } }, "issues": { "es": [], "en": [] }, "credits": [ { "source": "coss ui (MIT) · switch.tsx", "url": "https://coss.com/ui" }, { "source": "W3C WAI-ARIA APG, Switch", "url": "https://www.w3.org/WAI/ARIA/apg/patterns/switch/" } ], "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/switch.html" }