Heartwood

Toggle: With Text 

<div class="toggle__wrapper">
    <div class="toggle">
        <input class="toggle__input" type="checkbox" id="toggle 3" checked/>
        <label class="toggle__label" for="toggle 3" />
    </div>
    <label class="toggle__text" for="toggle 3">Night Mode</label>
</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 3",
  "postText": "Night Mode"
}

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.