Registry Index

Search the catalog

Type to search items across every indexed registry, or pick a page.

ComponentReactregistry:ui2 dependencies

Checkbox

checkbox

A single checkbox, with the mixed state a parent selection needs.

Live, loading

Starting the live preview…

Runs in a sandboxed frame on a separate origin, in its registry's own theme. Mounted with no props — an item that paints an empty box is given its name as text, and some items need input to show anything.

Notes from the author

A real input type=checkbox wearing the DS field shape. CheckboxGroup is a tile grid answering "which of these" and owns its own boxes; this is the one for a checkbox that stands alone -- a selectable row, a tile's selection affordance, a lone consent box -- and it is the only DS control carrying a mixed state, via `indeterminate` (a DOM property with no HTML attribute, so it is applied through the ref). Pass `label` to get a wrapping label element with the text inside the hit area, or supply your own aria-label. The box is 18px, below the 44px touch floor on purpose, because a dense grid of them would be unusable at 44px: a bare box in a touch context needs its hit area from the caller, gated on useInputType.
4 other registries

Similar components

Other registries' take on checkbox.

@whiskeyjack

More from @whiskeyjack