Checkbox

Select multiple options from a list.

Core Examples

Accessible React components with Base UI and Yumma CSS.

Base

Standard implementation with default configuration.


Disabled

Prevents interaction with reduced visual emphasis.


Parent

Controls child items through an indeterminate state.


Read only

Displays content without allowing edits.


Group Examples

Groups, nesting, and parent-child relationships.

Label

Adds a Label component for accessible context.


Nested Parent

Combines Parent control with nested sub-items.


Size Examples

Sizes from compact to large.

Large

Expanded size for emphasis or easier targeting.


Medium

Standard default size.


Small

Compact size for constrained spaces.


More Examples

Additional variants and interactive states.

Description

Includes a secondary descriptive text below the label.


Detailed

Shows additional details alongside the primary content.


Indeterminate

Displays a mixed state when neither fully checked nor unchecked.