CSS21 · טוגל ומתג מונפשים

CSS

/* מחלקות עזר של המאגר שהרכיב הזה משתמש בהן */
.stage{padding:var(--sec, clamp(120px, 12vw, 260px)) var(--gutter, clamp(24px, 5vw, 96px));position:relative}
.stage.tight{padding-block:clamp(48px,5vw,90px)}
.stage.full{padding-inline:0}

/* CSS21 · טוגל ומתג מונפשים */
.toggles{display:flex;gap:50px;justify-content:center;align-items:center}
.sw{position:relative;width:48px;height:27px;display:inline-block;cursor:pointer}
.sw input{opacity:0;width:0;height:0}
.sw .tr{position:absolute;inset:0;background:#d5d5e2;border-radius:999px;transition:background .25s}
.sw .tr::before{content:"";position:absolute;top:3.5px;inset-inline-start:3.5px;width:20px;height:20px;border-radius:50%;background:#fff /* qa-allow: white, ידית/סמן ולא משטח טקסט */;box-shadow:0 1px 3px rgba(0,0,0,.2);transition:translate .25s cubic-bezier(.2,.6,.2,1)}
.sw input:checked+.tr{background:#12b76a}
.sw input:checked+.tr::before{translate:-21px 0}
html[dir="ltr"] .sw input:checked+.tr::before{translate:21px 0}
.cb{display:inline-flex;gap:10px;align-items:center;cursor:pointer;font-size:15px}
.cb input{opacity:0;position:absolute}
.cb .box{width:19px;height:19px;flex:0 0 19px;border:1.8px solid #d5d5e2;border-radius:6px;display:flex;align-items:center;justify-content:center;transition:background .2s,border-color .2s}
.cb .box svg{width:11px;height:11px;stroke:#fff;stroke-width:3.2;fill:none;stroke-dasharray:20;stroke-dashoffset:20;transition:stroke-dashoffset .25s .05s}
.cb input:checked~.box{background:var(--accent, #4a3aff);border-color:var(--accent, #4a3aff)}
.cb input:checked~.box svg{stroke-dashoffset:0}

HTML

<div class="stage tight"><div class="toggles">
<label class="sw"><input type="checkbox" checked><span class="tr"></span></label>
<label class="cb"><input type="checkbox"><span class="box"><svg viewBox="0 0 16 16"><path d="M2.5 8.5l3.5 3.5 7-8"/></svg></span>אני מאשר את התנאים</label>
</div></div>