# Switch / Switch

> Toggle for settings applied instantly.

Page: https://componentes-lovat.vercel.app/c/switch/  
License: MIT · Design: coss ui (MIT) · switch.tsx  
Requires: tokens.css  
Context: ambos · Density: media · Tone: sobria

## Files

- Tokens (once): https://componentes-lovat.vercel.app/tokens.css
- HTML: https://componentes-lovat.vercel.app/raw/switch/switch.html
- CSS: https://componentes-lovat.vercel.app/raw/switch/switch.css
- Everything in one file: https://componentes-lovat.vercel.app/r/switch.html

Dark theme: add class `dark` to `<html>`.

## When to use

- For immediate settings (airplane mode, notifications).

## When not to use

- Inside a form with a submit button: use a checkbox.

## Accessibility

Roles: switch

| Keys | Action |
|---|---|
| Espacio / Space | Turns on or off |

- Native checkbox with role=switch: announced as “on / off”.
- The whole row is clickable.

## Code

```html
<div class="c-switch-list">
  <label class="c-switch-label"><span class="c-switch-label__text">Modo avión <span class="c-switch-label__description">Desactiva todas las conexiones</span></span><span class="c-switch"><input class="c-switch__input" type="checkbox" role="switch"><span class="c-switch__thumb"></span></span></label>
  <label class="c-switch-label"><span class="c-switch-label__text">Avisos por correo</span><span class="c-switch"><input class="c-switch__input" type="checkbox" role="switch" checked><span class="c-switch__thumb"></span></span></label>
  <label class="c-switch-label"><span class="c-switch-label__text">Sincronizar <span class="c-switch-label__description">Requiere una cuenta</span></span><span class="c-switch"><input class="c-switch__input" type="checkbox" role="switch" disabled><span class="c-switch__thumb"></span></span></label>
</div>
```

```css
/* switch · Componentes (MIRÓ Labs). Diseño de coss ui (MIT, © coss.com, antes Origin UI).
   Generado por tools/build_css.py desde switch.tw.json. No editar a mano. Necesita tokens.css. */
.c-switch__thumb{pointer-events:none}
.c-switch{position:relative}
.c-switch__thumb{display:block}
.c-switch{display:inline-flex}
.c-switch-label{display:inline-flex}
.c-switch__thumb{aspect-ratio:1}
.c-switch{height:calc(var(--thumb-size) + 2px)}
.c-switch__thumb{height:100%}
.c-switch{width:calc(var(--thumb-size)*2 - 2px);flex-shrink:0}
.c-switch__thumb{transform-origin:0}
.c-switch{align-items:center}
.c-switch-label{align-items:center;gap:calc(var(--spacing)*2)}
.c-switch__thumb{border-radius:var(--thumb-size)}
.c-switch{border-radius:3.40282e38px}
.c-switch__thumb{background-color:var(--background)}
.c-switch{padding:1px}
.c-switch-label{font-size:var(--text-base);line-height:calc(var(--spacing)*4.5)}
.c-switch-label__description{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}
.c-switch-label{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}
.c-switch-label__description{--tw-font-weight:var(--font-weight-normal);font-weight:var(--font-weight-normal)}
.c-switch-label{color:var(--foreground)}
.c-switch-label__description{color:var(--muted-foreground)}
.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)}
@supports (color:lab(0% 0 0)){
.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))}
}
.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}
.c-switch__thumb{will-change:transform}
.c-switch{--tw-outline-style:none;outline-style:none;--thumb-size:calc(var(--spacing)*5)}
.c-switch__thumb{transition:translate .15s,border-radius .15s,scale .1s .1s,transform-origin .15s}
.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)}
.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)}
.c-switch:has(>.c-switch__input:checked){background-color:var(--primary)}
.c-switch:has(>.c-switch__input:disabled){cursor:not-allowed;opacity:.64}
.c-switch:not(:has(>.c-switch__input:checked)){background-color:var(--input)}
@media (min-width:40rem){
.c-switch-label{font-size:var(--text-sm);line-height:calc(var(--spacing)*4)}
.c-switch{--thumb-size:calc(var(--spacing)*4)}
}
/* propio */
.c-switch__input{position:absolute;inset:0;z-index:1;margin:0;opacity:0;cursor:pointer;appearance:none;border-radius:9999px}
.c-switch__input:disabled{cursor:not-allowed}
: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)}
.c-switch-label{cursor:pointer;justify-content:space-between;width:100%}
.c-switch-label:has(:disabled){cursor:not-allowed;opacity:.64}
.c-switch-label__text{display:grid;gap:.25rem}
.c-switch-list{display:grid;gap:1rem;width:100%;max-width:22rem}
```

## Credits

- coss ui (MIT) · switch.tsx: https://coss.com/ui
- W3C WAI-ARIA APG, Switch: https://www.w3.org/WAI/ARIA/apg/patterns/switch/