Standard duskmoon implemented 9 demos

Checkbox

Checkbox captures independent boolean or multi-select choices.

Import @duskmoon-dev/components/checkbox

4 API sections

9 documented props

6 behavior scenarios

Key API

colorsizeindeterminateerrorloadinglabelPosition

Usage

When to use

Use it inside forms, filters, settings, and any workflow that captures user input.
Prefer controlled props when the value must stay synchronized with application state.

Implementation notes

Stylesheet Import @duskmoon-dev/components/styles.css once in the app or docs shell.

State Start with default props for static examples, then switch to controlled props when state must be shared.

Theme The preview inherits the active DuskMoon data-theme value from the docs layout.

Features

Controlled and uncontrolled usage

Documents default values, value props, and change callbacks for form integration.

Validation state

Surfaces status, size, disabled, and option data patterns where the component supports them.

Primary API surface

Checkbox is most often configured through `color`, `size`, `indeterminate`, `error`.

Covered behavior

Renders with default classes

Feature Demos

Feature demos are authored for the component page, then supplemented with behavior scenarios from the component test coverage.

Colors

authored

Checkbox supports the full semantic color palette: primary, secondary, tertiary, accent, neutral, base, info, success, warning, error.

Source

import "@duskmoon-dev/components/styles.css";
import { Checkbox } from "@duskmoon-dev/components/checkbox";

const colors = [
  "primary",
  "secondary",
  "tertiary",
  "accent",
  "neutral",
  "base",
  "info",
  "success",
  "warning",
  "error"
] as const;

export function CheckboxColorsDemo() {
  return (<div style={{ display: "grid", gap: 8 }}>
  {colors.map((color) => (
    <Checkbox key={color} color={color} defaultChecked>
      {color}
    </Checkbox>
  ))}
</div>);
}

Preview

DuskMoon Checkbox

Basic usage

authored

Import the component stylesheet and Checkbox from its package subpath, then render it with the core props.

Source

import "@duskmoon-dev/components/styles.css";
import { Checkbox } from "@duskmoon-dev/components/checkbox";

export function Example() {
  return (<Checkbox
  color="primary"
>
  DuskMoon Checkbox
</Checkbox>);
}

Preview

DuskMoon Checkbox

Renders with default classes

test-backed

Checkbox scenario from the component test coverage: renders with default classes.

Source

import "@duskmoon-dev/components/styles.css";
import { Checkbox } from "@duskmoon-dev/components/checkbox";

export function CheckboxRendersWithDefaultClassesDemo() {
  return (<Checkbox
  // Renders with default classes
  color="primary"
>
  DuskMoon Checkbox
</Checkbox>);
}

Preview

DuskMoon Checkbox

Applies checked and indeterminate state

test-backed

Checkbox scenario from the component test coverage: applies checked and indeterminate state.

Source

import "@duskmoon-dev/components/styles.css";
import { Checkbox } from "@duskmoon-dev/components/checkbox";

export function CheckboxAppliesCheckedAndIndeterminateDemo() {
  return (<Checkbox
  // Applies checked and indeterminate state
  color="primary"
>
  DuskMoon Checkbox
</Checkbox>);
}

Preview

DuskMoon Checkbox

Calls native change handler

test-backed

Checkbox scenario from the component test coverage: calls native change handler.

Source

import "@duskmoon-dev/components/styles.css";
import { Checkbox } from "@duskmoon-dev/components/checkbox";

export function CheckboxCallsNativeChangeHandlerDemo() {
  return (<Checkbox
  // Calls native change handler
  color="primary"
>
  DuskMoon Checkbox
</Checkbox>);
}

Applies size, color, error, loading, and label position classes

test-backed

Checkbox scenario from the component test coverage: applies size, color, error, loading, and label position classes.

Source

import "@duskmoon-dev/components/styles.css";
import { Checkbox } from "@duskmoon-dev/components/checkbox";

export function CheckboxAppliesSizeColorErrorDemo() {
  return (<Checkbox
  // Applies size, color, error, loading, and label position classes
  color="primary"
>
  DuskMoon Checkbox
</Checkbox>);
}

Preview

DuskMoon Checkbox

Forwards input ref

test-backed

Checkbox scenario from the component test coverage: forwards input ref.

Source

import "@duskmoon-dev/components/styles.css";
import { Checkbox } from "@duskmoon-dev/components/checkbox";

export function CheckboxForwardsInputRefDemo() {
  return (<Checkbox
  // Forwards input ref
  color="primary"
>
  DuskMoon Checkbox
</Checkbox>);
}

Preview

DuskMoon Checkbox

Includes component stylesheet rules

test-backed

Checkbox scenario from the component test coverage: includes component stylesheet rules.

Source

import "@duskmoon-dev/components/styles.css";
import { Checkbox } from "@duskmoon-dev/components/checkbox";

export function CheckboxIncludesComponentStylesheetRulesDemo() {
  return (<Checkbox
  // Includes component stylesheet rules
  color="primary"
>
  DuskMoon Checkbox
</Checkbox>);
}

Preview

Sunshine Theme

DuskMoon Checkbox

Moonlight Theme

DuskMoon Checkbox

Theme aware

authored

Docs previews inherit the DuskMoon data-theme value. Use the header switch to compare light and dark rendering.

Source

<div data-theme="sunshine">
  <Checkbox
  color="primary"
>
  DuskMoon Checkbox
</Checkbox>
</div>

<div data-theme="moonlight">
  <Checkbox
  color="primary"
>
  DuskMoon Checkbox
</Checkbox>
</div>

API

The API reference below lists every parsed exported type or interface for Checkbox. Start with `color`, `size`, `indeterminate`, `error` for common usage.

Types: packages/components/src/components/checkbox/Checkbox.types.ts Scenarios: packages/components/src/components/checkbox/Checkbox.test.tsx

CheckboxProps interface extends Omit< ComponentProps<"input">, "children" | "className" | "size" | "type" >

Prop	Type	Required	Description
`color`	`CheckboxColor`	No	color configures Checkbox.
`size`	`CheckboxSize`	No	size configures Checkbox.
`indeterminate`	`boolean`	No	indeterminate configures Checkbox.
`error`	`boolean`	No	error configures Checkbox.
`loading`	`boolean`	No	loading configures Checkbox.
`labelPosition`	`CheckboxLabelPosition`	No	labelPosition configures Checkbox.
`className`	`string`	No	className configures Checkbox.
`children`	`ReactNode`	No	children configures Checkbox.
`onChange`	`(event: ChangeEvent<HTMLInputElement>) => void`	No	onChange configures Checkbox.

CheckboxColor type

| "primary" | "secondary" | "tertiary" | "accent" | "neutral" | "base" | "info" | "success" | "warning" | "error"

CheckboxSize type

"sm" | "md" | "lg"

CheckboxLabelPosition type

"left" | "right"