ComponentsCore
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-fieldAnatomy
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…
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.