Color picker
Updated
ColorPicker is a color field that opens a 1984 Macintosh window: a pinstriped title bar over swatches, a hex field and the system picker, with the new color above the original. Each pick previews live, and Cancel puts the original back. Like the charts, it takes your theme's ink and paper, light or dark, and needs no Tailwind.
Example
import "@/components/dithercharts/controls.css"
import { ColorPicker } from "@/components/dithercharts/color-picker"
<ColorPicker label="Ink color" defaultValue="#e23838" />
<ColorPicker label="Locked" defaultValue="#009cdf" disabled />Install
Controls install with DitherCharts Pro. See Installation to log in, then import controls.css once, e.g. in your root layout.
npx dithercharts add color-picker
Props
It renders a native element, so every other attribute that element takes passes through.
| Prop | Type | Default | Description |
|---|---|---|---|
| labelrequired | Type ReactNode | Default – | The caption above the field and the window's title; also the field's accessible name. |
| hideLabel | Type boolean | Default false | Keeps the caption for screen readers only. |
| value | Type string | Default – | The color as #rrggbb, for a controlled picker; pair it with onValueChange. |
| defaultValue | Type string | Default "#000000" | The color at first, for an uncontrolled picker. |
| onValueChange | Type (value: string) => void | Default – | Called with each pick while the window is open; Cancel calls it again with the color from before. |
| swatches | Type readonly string[] | Default `MAC_SWATCHES` | The swatch grid, eight to a row. |
| name | Type string | Default – | The form field name; a hidden input carries the value. |
| disabled | Type boolean | Default false | |
| className | Type string | Default – |