<label class="toggle">
  <input type="checkbox"
    name="notif"
    checked
    >
  <span class="toggle-track"></span>
</label>
<label class="toggle">
  <input type="checkbox"
    name="notif2"
    
    >
  <span class="toggle-track"></span>
</label>

{% from "toggle.jinja" import toggle %}
{{ toggle("notif", checked=True) }}
{{ toggle("notif2") }}

<Toggle label="notif" checked />
<Toggle label="notif2" />

<div class="showcase-variant">
  <label class="toggle sm">
  <input type="checkbox"
    name="a"
    checked
    >
  <span class="toggle-track"></span>
</label>
  <small class="showcase-variant-caption">sm</small>
</div>
<div class="showcase-variant">
  <label class="toggle">
  <input type="checkbox"
    name="b"
    checked
    >
  <span class="toggle-track"></span>
</label>
  <small class="showcase-variant-caption">md</small>
</div>
<div class="showcase-variant">
  <label class="toggle lg">
  <input type="checkbox"
    name="c"
    checked
    >
  <span class="toggle-track"></span>
</label>
  <small class="showcase-variant-caption">lg</small>
</div>

{% from "toggle.jinja" import toggle %}
{{ toggle("a", size="sm", checked=True) }}
{{ toggle("b", checked=True) }}
{{ toggle("c", size="lg", checked=True) }}

<Toggle label="a" size="sm" checked />
<Toggle label="b" checked />
<Toggle label="c" size="lg" checked />

<div class="showcase-variant">
  <label class="toggle">
  <input type="checkbox"
    name="on"
    checked
    >
  <span class="toggle-track"></span>
</label>
  <small class="showcase-variant-caption">on</small>
</div>
<div class="showcase-variant">
  <label class="toggle">
  <input type="checkbox"
    name="off"
    
    >
  <span class="toggle-track"></span>
</label>
  <small class="showcase-variant-caption">off</small>
</div>
<div class="showcase-variant">
  <label class="toggle">
  <input type="checkbox"
    name="dis-on"
    checked
    disabled>
  <span class="toggle-track"></span>
</label>
  <small class="showcase-variant-caption">disabled-on</small>
</div>
<div class="showcase-variant">
  <label class="toggle">
  <input type="checkbox"
    name="dis-off"
    
    disabled>
  <span class="toggle-track"></span>
</label>
  <small class="showcase-variant-caption">disabled-off</small>
</div>

{% from "toggle.jinja" import toggle %}
{{ toggle("on", checked=True) }}
{{ toggle("off") }}
{{ toggle("dis-on", checked=True, disabled=True) }}
{{ toggle("dis-off", disabled=True) }}

<Toggle label="on" checked />
<Toggle label="off" />
<Toggle label="dis-on" checked disabled />
<Toggle label="dis-off" disabled />

<div class="form-section" style="max-width:520px">
  <div class="toggle-row">
    <div class="toggle-row-text">
      <span class="toggle-row-label">Pedidos nuevos</span>
      <span class="toggle-row-desc">Sonido + push al recibir un pedido en POS.</span>
    </div>
    <label class="toggle">
  <input type="checkbox"
    name="orders"
    checked
    >
  <span class="toggle-track"></span>
</label>
  </div>
  <div class="toggle-row">
    <div class="toggle-row-text">
      <span class="toggle-row-label">Stock crítico</span>
      <span class="toggle-row-desc">Alerta cuando un SKU baja del umbral.</span>
    </div>
    <label class="toggle">
  <input type="checkbox"
    name="stock"
    
    >
  <span class="toggle-track"></span>
</label>
  </div>
</div>

{% from "toggle.jinja" import toggle %}
<div class="form-section" style="max-width:520px">
  <div class="toggle-row">
    <div class="toggle-row-text">
      <span class="toggle-row-label">Pedidos nuevos</span>
      <span class="toggle-row-desc">Sonido + push al recibir un pedido en POS.</span>
    </div>
    {{ toggle("orders", checked=True) }}
  </div>
  <div class="toggle-row">
    <div class="toggle-row-text">
      <span class="toggle-row-label">Stock crítico</span>
      <span class="toggle-row-desc">Alerta cuando un SKU baja del umbral.</span>
    </div>
    {{ toggle("stock") }}
  </div>
</div>

<div class="form-section" style="max-width:520px">
  <div class="toggle-row">
    <div class="toggle-row-text">
      <span class="toggle-row-label">Pedidos nuevos</span>
      <span class="toggle-row-desc">Sonido + push al recibir un pedido en POS.</span>
    </div>
    <Toggle label="orders" checked />
  </div>
  <div class="toggle-row">
    <div class="toggle-row-text">
      <span class="toggle-row-label">Stock crítico</span>
      <span class="toggle-row-desc">Alerta cuando un SKU baja del umbral.</span>
    </div>
    <Toggle label="stock" />
  </div>
</div>

<div data-signals="{ darkmode: false }">
  <label class="toggle">
  <input type="checkbox"
    name="darkmode"
    
     data-bind-darkmode="">
  <span class="toggle-track"></span>
</label>
  <span style="margin-left:12px;">Modo oscuro: <strong data-text="$darkmode ? 'ON' : 'OFF'"></strong></span>
</div>

{% from "toggle.jinja" import toggle %}
<div data-signals="{ darkmode: false }">
  {{ toggle("darkmode", attrs={"data-bind-darkmode": ""}) }}
  <span style="margin-left:12px;">Modo oscuro: <strong data-text="$darkmode ? 'ON' : 'OFF'"></strong></span>
</div>

<div data-signals="{ darkmode: false }">
  <Toggle label="darkmode" data-bind-darkmode="" />
  <span style="margin-left:12px;">Modo oscuro: <strong data-text="$darkmode ? 'ON' : 'OFF'"></strong></span>
</div>