Skip to content
Toyota Motor Europe DX Playbook

Develop

Styles

Section titled “Styles”

A toggle is a switch control that lets users turn a setting on or off.

<div class="tng-toggle-control">
  <input id="c2" type="checkbox" checked />
  <label for="c2">On</label>
</div>
<div class="tng-toggle-control">
  <input id="c1" type="checkbox" />
  <label for="c1">Off</label>
</div>
<div class="tng-toggle-control">
  <input id="c4" type="checkbox" checked disabled />
  <label for="c4">On (disabled)</label>
</div>
<div class="tng-toggle-control">
  <input id="c3" type="checkbox" disabled />
  <label for="c3">Off (disabled)</label>
</div>
<div class="tng-toggle-control is-error">
  <input id="c6" type="checkbox" checked />
  <label for="c6">On (error)</label>
</div>
<div class="tng-toggle-control is-error">
  <input id="c5" type="checkbox" />
  <label for="c5">Off (error)</label>
</div>