Checkbox

<Checkbox>TailwindCSS Modules

A control that allows the user to toggle between checked, unchecked, and indeterminate states.

InstallationColoxo CLI

npx coloxo add checkbox --style coloxo-css

ES Module ImportPlayground / npm package

import { Checkbox } from '@coloxo/ui';

Design Tokens:

--cx-brand-600: #2348FF--cx-border-primary: #E2E8F0--cx-radius-sm: 4pxsize: 16px

1. Variant Matrix

Checkboxes support descriptions, indeterminate states, and disabled states natively.

Default	Indeterminate	Disabled
States	Remote eligible Shown on the employee card	Select all	Disabled unchecked Disabled checked

2. Interactive Props Configurator

Checked State

Show Description

Disabled State

Visual Render Canvas

Remote eligible

Shown on the employee card

tsx

1<Checkbox2  label="Remote eligible"3  description="Shown on the employee card"4/>

3. Dark theme

Checkbox borders and text contrast automatically adapt in dark mode.

Remote eligible

Shown on the employee card

Select all

4. Enterprise layout compositions

Checkboxes are often stacked in lists or used as bulk-select toggles in data tables.

Notification Preferences

Email Notifications

Receive a daily summary of activity.

Push Notifications

Get pinged immediately on your phone.

SMS Alerts

Only for critical system outages.

Accessibility

Radix UI Primitives

Checkbox relies on Radix UI Checkbox primitives, ensuring it acts as a native checkbox with spacebar toggling and correct ARIA states.

Linked Labels

The label text is automatically linked via an ID to the checkbox input, meaning clicking the text toggles the checkbox and screen readers announce the label.

Props

Name	Type	Default	Description
label	ReactNode	—	Main checkbox label.
description	ReactNode	—	Additional context text below the label.
checked	boolean	—	Controlled checked state.
indeterminate	boolean	—	Mixed selection state (displays dash).
disabled	boolean	—	Disabled state.
error	ReactNode	—	Validation message or error state.