Switch

Prezentare

Comută imediat o stare binară (pornit/oprit), fără a necesita un buton separat de confirmare, spre deosebire de un checkbox obișnuit dintr-un formular trimis explicit.

Când se folosește

• pentru setări care se aplică imediat la schimbare (de exemplu, activarea unei notificări), unde efectul e instant și reversibil.

Când nu se folosește

• într-un formular trimis explicit printr-un buton — acolo un `checkbox` obișnuit comunică mai corect faptul că schimbarea nu are efect până la trimitere.

Anatomie

Un `<label class="sd-switch">` care încadrează `<input class="sd-switch__input" type="checkbox" role="switch">` (vizual ascuns, dar accesibil), `<span class="sd-switch__track">` cu `.sd-switch__thumb`, și textul etichetei.

Variante

• implicit — o singură variantă

Stări

• :checked
• :disabled

Comportament

Complet static, fără JavaScript — nu există enhancement asociat în `interactive.ts`. Este un `<input type="checkbox" role="switch">` nativ, stilizat vizual ca întrerupător; starea `checked` și evenimentele native `change` sunt disponibile imediat, fără inițializare.

Reguli de conținut

• eticheta descrie starea „pornit”, nu acțiunea de comutare ("Notificări prin e-mail", nu "Activează notificările").

Responsabilitățile implementatorului

• tratează schimbarea de stare a switch-ului ca pe o acțiune reală, cu efect imediat (salvare, apel API) — un switch care nu declanșează nimic contrazice așteptarea creată de comportamentul lui imediat.

Cercetare

• https://github.com/ciprian-rus/sistem.digital/pull/52 (site extern)

Istoric

Structura completă a acestei secțiuni urmează șablonul canonic al paginii unei componente. Accesibilitatea (semantică, tastatură, focus) rămâne documentată separat, conform șablonului de accesibilitate.

Preview și markup canonic

Previzualizarea de mai jos redă exact șirul HTML afișat în exemplul de cod. Nu există o implementare paralelă pentru documentație.

Instalare și importuri

pnpm add @sistem-digital/tokens @sistem-digital/components

@import '@sistem-digital/components/interactive.css';

<label class="sd-switch"><input class="sd-switch__input" type="checkbox" role="switch" checked><span class="sd-switch__track"><span class="sd-switch__thumb"></span></span><span class="sd-switch__label">Notificări prin e-mail</span></label>

Contract și surse

• Documentația familiei Interactive
• Codul sursă (site extern)
• Changelog (site extern)

Schimbarea claselor publice, a markup-ului canonic sau a comportamentului helperelor necesită versionare și instrucțiuni de migrare.

Matricea design–cod

Disponibilitatea reală a acestei componente, calculată din pachetele publicate, conform schemei matricei design–cod. Rândurile Figma, testare cu tastatura și testare cu cititor de ecran rămân „Indisponibil” până la dovezi publicate separat (kit Figma, respectiv auditul manual de accesibilitate).