React 表单颜色选择输入框

ColorInput 是一个 React 颜色输入框：一个显示当前颜色的色块按钮，点击后在弹出层中打开完整的选择器。当颜色只是众多字段之一时就适合用它，比如表单里的一项设置、工具栏里的一个按钮。选择器平时不占地方，有人需要时才打开。

弹出层里放的是 ChromaPanel，所以那一页讲的内容在这里同样适用。它打开的浮层就是导出的 Popover，在小屏幕上会变成底部面板。给 ColorInput 设置 name，它还会渲染一个隐藏的 input，让颜色按你设置的 format 随所在的表单一起提交。

结构

import { ColorInput } from "chroma-panel";
 
<ColorInput defaultValue="#3366cc" onChangeComplete={(c) => save(c.hex)} />;

ColorInput 支持 ChromaPanel 的全部 prop，另外还有下面列出的弹出层和表单相关 prop。它也可以像 <input> 一样直接放进表单，详见表单。

演示

#3366cc

color-input-demo.tsx

"use client";
 
import { ColorInput } from "chroma-panel";
import { useState } from "react";
 
export default function ColorInputDemo() {
  const [color, setColor] = useState("#3366cc");
 
  return (
    <div className="flex items-center gap-3">
      <ColorInput
        value={color}
        onChange={(c) => setColor(c.hex)}
        injectStyles={false}
      />
      <span className="font-mono text-sm text-muted-foreground">{color}</span>
    </div>
  );
}

API 参考

Props

Prop	Type	Default	Description
open	boolean	—	Whether the popover is open, when you control it.
defaultOpen	boolean	false	Whether the popover starts open.
onOpenChange	(open: boolean) => void	—	Fires when the popover opens or closes, however it was triggered.
name	string	—	Submits with the surrounding form under this name. The submitted value is the string in whichever `format` you set.
form	string	—	Associates the control with a form by id, for when it cannot be nested inside one.
required	boolean	false	Marks the control invalid while it has no value.
readOnly	boolean	false	Shows the color but does not allow changing it. Unlike `disabled`, the value still submits.
autoComplete	string	—	Passed through to the hidden input backing the control.
validationBehavior	"native" \| "aria"	'native'	`'native'` uses the browser's own validation bubble. `'aria'` reports the message through ARIA only, for when you render your own.
id	string	—	Id on the trigger, so your own `<label htmlFor>` can point at it.
aria-label	string	'Choose a color'	Accessible name for the trigger, used when there is no visible label.
triggerClassName	string	—	Class on the swatch button only. Equivalent to `classNames.trigger`.
value	string \| Hsva	—	The color, when you keep it in your own state.Inherited from ChromaPanel.
defaultValue	string \| Hsva	'#3366cc'	The starting color, when you want the panel to keep it.Inherited from ChromaPanel.
onChange	(color: ColorChangeResult) => void	—	Fires continuously while a drag is in progress.Inherited from ChromaPanel.
onChangeComplete	(color: ColorChangeResult) => void	—	Fires once when the drag ends. Use it for saving, undo entries and network calls.Inherited from ChromaPanel.
onValueChange	(color: ColorChangeResult, meta: ColorChangeMeta) => void	—	Fires continuously with interaction metadata, including the change source.Inherited from ChromaPanel.
onValueCommit	(color: ColorChangeResult, meta: ColorChangeMeta) => void	—	Fires once per completed interaction with phase and source metadata.Inherited from ChromaPanel.
modes	readonly (ModeId \| string \| PickerMode)[]	all five	Which tabs appear, in the order you list them.Inherited from ChromaPanel.
mode	string	—	The open tab, when you control it.Inherited from ChromaPanel.
defaultMode	string	first mode	The tab to open on.Inherited from ChromaPanel.
onModeChange	(mode: string) => void	—	Fires when the reader switches tabs.Inherited from ChromaPanel.
format	ColorFormat	'hex'	Sets the `css` string on the change result, and the value a form submits.Inherited from ChromaPanel.
showAlpha	boolean	true	Turn off when opacity is not allowed.Inherited from ChromaPanel.
showEyedropper	boolean	true	Turn off to hide the eyedropper even where it is supported.Inherited from ChromaPanel.
showCopyButton	boolean	true	Show a button that copies the color in the configured format.Inherited from ChromaPanel.
showRecentColors	boolean	true	Turn off in a one-shot picker.Inherited from ChromaPanel.
recentColors	string[]	—	The recent-color history, when you keep it. Persist it yourself to carry the list between sessions.Inherited from ChromaPanel.
defaultRecentColors	string[]	[]	The starting history, when you want the panel to keep it.Inherited from ChromaPanel.
onRecentColorsChange	(colors: string[]) => void	—	Fires with the whole list whenever a color is added to it.Inherited from ChromaPanel.
palettes	ColorPalette[]	built-in set	Replaces the palette swatches with your own.Inherited from ChromaPanel.
pencils	string[]	built-in 120-color grid	Replaces the pencil grid.Inherited from ChromaPanel.
modeProps	Record<string, Record<string, unknown>>	—	Props spread onto one mode's panel, keyed by mode id. Lets a custom mode take props without the panel knowing about it.Inherited from ChromaPanel.
imageOptions	ExtractOptions	—	Shorthand for `modeProps.image.extractOptions`.Inherited from ChromaPanel.
disabled	boolean	false	Makes the panel read-only.Inherited from ChromaPanel.
theme	"dark" \| "light"	system	Forces one theme instead of following the OS.Inherited from ChromaPanel.
showTitleBar	boolean	true	Turn off for an inline panel with no chrome.Inherited from ChromaPanel.
title	string	'Colors'	The title bar text.Inherited from ChromaPanel.
onClose	() => void	—	Fires when the red window control is used. An inline panel has nothing to close, so that control is dimmed until you pass this.Inherited from ChromaPanel.
collapsed	boolean	—	Whether the panel is collapsed to its title bar, when you control it.Inherited from ChromaPanel.
defaultCollapsed	boolean	false	Whether it starts collapsed. Collapsing hides the body with CSS rather than unmounting, so nothing is lost.Inherited from ChromaPanel.
onCollapsedChange	(collapsed: boolean) => void	—	Fires when the yellow window control is used.Inherited from ChromaPanel.
size	PanelSize	—	The panel size, when you control it.Inherited from ChromaPanel.
defaultSize	PanelSize	'default'	The starting size. `'expanded'` widens the panel, and the wheel with it.Inherited from ChromaPanel.
onSizeChange	(size: PanelSize) => void	—	Fires when the green window control is used.Inherited from ChromaPanel.
injectStyles	boolean	true	Turn off when you import `chroma-panel/style.css` yourself, as this site does.Inherited from ChromaPanel.
className	string	—	Class applied to the panel root.Inherited from ChromaPanel.
classNames	ChromaClassNames	—	Classes applied per part.Inherited from ChromaPanel.
style	React.CSSProperties	—	Inline styles on the panel root. Setting the `--cp-*` custom properties here themes a single panel.Inherited from ChromaPanel.
store	ColorStore	—	An external color store, for driving several panels from one color.Inherited from ChromaPanel.

ChromaPanel：同一个选择器，始终可见，不带弹出层
表单：提交、重置和校验颜色值
受控与非受控：把 value、open 或 mode 放在你自己的 state 中
使用 Tailwind 样式：为触发器和面板的各个部分传入 class

ColorInput

结构

演示

API 参考

Props

相关内容