Skip to content

Color

Interface

export type IColorTypeValue = string | null;
 
export interface IColorField extends CommonField {
    type: 'color';
    options?: {
        label?: string;
        palette?: string[];
        customColors?: boolean;
    };
    private?: () => Promise<IColorTypeValue>;
    render?: (v: IColorTypeValue) => JSX.Element;
    validation?: Validation<IColorTypeValue>;
}

Example

Basic Color Field

{
  type: 'color',
  name: 'YOUR_PATH',
  validation: z.string().optional()
}

Custom color and palette

{
  type: 'color',
  name: 'YOUR_PATH',
  options: {
    label: 'Select a color',
    palette: [
      '#FF0000',
      '#00FF00',
      '#0000FF',
      '#FFFF00',
      '#FF00FF',
      '#00FFFF',
      '#FFFFFF',
      '#000000'
    ]
  },
  validation: z.string().optional()
}

Just palette

{
  type: 'color',
  name: 'YOUR_PATH',
  options: {
    label: 'Select a color',
    palette: [
      '#FF0000',
      '#00FF00',
      '#0000FF',
      '#FFFF00',
      '#FF00FF',
      '#00FFFF',
      '#FFFFFF',
      '#000000'
    ]
    customColors: false
  },
  validation: z.string().optional()
}