Checkbox

Usage

import { Checkbox } from '@epilot/spark-ui/checkbox'

<Checkbox defaultChecked />

Examples

Styles

Set the styleVariant prop to restyle a single checkbox (solid is the default; an ambient data-style on an ancestor still cascades to checkboxes that don't set their own). It supports solid, soft, surface, and outline: soft is borderless (a tinted fill, no outline), surface has a thin (1px) recessed edge that's neutral at rest and accent when checked (matching the switch surface), and outline drops the fill for an accent check in a bordered box.

High contrast

High contrast is an orthogonal modifier for AA+ legibility, set via <Theme highContrast> (or the raw data-high-contrast attribute). solid darkens its fill (step 9 → 12); every other style keeps its fill and instead darkens the check (step 11 → 12) and strengthens the border.

Colors

The checkbox paints with the accent scale by default. Set the color prop to neutral or danger to re-color a single checkbox; every style/high-contrast variant follows the new color. Wrapping in <Theme accentColor="…"> still works for arbitrary accent colours outside this fixed set.

Indeterminate

Pass the indeterminate prop for a partial / mixed selection (e.g. a "select all" header): <Checkbox indeterminate />.

Disabled

Controlled

API Reference

Built on Base UI Checkbox. See the Base UI docs for the full API (checked, onCheckedChange, disabled, …). Spark additions:

• Single 24px box with a 40px hit area (WCAG 2.5.5); style- and high-contrast-aware, radius-capped (never a full circle).
• styleVariant: 'solid' | 'soft' | 'surface' | 'ghost' | 'outline'. Per-checkbox style; defaults to solid once color or styleVariant is set.
• color: 'accent' | 'neutral' | 'danger'. Re-points the accent scale for this checkbox.
• indeterminate: boolean. Renders the partial / mixed state.
• size / bordered: deprecated. Accepted for back-compat but ignored (one size, always bordered).