Checkbox Example (Two State)
This example implements the Checkbox Design Pattern for a two state checkbox using div
elements.
Similar examples include:
- Checkbox (Mixed State): Mixed state checkbox controlling standard input checkboxes.
Example
Sandwich Condiments
- Lettuce
- Tomato
- Mustard
- Sprouts
Keyboard Support
Key | Function |
---|---|
Tab |
|
Space |
|
Role, Property, State, and Tabindex Attributes
Role | Attribute | Element | Usage |
---|---|---|---|
checkbox |
div |
|
|
tabindex="0" |
div |
|
|
aria-checked="false" |
div |
|
|
aria-checked="true" |
div |
|
Javascript and CSS Source Code
- CSS: checkbox.css
- Javascript: checkbox.js
HTML Source Code
Simple Two-State Checkbox Example