ColorPicker

A color picker component which allows the user to select a color from a list of pre-defined colors or freely select one color via the Hue and Saturation. It receives a color string in HEX format and outputs an HEX formatted color.

Source Code

uikit-react-core

Region customization

You can configure the following Color Picker regions:

The recommended colors region, via the recommendedColors array and recommendedColorsPosition;
The custom colors picker visibility, via showCustomColors;
The saved colors region, via the showSavedColors and savedColorsValue or defaultSavedColorsValue (uncontrolled).

<HvColorPicker
  defaultValue="#F6941E"
  showCustomColors
  showSavedColors
  className="w-fit"
  defaultSavedColorsValue={["#95A", "#E95", "#8BA", "#759"]}
  recommendedColors={["#F00", "#0F0", "#00F", "#FF0", "#0FF", "#F0F"]}
  recommendedColorsPosition="top"
/>

<HvColorPicker
  defaultValue="#F6941E"
  showCustomColors
  showSavedColors
  className="w-fit"
  defaultSavedColorsValue={["#95A", "#E95", "#8BA", "#759"]}
  recommendedColors={["#F00", "#0F0", "#00F", "#FF0", "#0FF", "#F0F"]}
  recommendedColorsPosition="top"
/>

Controlled

The value of the Color Picker can be controlled via the value/onChange props. The value can also be read from onChangeComplete, for a throttled value.

import { useState } from "react";


export default function Demo() {
  const [color, setColor] = useState("#95AFE8");
  const [finalColor, setFinalColor] = useState("#95AFE8");


  return (
    <div
      className="flex justify-center font-bold size-240px p-md"
      style={{ backgroundColor: finalColor }}
    >
      <HvColorPicker
        aria-label="Color"
        showSavedColors={false}
        value={color}
        onChange={setColor}
        onChangeComplete={setFinalColor}
      />
    </div>
  );
}

import { useState } from "react";

export default function Demo() {
  const [color, setColor] = useState("#95AFE8");
  const [finalColor, setFinalColor] = useState("#95AFE8");

  return (
    <div
      className="flex justify-center font-bold size-240px p-md"
      style={{ backgroundColor: finalColor }}
    >
      <HvColorPicker
        aria-label="Color"
        showSavedColors={false}
        value={color}
        onChange={setColor}
        onChangeComplete={setFinalColor}
      />
    </div>
  );
}

HvFormElement

ColorPicker

Region customization

Controlled

Related components