Color Field

Installation

Add the component with the CLI.

npx shadcn@latest add @intentui/color-field

Composed components

Manual installation

Install the dependencies, then copy the component source into your project.

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

Share the color field’s state with ColorSwatch to display the current color.

Disabled

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

Validation

Set isRequired to require a value when the form is submitted.

Component API

ColorField