Founding price: $35, then $79.99 after 23:59 UTC on 4 November, then $79.99
Get ProA text field for colors that parses hex, rgb() and hsl() (and names), shows the result in the format you choose, flags what it cannot read, and exports the color math the rest of the color family shares.
This item has no props to tune. Use the lens above to change theme, density, direction and more.
The module also exports the conversion functions the rest of the color family uses: parseColor, formatColor, toHex, hexToHsva, hsvaToHex, rgbaToHsva, hsvaToRgba, rgbaToHsla.
| Export | Description |
|---|---|
ColorField | The text field. |
parseColor(text) | RGBA | null. Hex, rgb(), hsl(), names. |
formatColor(rgba, format, alpha?) | #hex, rgb() or hsl() text. |
toHex, hexToHsva, hsvaToHex, rgbaToHsva, hsvaToRgba, rgbaToHsla | Conversions. |
| Prop | Type | Default | Description |
|---|---|---|---|
value / onChange | string | - | Any readable color in; the formatted color out. |
format | hex, rgb, hsl | hex | Output and display format. |
alpha | boolean | false | Keep transparency. |
label | ReactNode | - | Visible label. |
invalidMessage | string | A hint with examples | Shown for unreadable text. |
swatch | boolean | true | Preview square inside the field. |
label. The preview square is decorative (aria-hidden).aria-invalid, and the explanation is a role="alert" message linked with aria-describedby.The component ships with a Testing Library test (color-field.test.tsx) that covers: its main behaviour, the keyboard path and the error or empty states.