1. Головна
  2. Перемикачі (Checkboxes & Toggles)

checkboxes & toggles:

☑️ Чекбокси та тоглери в стилі HUD: neon-ефект, bevel-форма, 3D-конвекс та тактичний тоглер з кольоровими варіантами.

Чекбокси — .chk-v
<label>
  <input type="checkbox" class="chk-v chk-neon"> Neon unchecked
</label>
<label>
  <input type="checkbox" class="chk-v chk-neon" checked> Neon checked
</label>
<label>
  <input type="checkbox" class="chk-v chk-bevel"> Bevel OFF
</label>
<label>
  <input type="checkbox" class="chk-v chk-bevel" checked> Bevel ON
</label>
<label>
  <input type="checkbox" checked> Base checked
</label>
Тоглер — .sw (базовий)
<label class="sw">
  <input type="checkbox">
  <span class="sw-slider"></span>
</label>

<!-- Checked state -->
<label class="sw">
  <input type="checkbox" checked>
  <span class="sw-slider"></span>
</label>
Тоглер — .sw-3d (3D Convex Neumorphic)
OFF
ON
2X size 
<div class="sw-3d">
  <input type="checkbox">
</div>

<!-- Larger variant -->
<div class="sw-3d2x">
  <input type="checkbox" checked>
</div>
Тоглер — .toggle-modern
Default (Blue) .tg-green .tg-red .tg-purple .tg-yellow
Default (Blue) .tg-green .tg-red .tg-purple .tg-yellow 
<!-- Default (blue) -->
<label class="toggle-modern">
  <input type="checkbox" checked>
  <span class="mdslider"></span>
</label>

<!-- Green -->
<label class="toggle-modern tg-green">
  <input type="checkbox" checked>
  <span class="mdslider"></span>
</label>

<!-- Red | Purple | Yellow -->
<!-- class="toggle-modern tg-red|tg-purple|tg-yellow" -->
s