Data Entryduskmoonimplemented8 demos

ColorPicker

ColorPicker captures theme colors, brand swatches, or user-selected color values.

Import@duskmoon-dev/components/color-picker

9API sections

25documented props

6behavior scenarios

Key API

valuedefaultValueformatpresetstriggeropen

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

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

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

ThemeThe 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

ColorPicker is most often configured through `value`, `defaultValue`, `format`, `presets`.

Covered behavior

Renders value, size, format, and text

Feature Demos

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

Preview

#1677ff

Basic usage

authored

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

Source

import "@duskmoon-dev/components/styles.css";
import { ColorPicker } from "@duskmoon-dev/components/color-picker";

export function Example() {
  return (<ColorPicker
  defaultValue="#1677ff"
  size="large"
  format="hex"
  showText
  onChange={(value, css) => console.log(value, css)}
/>);
}

Preview

#1677ff

Renders value, size, format, and text

test-backed

ColorPicker scenario from the component test coverage: renders value, size, format, and text.

Source

import "@duskmoon-dev/components/styles.css";
import { ColorPicker } from "@duskmoon-dev/components/color-picker";

export function ColorPickerRendersValueSizeFormatDemo() {
  return (<ColorPicker
  defaultValue="#1677ff"
  size="large"
  format="hex"
  showText
  onChange={(value, css) => console.log(value, css)}
/>);
}

Preview

#1677ff

Supports uncontrolled open and input changes

test-backed

ColorPicker scenario from the component test coverage: supports uncontrolled open and input changes.

Source

import "@duskmoon-dev/components/styles.css";
import { ColorPicker } from "@duskmoon-dev/components/color-picker";

export function ColorPickerSupportsUncontrolledOpenAndDemo() {
  return (<ColorPicker
  defaultValue="#1677ff"
  size="large"
  format="hex"
  showText
  onChange={(value, css) => console.log(value, css)}
/>);
}

Preview

#1677ff

Supports presets and showText render function

test-backed

ColorPicker scenario from the component test coverage: supports presets and showtext render function.

Source

import "@duskmoon-dev/components/styles.css";
import { ColorPicker } from "@duskmoon-dev/components/color-picker";

export function ColorPickerSupportsPresetsAndShowTextDemo() {
  return (<ColorPicker
  defaultValue="#1677ff"
  size="large"
  format="hex"
  showText
  onChange={(value, css) => console.log(value, css)}
/>);
}

Preview

#1677ff

Supports format changes and hover trigger

test-backed

ColorPicker scenario from the component test coverage: supports format changes and hover trigger.

Source

import "@duskmoon-dev/components/styles.css";
import { ColorPicker } from "@duskmoon-dev/components/color-picker";

export function ColorPickerSupportsFormatChangesAndDemo() {
  return (<ColorPicker
  defaultValue="#1677ff"
  size="large"
  format="hex"
  showText
  onChange={(value, css) => console.log(value, css)}
/>);
}

Preview

#1677ff

Respects disabled state

test-backed

ColorPicker scenario from the component test coverage: respects disabled state.

Source

import "@duskmoon-dev/components/styles.css";
import { ColorPicker } from "@duskmoon-dev/components/color-picker";

export function ColorPickerRespectsDisabledStateDemo() {
  return (<ColorPicker
  defaultValue="#1677ff"
  size="large"
  format="hex"
  showText
  onChange={(value, css) => console.log(value, css)}
/>);
}

Preview

#1677ff

Has package stylesheet selectors for local color picker classes

test-backed

ColorPicker scenario from the component test coverage: has package stylesheet selectors for local color picker classes.

Source

import "@duskmoon-dev/components/styles.css";
import { ColorPicker } from "@duskmoon-dev/components/color-picker";

export function ColorPickerHasPackageStylesheetSelectorsDemo() {
  return (<ColorPicker
  defaultValue="#1677ff"
  size="large"
  format="hex"
  showText
  onChange={(value, css) => console.log(value, css)}
/>);
}

Preview

Sunshine Theme

#1677ff

Moonlight Theme

#1677ff

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">
  <ColorPicker
  defaultValue="#1677ff"
  size="large"
  format="hex"
  showText
  onChange={(value, css) => console.log(value, css)}
/>
</div>

<div data-theme="moonlight">
  <ColorPicker
  defaultValue="#1677ff"
  size="large"
  format="hex"
  showText
  onChange={(value, css) => console.log(value, css)}
/>
</div>

API

The API reference below lists every parsed exported type or interface for ColorPicker. Start with `value`, `defaultValue`, `format`, `presets` for common usage.

Types: packages/components/src/components/color-picker/ColorPicker.types.tsScenarios: packages/components/src/components/color-picker/ColorPicker.test.tsx

ColorPickerPropsinterface extends Omit< ComponentPropsWithoutRef<"div">, "children" | "defaultValue" | "onChange" >

Prop	Type	Required	Description
`value`	`ColorValue`	No	value configures ColorPicker.
`defaultValue`	`ColorValue`	No	defaultValue configures ColorPicker.
`format`	`ColorPickerFormat`	No	format configures ColorPicker.
`presets`	`ColorPreset[]`	No	presets configures ColorPicker.
`trigger`	`ColorPickerTrigger`	No	trigger configures ColorPicker.
`open`	`boolean`	No	open configures ColorPicker.
`defaultOpen`	`boolean`	No	defaultOpen configures ColorPicker.
`disabled`	`boolean`	No	disabled configures ColorPicker.
`showText`	`boolean \| ((color: string) => ReactNode)`	No	showText configures ColorPicker.
`size`	`ColorPickerSize`	No	size configures ColorPicker.
`panelRender`	`(panel: ReactNode) => ReactNode`	No	panelRender configures ColorPicker.
`onChange`	`(value: ColorValue, css: string) => void`	No	onChange configures ColorPicker.
`onChangeComplete`	`(value: ColorValue, css: string) => void`	No	onChangeComplete configures ColorPicker.
`onFormatChange`	`(format: ColorPickerFormat) => void`	No	onFormatChange configures ColorPicker.
`onOpenChange`	`(open: boolean) => void`	No	onOpenChange configures ColorPicker.

RGBColorinterface

Prop	Type	Required	Description
`r`	`number`	Yes	r configures ColorPicker.
`g`	`number`	Yes	g configures ColorPicker.
`b`	`number`	Yes	b configures ColorPicker.
`a`	`number`	No	a configures ColorPicker.

HSBColorinterface

Prop	Type	Required	Description
`h`	`number`	Yes	h configures ColorPicker.
`s`	`number`	Yes	s configures ColorPicker.
`b`	`number`	Yes	b configures ColorPicker.
`a`	`number`	No	a configures ColorPicker.

ColorPresetinterface

Prop	Type	Required	Description
`label`	`ReactNode`	No	label configures ColorPicker.
`colors`	`ColorValue[]`	Yes	colors configures ColorPicker.

ColorPickerFormattype

"hex" | "rgb" | "hsb"

ColorPickerTriggertype

"hover" | "click"

ColorPickerSizetype

"small" | "middle" | "large" | "sm" | "md" | "lg"

ColorValuetype

string | RGBColor | HSBColor

ColorPickerComponenttype

ForwardRefExoticComponent< ColorPickerProps & RefAttributes<HTMLDivElement> >