dotUI

Color Field

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

<ColorField 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>

Examples

Enter a background color.
Please fill out this field.

Current color value: #7F007F

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
DOMRenderFunction<"div", ColorFieldRenderProps>
Color | null | string
Color | null | string
function

Last updated on 6/4/2026