Color Field

A color field allows users to edit a color value using a text field.

<ColorField className="max-w-xs" defaultValue="#ff0000">
  <Label>Color</Label>
  <Input />
</ColorField>

Installation

npx shadcn@latest add @dotui/color-field

Usage

Use color fields to allow users to edit a color value using a text field.

import { ColorField } from '@/components/ui/color-field'
import { Label } from '@/components/ui/field'
import { Input } from '@/components/ui/input'
<ColorField defaultValue="#ff0000">
  <Label>Color</Label>
  <Input />
</ColorField>

Anatomy

A ColorField wraps a Label and an Input. To attach an icon, replace the bare Input with an InputGroup and place an InputGroupAddon on either side.

import { ColorField } from '@/components/ui/color-field'
import { Label } from '@/components/ui/field'
import { Input, InputGroup, InputGroupAddon } from '@/components/ui/input'
;<ColorField>
  <Label />
  <InputGroup>
    <InputGroupAddon />
    <Input />
  </InputGroup>
</ColorField>

Value

The value is a Color object. Pass a hex string to defaultValue for uncontrolled state, or control it with value + onChange using parseColor, and read it back with color.toString('hex').

import { type Color, parseColor } from 'react-aria-components'

const [color, setColor] = React.useState<Color | null>(parseColor('#7f007f'))

<ColorField value={color} onChange={setColor}>
  <Label>Color</Label>
  <Input />
</ColorField>

Channels

Set colorSpace and channel to bind the field to a single channel of a color space instead of the full hex value.

<ColorField colorSpace="hsl" channel="hue" value={color} onChange={setColor}>
  <Label>Hue</Label>
  <Input />
</ColorField>

Examples

Basic Color Field

With Icon Addon

HSL Channel Controls

API Reference

A color field allows users to edit a hex color or individual color channel value.

PropType
ColorChannel
ReactNode | function
ColorSpace
boolean
boolean
boolean
Color | null | string
Color | null | string
function

Last updated on 7/9/2026