ComponentsCore

Color Field

A color field allows users to adjust the hue of an HSL or HSB color value on a circular track.

Example

Installation

$npx libravelui@latest add color-field

Anatomy

import { ColorField } from "@/components/ui/core/color-field";
import { Label, Input } from "@/components/ui/core/field";
<ColorField>
  <Label>Color</Label>
  <Input placeholder="#155DFC" />
</ColorField>

Controlled

Control the color field value using external state. This is useful when the color value needs to stay in sync with form state or application logic.

With Picker

Use a color field together with a color picker. This lets users input a color value directly or choose it visually from the picker.

Props

Loading types…

Edit on GitHub

Color Area

A color area allows users to adjust two channels of an RGB, HSL or HSB color value against a two-dimensional gradient background.

Color Picker

A ColorPicker synchronizes a color value between multiple React Aria color components. It simplifies building color pickers with customizable layouts via composition.