Color Picker

An interactive color picker for selecting HEX or RGB color values. Used by RenderFormFields for ColumnTypeEnum.COLOR fields.

Import


import { ColorPicker } from "@phpcreation/frontend-components-react-nextjs-bundle/components/ColorPicker";

Props

Prop	Type	Default	Description
`value`	`string`	`""`	Controlled color value (HEX)
`onChange`	`(value: string) => void`	—	Change handler
`disabled`	`boolean`	`false`	Disable the picker
`className`	`string`	—	Additional CSS classes

Usage


import { ColorPicker } from "...";
 
<ColorPicker
  value={color}
  onChange={setColor}
/>

With React Hook Form


<FormField
  control={form.control}
  name="brandColor"
  render={({ field }) => (
    <FormItem>
      <FormLabel>Brand Color</FormLabel>
      <FormControl>
        <ColorPicker value={field.value} onChange={field.onChange} />
      </FormControl>
      <FormMessage />
    </FormItem>
  )}
/>

Form (RHF)
Render Form Fields
Input

Color Picker

Import

Props

Usage

With React Hook Form

Related