Heartwood

Toggle: Default 

<div class="toggle__wrapper">
    <div class="toggle">
        <input class="toggle__input" type="checkbox" id="toggle" checked/>
        <label class="toggle__label" for="toggle" />
    </div>

</div>
 
<div class="toggle__wrapper">
	<div class="toggle">
		<input class="toggle__input" type="checkbox" id="{{ id }}" {{#if on}}checked{{/if}}/>
		<label class="toggle__label" for="{{ id }}" />
	</div>
	{{#if postText}}<label class="toggle__text" for="{{ id }}">{{postText}}</label>{{/if}}
</div>
 
{
  "on": true,
  "id": "toggle"
}

Toggle

A Toggle allows the user to enable or disable a feature synchronously.

When to use:

Use a toggle for changes that don’t require review, and for settings that are independent from one another.

When not to use:

  • For interdependent, multiple choices, or nested options; instead use a Checkbox
  • For changes that a user may need to review; instead use other forms of input with a submit handler.