Basic
A color field allows users to adjust a hex color or manipulate individual color channels.
Preview
Code
Installation
CLI
Manual
npx hq-kit add color-field
Prefix
A color field can include a prefix to provide context or functionality.
Preview
Code
Suffix
A color field can also have a suffix.
Preview
Code
Controlled
Manage the color field in a controlled manner to automatically update the ColorSwatch and display the current color.
Preview
Code
rgba(250, 250, 250, 1)
You can typically click the color swatch to open the color picker. To disable this feature, set
enableColorPicker to false.
<ColorField enableColorPicker={false} />Disabled
You can disable the color field, making it non-interactive.
Preview
Code
Props
The ColorField component includes all standard props from react-aria-components, plus these additional features:
| Property | Type | Optional |
|---|---|---|
| label | string | Yes |
| description | string | Yes |
| errorMessage | string | ((validation: ValidationResult) => string) | Yes |
| placeholder | string | Yes |
| prefix | React.ReactNode | Yes |
| suffix | React.ReactNode | Yes |
| isLoading | boolean | Yes |
| enableColorPicker | boolean | Yes ( default: true) |