<ColorField>
<Label>Color</Label>
<Input />
</ColorField>npx shadcn@latest add @dotui/color-fieldUse 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>Use the controls below to experiment with different color field props and see the live preview and code update.
<ColorField defaultValue="#ff0000">
<Label>Color</Label>
<Input />
</ColorField>A color field allows users to edit a hex color or individual color channel value.
| Prop | Type | Default | |
|---|---|---|---|
ColorChannel | — | ||
ColorSpace | — | ||
boolean | — | ||
boolean | — | ||
boolean | — | ||
ReactNode | function | — | ||
string | Color | null | — | ||
string | Color | null | — | ||
function | — | ||
Last updated on 1/13/2026
Bringing singularity to the web.
Built with passion by @mehdibha.