On this page
Props
<ColorField defaultValue="#ff0000">
<Label>Color</Label>
<Input />
</ColorField>Installation
npm
pnpm
yarn
bun
npx shadcn@latest add @dotui/color-fieldUsage
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.
| Prop | Type | Default | |
|---|---|---|---|
ColorChannel | — | ||
ReactNode | function | — | ||
ColorSpace | — | ||
boolean | — | ||
boolean | — | ||
boolean | — | ||
Color | null | string | — | ||
Color | null | string | — | ||
function | — | ||
Last updated on 6/16/2026