The Checkbox

Checkboxes let people say yes or no to one thing, and the browser has had one built in for as long as there have been forms. Its box is hard to style, though, so many teams rebuild it, and that's where it goes wrong. The Checkbox page walks you through building one the right way, from a label that toggles the box to a "Select all" that screen readers announce as mixed.

New

• The Checkbox wraps its own label around the box, so the text names it and a press on the text toggles it, and the box sits in a hit area of at least 24 × 24px at every size.
• It takes the Button's and the Input's sizes, and shows checked, indeterminate, disabled, read-only and invalid with a look of their own, each read from the <input>, so what people see always matches what screen readers announce.
• Its checklist covers how forms use it too, like keeping labels positive, saying why a required box needs checking, and remembering that an unchecked box sends nothing.
• It comes with its own contract, live examples and a tested reference implementation, ready for the Checkbox Group that's next on our Roadmap.