NumberField

Anatomy

import { NumberField } from "chroma-panel";

Only inside a panel

This is one of the parts the built-in modes are made of. It reads the colour through usePanel(), so it only works inside a ChromaPanel — typically in a custom mode. For a picker outside the panel, use the store and hooks.

API reference

Props

Prop	Type	Default	Description
label*	string	—	Accessible name for the field.
min*	number	—	Lowest value accepted.
max*	number	—	Highest value accepted.
step	number	1	Arrow-key increment.
read*	(color: Hsva) => number	—	Pulls this channel's value out of the current colour.
write*	(value: number, current: Hsva) => Hsva	—	Merges a typed value back into the colour.
className	string	—	Class on the field.