Inputs

Color Picker

Select colors with a color wheel, preset swatches, and a hex input field.

With presets + hex input

Selected: #6366f1

Installation

npx benflux-ui add color-picker

Usage

import { ColorPicker } from "@benflux-ui/react"

const [color, setColor] = useState("#6366f1")

<ColorPicker
  value={color}
  onChange={setColor}
  showInput
  presets={["#ef4444", "#f97316", "#eab308", "#22c55e", "#3b82f6", "#8b5cf6"]}
/>

Props

Prop	Type	Default	Description
value	string	—	Controlled hex color value
onChange	(value: string) => void	—	Callback when color changes
showInput	boolean	false	Show a hex input field below the picker
presets	string[]	—	Array of preset hex colors to display as swatches
disabled	boolean	false	Disable the color picker