<ColorField>
<Label>Color</Label>
<Input />
</ColorField>pnpm dlx 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.
A color field allows users to edit a hex color or individual color channel value.
| Prop | Type | Default | |
|---|---|---|---|
| — | ||
| — | ||
| — | ||
| — | ||
| — | ||
| — | ||
| — | ||
| — | ||
| — | ||
Last updated on 12/21/2025
Bringing singularity to the web.
Built with passion by @mehdibha.
<Dynamic(ColorField) defaultValue="#ff0000">
<Dynamic(Label)>Color</Dynamic(Label)>
<Dynamic(Input) />
</Dynamic(ColorField)>