The ui-toggle and ui-checkbox elements create fully accessible and stylable
toggle elements, that behave similar to native <input type="checkbox"> elements.
They can be used inside of form elements and contribute their value to the form's
FormData object, just as regular checkboxes would. In addition, they can have label
elements referencing them and clicking on the labels will toggle the custom elements and screen readers
will announce the labels, just as they would for regular checkboxes.
// ui-toggle <label for="feature-toggle">Enable Feature</label> <ui-toggle id="feature-toggle"></ui-toggle> // ui-checkbox <label for="feature-checkbox">Feature Enabled</label> <ui-checkbox id="feature-checkbox" aria-checked="true"></ui-checkbox>
A toggle has 2 distinct states: checked and unchecked.
A checkbox has one additional state: checked, unchecked and indeterminate. The latter one is mostly used when a checkbox controls multiple other checkboxes.