Standard duskmoon implemented 9 demos

Switch

Switch toggles an immediate on/off setting.

Import @duskmoon-dev/components/switch

4 API sections

10 documented props

6 behavior scenarios

Key API

checkeddefaultCheckedonChangedisabledloadingsize

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

Switch is most often configured through `checked`, `defaultChecked`, `onChange`, `disabled`.

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

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

Source

import "@duskmoon-dev/components/styles.css";
import { Switch } from "@duskmoon-dev/components/switch";

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

export function SwitchColorsDemo() {
  return (<div style={{ display: "grid", gap: 10 }}>
  {colors.map((color) => (
    <Switch
      key={color}
      color={color}
      defaultChecked
      checkedChildren={color.slice(0, 2)}
      unCheckedChildren={color.slice(0, 2)}
    />
  ))}
</div>);
}

Preview

Basic usage

authored

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

Source

import "@duskmoon-dev/components/styles.css";
import { Switch } from "@duskmoon-dev/components/switch";

export function Example() {
  return (<Switch
  defaultChecked
  checkedChildren="On"
  unCheckedChildren="Off"
/>);
}

Preview

Renders with default classes

test-backed

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

Source

import "@duskmoon-dev/components/styles.css";
import { Switch } from "@duskmoon-dev/components/switch";

export function SwitchRendersWithDefaultClassesDemo() {
  return (<Switch
  defaultChecked
  checkedChildren="On"
  unCheckedChildren="Off"
/>);
}

Preview

Supports controlled checked state

test-backed

Switch scenario from the component test coverage: supports controlled checked state.

Source

import "@duskmoon-dev/components/styles.css";
import { Switch } from "@duskmoon-dev/components/switch";

export function SwitchSupportsControlledCheckedStateDemo() {
  return (<Switch
  defaultChecked
  checkedChildren="On"
  unCheckedChildren="Off"
/>);
}

Preview

Calls onChange with the next checked boolean

test-backed

Switch scenario from the component test coverage: calls onchange with the next checked boolean.

Source

import "@duskmoon-dev/components/styles.css";
import { Switch } from "@duskmoon-dev/components/switch";

export function SwitchCallsOnChangeWithTheDemo() {
  return (<Switch
  defaultChecked
  checkedChildren="On"
  unCheckedChildren="Off"
/>);
}

Preview

Loading disables input and applies loading class

test-backed

Switch scenario from the component test coverage: loading disables input and applies loading class.

Source

import "@duskmoon-dev/components/styles.css";
import { Switch } from "@duskmoon-dev/components/switch";

export function SwitchLoadingDisablesInputAndDemo() {
  return (<Switch
  defaultChecked
  checkedChildren="On"
  unCheckedChildren="Off"
/>);
}

Applies size and color classes

test-backed

Switch scenario from the component test coverage: applies size and color classes.

Source

import "@duskmoon-dev/components/styles.css";
import { Switch } from "@duskmoon-dev/components/switch";

export function SwitchAppliesSizeAndColorDemo() {
  return (<Switch
  defaultChecked
  checkedChildren="On"
  unCheckedChildren="Off"
/>);
}

Preview

Renders checked and unchecked children

test-backed

Switch scenario from the component test coverage: renders checked and unchecked children.

Source

import "@duskmoon-dev/components/styles.css";
import { Switch } from "@duskmoon-dev/components/switch";

export function SwitchRendersCheckedAndUncheckedDemo() {
  return (<Switch
  defaultChecked
  checkedChildren="On"
  unCheckedChildren="Off"
/>);
}

Preview

Sunshine Theme

Moonlight Theme

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">
  <Switch
  defaultChecked
  checkedChildren="On"
  unCheckedChildren="Off"
/>
</div>

<div data-theme="moonlight">
  <Switch
  defaultChecked
  checkedChildren="On"
  unCheckedChildren="Off"
/>
</div>

API

The API reference below lists every parsed exported type or interface for Switch. Start with `checked`, `defaultChecked`, `onChange`, `disabled` for common usage.

Types: packages/components/src/components/switch/Switch.types.ts Scenarios: packages/components/src/components/switch/Switch.test.tsx

Prop	Type	Required	Description
`checked`	`boolean`	No	checked configures Switch.
`defaultChecked`	`boolean`	No	defaultChecked configures Switch.
`onChange`	`(checked: boolean, event: SwitchChangeEvent) => void`	No	onChange configures Switch.
`disabled`	`boolean`	No	disabled configures Switch.
`loading`	`boolean`	No	loading configures Switch.
`size`	`SwitchSize`	No	size configures Switch.
`color`	`SwitchColor`	No	color configures Switch.
`checkedChildren`	`ReactNode`	No	checkedChildren configures Switch.
`unCheckedChildren`	`ReactNode`	No	unCheckedChildren configures Switch.
`className`	`string`	No	className configures Switch.

SwitchSize type

"sm" | "md" | "lg"

SwitchColor type

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

SwitchChangeEvent type

ChangeEvent<HTMLInputElement>