Componentes / Switch / Toggle

Switch / Toggle

estable

Control binario (on/off) para activar o desactivar una configuración con efecto inmediato.

Etiqueta de texto

Controls

themelabelcheckeddisabled

HTML

<label class="section__toggle-wrapper">
  <input type="checkbox" id="switch-name" name="switch-name" class="section__toggle" value="value">
  <span class="toggle__icon" aria-hidden="true">
    <span class="toggle__icon-circle">
      <span class="toggle__icon-off">
        <svg viewBox="0 0 24 24" stroke-width="3">
          <path d="M 19.5 4.5 L 4.5 19.5 M 4.5 4.501 L 19.5 19.5"></path>
        </svg>
      </span>
      <span class="toggle__icon-on">
        <svg viewBox="0 0 24 24" stroke-width="3">
          <path d="M 3.572 13.406 L 8.281 18.115 L 20.428 5.885"></path>
        </svg>
      </span>
    </span>
  </span>
  <span class="toggle__label">Etiqueta de texto</span>
</label>