Forms

Color picker

A colour picker with real controls: hue, saturation, brightness (and alpha) are `<input type="range">`s with names and spoken values; the hex field is a text input that commits on Enter or blur and reverts what it cannot parse; presets are toggle buttons. The two-dimensional area is a pointer convenience over the same state, hidden from assistive tech because the sliders already say everything it shows.

Client componentSource

Import

import { ColorPicker } from '@the_viveksingh/vivek-ui'

Real controls

Hue, saturation and brightness are range inputs with names and spoken values; the hex field commits on Enter or blur and reverts what it cannot parse; presets are pressed toggles. The 2D area is a pointer convenience over the same state. Emits lower-case hex; accepts #rgb, #rrggbbaa and rgb() on the way in.

Hue, saturation and brightness are real sliders with spoken values; the hex field commits on Enter. Where the browser has an EyeDropper, a button offers it.

The popover variant keeps the panel behind a swatch; alpha adds a slider and eight-digit hex.

<ColorPicker
  label="Brand colour"
  value={brand}
  onValueChange={setBrand}
  presets={['#0f766e', '#1d4ed8', '#7c3aed', '#db2777']}
/>

In a Field, behind a swatch, with alpha

Field injects id, aria-describedby and invalid onto the hex input, so the label and error wire up like any other control. variant="popover" keeps the panel behind a swatch button; alpha adds a slider and eight-digit hex; name posts the value with a plain form.

Hue, saturation and brightness are real sliders with spoken values; the hex field commits on Enter. Where the browser has an EyeDropper, a button offers it.

The popover variant keeps the panel behind a swatch; alpha adds a slider and eight-digit hex.

<Field label="Overlay tint" help="Alpha controls how much of the photo shows through.">
  <ColorPicker variant="popover" alpha name="tint" defaultValue="#11182780" />
</Field>

Props

Generated from the package's own type declarations, so this table cannot drift from the code.

Props for ColorPicker
PropTypeDefaultDescription
valuestring—Hex, `#rrggbb` (or `#rrggbbaa` with `alpha`). Any parseable colour is accepted on the way in.
defaultValuestring——
onValueChange(hex: string) => void—Receives lower-case hex: `#rrggbb`, or `#rrggbbaa` with `alpha`.
alphaboolean—Show an alpha slider and emit eight-digit hex. Default `false`.
presetsstring[]—Swatches to offer under the sliders.
labelstring—Accessible name of the picker. Default `'Colour picker'`.
variant'inline' | 'popover'—`inline` renders the panel in place; `popover` renders a swatch button that opens it. Default `inline`.
size'sm' | 'md'——
namestring—Emits a hidden input so the colour posts with a plain form.
disabledboolean——
invalidboolean—Sets `aria-invalid` on the hex input. Injected by `Field`.
requiredboolean——
eyedropperboolean—Offer the EyeDropper button where the browser supports it. Default `true`.
childrenReactNode—Extra content under the panel — a "Reset" button, a contrast readout.

Every remaining prop is spread onto the root element, so all standard HTML and ARIA attributes work. className and style are merged with the library's own, never replaced, and the ref forwards to the root DOM node.

Rendering