Color Field

A color field allows users to adjust a hex color or fine-tune individual color channels, offering precise control over color customization.

Installation

CLI

Manual

In the terminal, run the following command to begin:

npx hq-kit add color-field

Preview

Code

Default

Readonly

Invalid

Disabled

Preview

Code

Color

Preview

Code

Color

color: {"red":250,"green":250,"blue":250,"alpha":1}

You can typically click the color swatch to open the color picker. To disable this feature, set enableColorPicker to false.

<ColorField withPicker={false} />