Components

Checkbox

Checkbox is the low-level checkbox control. Use it when you need to compose custom layouts around the checkbox yourself.

For the common labeled row pattern, use CheckboxInput.

Basic Usage

Use an accessible name when the checkbox is not paired with visible text in the same component.

Checked

Use checked state for persisted preferences so the current selection reads clearly at a glance.

Disabled

Disable the checkbox when an option is visible for context but currently unavailable. Disabled checkboxes use a muted opacity and disabled cursor.

API reference

Checkbox wraps Base UI Checkbox. Use the Base UI API reference for checked state, indeterminate state, disabled behavior, and form integration details.

Edit this page
Last updated: May 22, 2026, 6:53 PM