Form fields·loomora/ColorField
ColorField
A color input that renders its own picker popover (saturation, hue, opacity, presets) instead of the native browser color dialog.
Interactive live playground
Tweak props, change states, and see the live component respond in real time.
How to call
Import directly from the Loomora package root. For projects without Tailwind CSS, ensure loomora/dist/index.css is imported once in your root layout.
import { ColorField } from 'loomora'
<ColorField label="Brand color" alpha allowEmpty properties={{ value, setValue, name: 'brand' }} />API reference
Important public props and how they affect rendering.
| Prop | Type | Default | Description |
|---|---|---|---|
| properties.value | string | — | Hex color (#rrggbb or #rrggbbaa). |
| properties.setValue | (value: string) => void | — | Called with the normalized hex value. |
| properties.name | string | — | Submits the value via a hidden input. |
| presets | string[] | curated palette | Preset swatches. |
| alpha | boolean | false | Enables the opacity slider. |
| allowEmpty | boolean | false | Shows a clear button. |