Accessibility
Accessibility
Section titled “Accessibility”Switch semantics
Section titled “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
Section titled “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
Section titled “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
Section titled “Disabled”The native disabled attribute removes the toggle from tab order and communicates the state to assistive technologies automatically.