Skip to content
MIZU.

ColorPicker

Named swatches and a native custom-color dialog, with the hex value always visible.

Live — this one is real

Signal color

Usage

import { useState } from "react";
import { ColorPicker } from "mizu-ui";

export function Example() {
  const [value, setValue] = useState("#ff4d1c");
  return (
    <ColorPicker label="Signal color" value={value} onValueChange={setValue} />
  );
}

Source & setup

Import mizu-ui/styles.css once. Fonts are optional via mizu-ui/fonts.css. Override --mizu-* tokens or use className for local styling. Uses native React and CSS; install the package peers for root imports.

Inspect forms/Selection.tsx

Source is included in the npm package under src/forms/Selection.tsx.

Open full source ↗

Props

PropTypeDefaultDescription
value / onValueChangestring / function—Six-digit hex color and callback.
swatchesstring[]—Optional hex choices.

Accessibility

Swatches have color names/values and pressed state; a labelled native color input supplies custom selection.

Motion

CSS transitions explain state changes. Reduced motion removes travel.

Works alongside

FormFieldTextFieldTextAreaSelectField