/ux
Components/Inputs/ColorInput

ColorInput

Inputs

Hex / HSL color picker with a swatch preview.

Full-featured color picker with an HSV canvas, hue slider, hex/rgb/hsl format output, and optional swatch palette. EyeDropper API support is feature-detected and shown only when available.

Usage

import { ColorInput } from "nosible-ux"

export default function Example() {
  return (
    <ColorInput
      label="Signal highlight color"
      defaultValue="#26D07C"
    />
  )
}

Examples

With swatches

Format output

Accessibility

The trigger input shows the hex value. Canvas interactions are pointer-based; keyboard users can type directly into the hex input field.

Props

Name TypeDefaultDescription
defaultValue
string | undefined—Uncontrolled initial value.
disabled
boolean | undefined—
error
string | undefined—Validation error text.
format
ColorFormat | undefined"hex"Color format for the text field and onChange value.
label
string | undefined—Label rendered above.
onChange
((value: string) => void) | undefined—Called with the formatted color string on change.
swatches
string[] | undefined—Preset swatches shown in the panel.
value
string | undefined—Controlled value (hex internally).
withEyeDropper
boolean | undefinedtrueShow the EyeDropper button (feature-detected).
withPicker
boolean | undefinedtrueShow the HSV canvas picker.
← All ComponentsGetting Started →