ColorPicker

Compact colour picker — a native swatch chip that opens the OS picker, a hex input beside it, and a grid of preset swatches below. Use it for theme settings, brand editors, custom badge colours.

Accent

--bwo-accent: #ff481f

Usage

import { ColorPicker } from '@bwo-ui/react';

const [accent, setAccent] = useState('#ff481f');

<ColorPicker
  label="Accent"
  value={accent}
  onValueChange={setAccent}
  swatches={['#ff481f', '#7463ff', '#16a34a', '#0ea5e9']}
/>

Props

Prop	Type	Default	Description
`value`	`string`	—	Controlled hex value.
`defaultValue`	`string`	`'#ff481f'`	Uncontrolled default.
`onValueChange`	`(color: string) => void`	—	Fires with a normalised hex.
`swatches`	`string[]`	—	Preset palette rendered as the swatch grid.
`showNative`	`boolean`	`true`	Show the OS colour picker on the chip.
`showHex`	`boolean`	`true`	Show the hex input.
`label`	`ReactNode`	—	Inline label rendered above the field.