On this page:

Checkbox

Preview

index.tsx

Group Checkbox

Preview

index.tsx

Nested Checkbox

Preview

index.tsx

Design Tokens for Checkbox

TokenColor forState/Meaning
--par-color-icon-checkbox-enabledCheckbox icon colorIcon when enabled
--par-color-icon-checkbox-disabledCheckbox icon colorIcon when disabled
--par-color-icon-checkbox-indeterminateIndeterminate icon colorIcon when indeterminate
--par-color-icon-checkbox-indeterminate-disabledIndeterminate icon (disabled)Icon indeterminate/disabled
--par-color-icon-checkbox-neutral-selectedIcon color (neutral, checked)Icon when checked (neutral)
--par-color-bg-checkbox-neutral-selectedBackground (neutral, checked)Background checked (neutral)
--par-color-icon-checkbox-accent-selectedIcon color (accent, checked)Icon when checked (accent)
--par-color-bg-checkbox-accent-selectedBackground (accent, checked)Background checked (accent)
--par-color-icon-checkbox-neutral-disabledIcon color (neutral, disabled)Icon when disabled (neutral)
--par-color-bg-checkbox-neutral-disabledBackground (neutral, disabled)Background disabled (neutral)
--par-color-icon-checkbox-accent-disabledIcon color (accent, disabled)Icon when disabled (accent)
--par-color-bg-checkbox-accent-disabledBackground (accent, disabled)Background disabled (accent)

Checkbox API Reference

<Checkbox />

PropTypeDefaultDescription
color'neutral' | 'accent''neutral'Checkbox color
labelstring | ReactNodeMain label
sublabelstring | ReactNodeSublabel
indeterminatebooleanfalseIndeterminate state
checkboxWrapperPropsobjectProps for outer wrapper