<div class="form-check form-switch" style="font-family:'Satoshi';">
<input class="form-check-input" type="checkbox" id="toggle-example">
<label class="form-check-label" for="toggle-example" style="color:var(--title);font-size:0.875rem;">Enable notifications</label>
</div>
<div class="form-check form-switch" style="font-family:'Satoshi';">
<input class="form-check-input" type="checkbox" id="toggle-{{id}}" {{#if checked}}checked{{/if}} {{#if disabled}}disabled{{/if}}>
<label class="form-check-label" for="toggle-{{id}}" style="color:var(--title);font-size:0.875rem;">{{label}}</label>
</div>
{
"id": "example",
"label": "Enable notifications",
"checked": false,
"disabled": false
}
Bootstrap .form-switch. Used for settings that take effect immediately (notifications, visibility, auto-reposting). Always pair with a clear label describing the on state.