Colors

Color Field

A text input for specifying color values, supporting formats like HEX, RGB, and HSL for precise color selection.

ColorField
Color AreaColor Picker

Basic

A color field allows users to adjust a hex color or manipulate individual color channels.

Loading...

Installation

npx shadcn@latest add @intentui/color-field

Composed components

When you install this component via the CLI, it automatically loads all composed components, so you don’t need to add them individually.

This component comes packed with several components to enhance functionality and provide a seamless experience.

fieldcolor swatchcolor picker

Manual installation

npm i react-aria-components

Anatomy

import { ColorField } from "@/components/ui/color-field"
import { Label, Description } from "@/components/ui/field"
import { Input } from "@/components/ui/input"
<ColorField>
  <Label/>
  <Input/>
  <Description/>
</ColorField>

Prefix

A color field can include a prefix to provide context or functionality.

Loading...

Suffix

A color field can also have a suffix.

Loading...

Controlled

Manage the color field in a controlled manner to automatically update the ColorSwatch and display the current color.

Loading...

Disabled

You can disable the color field, making it non-interactive.

Loading...

Validation

In this example, we’ll ensure it’s treated as a strict requirement.

Loading...
Unlock the full power of
Design Intent UI
Build modern web apps faster with 500+ blocks and polished templates crafted for you.
Color Area
Color Picker