Checkbox

Checkbox control (size-4, rounded, CheckIcon) plus CheckboxField compound component with label, description, type variants (default/box), control placement (start/end), and invalid state support.

Figma: DS-001 Foundations ยท 18692:39410

Import

Live Demo

Checkbox states, indeterminate, and field compositions.

By clicking this checkbox, you agree to the terms and conditions.

By clicking this checkbox, you agree to the terms and conditions.

By clicking this checkbox, you agree to the terms and conditions.

By clicking this checkbox, you agree to the terms and conditions.

By clicking this checkbox, you agree to the terms and conditions.

By clicking this checkbox, you agree to the terms and conditions.

Props

NameTypeDefaultDescription
checkedboolean | 'indeterminate'falseControlled checked state
disabledbooleanfalseWhether the checkbox is disabled

Examples

Basic Checkbox

With Label

Use CheckboxField for built-in label support.

Indeterminate State

Useful for parent checkboxes in nested lists.

Disabled State