Toggle

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>

Default

On

Off

On (disabled)

Off (disabled)

On (error)

Off (error)

Contrast

On

Off

On (disabled)

Off (disabled)

On (error)

Off (error)

Accessibility

Switch semantics

Consider adding role="switch" to the <input type="checkbox"> to convey toggle semantics. Screen readers will then announce “on” / “off” instead of “checked” / “unchecked”.

<div class="tng-toggle-control">
  <input id="notifications" type="checkbox" role="switch" />
  <label for="notifications">Notifications</label>
</div>

Label association

The <label> is linked to the input using for / id — this is already shown in the examples. Always maintain this association so the toggle is operable by clicking the label.

Error state

The .is-error class provides visual feedback only. Pair it with aria-invalid="true" and an error message linked via aria-describedby.

Disabled

The native disabled attribute removes the toggle from tab order and communicates the state to assistive technologies automatically.