Component

Checkbox

Represent independent yes-or-no choices with keyboard support and controlled or uncontrolled state.

Usage

Import the component entry and start with its smallest complete example.

Import

import { Checkbox } from "@chitrank2050/monoline-ui/checkbox"

Basic usage

<Checkbox id="updates" checked={checked} onCheckedChange={(value) => setChecked(value === true)} />
<Label htmlFor="updates">Email product updates</Label>

Usage guidance

Choose the component for its interaction model and semantics before customizing its appearance.

Use when

Checkbox represents an independent yes-or-no choice or a group-level indeterminate state.

Avoid when

The available choices are mutually exclusive, or one switch changes a setting immediately.

Accessibility

Checkbox provides keyboard and checked-state semantics. Pair it with a visible Label and associate any description or validation message explicitly.

Client Component

This component needs browser JavaScript for state or browser APIs.

API reference

Props, slots, and callbacks available on this component.

checkedboolean | indeterminateControlled checked state

defaultCheckedbooleanInitial uncontrolled state

onCheckedChange(state) => voidRuns when the state changes

disabledbooleanPrevents interaction

Design tokens

Theme variables this component reads for color, spacing, and motion.

--accent / --accent-foregroundCSS varChecked surface and mark

--border-strongCSS varUnchecked border

--focus-ringCSS varKeyboard focus

Implementation

The source used by the example above, including any state it needs.

<Checkbox id="updates" checked={checked} onCheckedChange={(value) => setChecked(value === true)} />
<Label htmlFor="updates">Email product updates</Label>

Compare related components or review the package and theme setup.

01ComponentFieldComponent · ReferenceReference→02ComponentRadio GroupComponent · ReferenceReference→03SetupInstall Monoline UISetup · GuideGuide→04ThemeTailwind CSS v4 design tokensTheme · FoundationsFoundations→

Interactive preview