Skip to content
Branch: master
Find file History
robdodson Ratcheting (#124)
* Tidy up howto-checkbox.

- No longer style against ARIA states. ARIA is an implementation detail.
- Change keyboard handers to use keyup to prevent rapid toggling while holding the key down.
- Update checkbox README to mention that tabindex is removed when the element is disabled.

* Load howto-label script for all demos.

- Add howto-label to howto-checkbox demo

* Wrap howto-radio-group in a fieldset/legend

* Whitespace
Latest commit 0a8bf67 Oct 9, 2017
Type Name Latest commit message Commit time
Failed to load latest commit information.
images Howto checkbox redux (#41) Apr 14, 2017 Ratcheting (#124) Oct 9, 2017
demo.html Ratcheting (#124) Oct 9, 2017
howto-checkbox.e2etest.js License headers (closes #54) May 5, 2017
howto-checkbox.js Ratcheting (#124) Oct 9, 2017
howto-checkbox.unittest.js License headers (closes #54) May 5, 2017

Summary {: #summary }

A <howto-checkbox> represents a boolean option in a form. The most common type of checkbox is a dual-type which allows the user to toggle between two choices -- checked and unchecked.

The element attempts to self apply the attributes role="checkbox" and tabindex="0" when it is first created. The role attribute helps assistive technology like a screen reader tell the user what kind of control this is. The tabindex attribute opts the element into the tab order, making it keyboard focusable and operable. To learn more about these two topics, check out What can ARIA do? and Using tabindex.

When the checkbox is checked, it adds a checked boolean attribute, and sets a corresponding checked property to true. In addition, the element sets an aria-checked attribute to either "true" or "false", depending on its state. Clicking on the checkbox with a mouse, or space bar, toggles these checked states.

The checkbox also supports a disabled state. If either the disabled property is set to true or the disabled attribute is applied, the checkbox sets aria-disabled="true", removes the tabindex attribute, and returns focus to the document if the checkbox is the current activeElement.

Warning: Just because you can build a custom element checkbox, doesn't necessarily mean that you should. As this example shows, you will need to add your own keyboard, labeling, and ARIA support. It's also important to note that the native <form> element will NOT submit values from a custom element. You will need to wire that up yourself using AJAX or a hidden <input> field. For these reasons it can often be preferrable to use the built-in <input type="checkbox"> instead.

Reference {: #reference }

You can’t perform that action at this time.