Checkbox.
A clear choice, with room for a mixed state.
Centered check and mixed marks, with three sizes, semantic colors, custom artwork and static materials. The labeled root owns the interaction.
Make it yours
Preparing the example…
Composition
AnatomyRoot owns checked, mixed, disabled, readOnly and form state. Indicator is decorative and supports custom artwork. Field owns validation and labeling; CheckboxGroup owns array selection and select-all parent relationships.
Field.Root
├── Field.Label → Checkbox.Root → Checkbox.Indicator
├── Field.Description
└── Field.ErrorA place to start
UsageImport the stylesheet once at your application root. This complete example reflects the properties selected above.
Loading example…
Details that make a difference
Examples & statesLoading checkbox comparisons…
The finer details
API referenceGenerated from Dixy’s local TypeScript interfaces. Native and Base UI Checkbox props are forwarded; this table covers the options Dixy adds.
CheckboxRoot
| Prop | Type / description | Default |
|---|---|---|
size | "sm" | "md" | "lg"Visual box and indicator proportions; preserves the shared minimum interaction target. | md |
variant | "soft" | "solid" | "outline"Selected emphasis. Unchecked boxes remain neutral. | solid |
color | "neutral" | "accent" | "danger" | "success"Selected semantic color. Accent follows Theme.accentColor. | accent |
radius | "none" | "sm" | "md" | "lg" | "full"Contextual box rounding. | Theme.radius |
material | "matte" | "glossy" | "soft" | "metal" | "paper"Static box finish; import materials.css. | Theme.material |
CheckboxIndicator
| Prop | Type / description | Default |
|---|---|---|
checkedIcon | ReactNodeDecorative checked artwork. Omit for the centered SVG check. Custom children take precedence. | — |
indeterminateIcon | ReactNodeDecorative mixed-state artwork. Omit for the centered SVG dash. Custom children take precedence. | — |
Built from the same foundations
Styling tokensChange Theme settings above to compare appearance, accent, neutral, radius, spacing density, motion and direction. Override component aliases on a Theme root so custom properties follow portaled content too. The wrapper merges className, style, refs and render composition with its owning primitive.
| Token | Purpose |
|---|---|
--dixy-choice-size | The component-specific starting point. |
--dixy-font-label-md | Control label font and line height; body roles remain readable in text inputs. |
--dixy-color-background-selected | Selected surfaces use semantic color across appearances. |
--dixy-color-border-focus | Focus indication remains visible independently of shadows. |
--dixy-spacing-inset-sm | Density-aware component padding. |
--dixy-motion-transition-feedback | Short state feedback, reduced by the inherited motion setting. |
Consider everyone
AccessibilityUse a stable visible label or aria-label. Field.Description and Field.Error associate supporting text and validation; Field.Root owns invalid state. The default marks and custom icon slots are decorative. Checked, mixed and unchecked remain distinct; disabled and readOnly preserve their Base UI behavior.
Target: WCAG 2.2 AA. Automated tests cover selected behavior; manual screen-reader, contrast, and zoom validation remain part of the release checklist.
Build it. Then understand it.
Root adds sm, md and lg sizes; solid, soft and outline emphasis; four semantic colors; five contextual radii; and optional static materials. Unchecked boxes stay neutral. Radius and material inherit Theme when omitted. Indicator accepts checkedIcon and indeterminateIcon; custom children, including null, take precedence. Centered SVG defaults and finite 120ms feedback retain Base UI presence. Reduced motion changes immediately. Use Field for validation and CheckboxGroup with a parent checkbox for select-all behavior; these keep primitive refs, events, keyboard and form contracts.
--dixy-choice-size