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`	Moves keyboard focus to the `checkbox`.
`Space`	Toggles checkbox between checked and unchecked states.

Role, Property, State, and Tabindex Attributes

Role	Attribute	Element	Usage
		`h3`	Provides a grouping label for the group of checkboxes.
`group`		`div`	Identifies the `div` element as a `group` container for the checkboxes.
	`aria-labelledby`	`div`	The `aria-labelledby` attribute references the `id` attribute of the `h3` element to define the accessible name for the group of checkboxes.
`checkbox`		`div`	Identifies the `div` element as a `checkbox`. The child text content of this `div` provides the accessible name of the checkbox.
	`tabindex="0"`	`div`	Includes the checkbox in the page tab sequence.
	`aria-checked="false"`	`div`	Indicates the `checkbox` is not checked. CSS attribute selectors (e.g. `[aria-checked="false"]`) are used to synchronize the visual states with the value of the `aria-checked` attribute. To support operating system and browser high contrast settings, the CSS `::before` pseudo element and `content` property are used to generate the visual indicators of the checkbox state.
	`aria-checked="true"`	`div`	Indicates the `checkbox` is checked. CSS attribute selectors (e.g. `[aria-checked="true"]`) are used to synchronize the visual states with the value of the `aria-checked` attribute. To support operating system and browser high contrast settings, the CSS `::before` pseudo element and `content` property are used to generate the visual indicators of the checkbox state.

Javascript and CSS Source Code

CSS: checkbox.css
Javascript: checkbox.js

HTML Source Code

Simple Two-State Checkbox Example