Checkbox Example (Mixed State)
This example implements the Checkbox Design Pattern using div
element for a mixed state checkbox used in conjunction with a set of standard HTML checkboxes. This example also uses fieldset/Legend
elements to provide a grouping label for the checkboxes since the checkboxes are related to each other.
Similar examples include:
- Checkbox (Two State): Simple two state checkbox.
Example
Keyboard Support
Key | Function |
---|---|
Tab |
|
Space |
|
Role, Property, State, and Tabindex Attributes
Role | Attribute | Element | Usage |
---|---|---|---|
checkbox |
div |
|
|
tabindex="0" |
div |
|
|
aria-controls="[IDREFS]" |
div |
|
|
aria-checked="false" |
div |
|
|
aria-checked="true" |
div |
|
|
aria-checked="mixed" |
div |
|
Javascript and CSS Source Code
- CSS: checkbox.css
- Javascript: checkboxMixed.js
- Javascript: controlledCheckbox.js
HTML Source Code