Color Field

Installation

Install the component via the CLI in one command.

npx shadcn@latest add @intentui/color-field

Composed components

Manual installation

Use this approach if you prefer to install and wire up the component yourself instead of using the CLI.

npm install 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>

Examples

Prefix

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

Suffix

A color field can also have a suffix.

Controlled

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

Disabled

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

Validation

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

Component API

ColorField

The ColorField component lets users enter a color value.

See the React Aria for the full API reference.