# Color Field (/forms/color-field)





<ComponentPreview name="color-field-preskok-demo" description="Color field with inline picker and hex value." />

## Installation [#installation]

```bash
npx shadcn@latest add @preskok/color-field
```

## Usage [#usage]

```tsx
import { ColorField } from "@/components/ui/preskok-ui/color-field"

export function ColorFieldExample() {
  return (
    <ColorField
      label="Brand color"
      placeholder="#2563eb"
      defaultValue="#2563eb"
      description="Choose a hex color."
    />
  )
}
```