Core

Color Field

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

Example

Usage

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.

Usage

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.

Usage

Props

Loading types…

Edit on GitHub

Last updated on

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.