Swatch picker

API

Generated CoreAI prop summaries, not replacement type declarations. Most native DOM/event and ARIA props are omitted. ? means optional; JSDoc shows defaults, deprecations, and conditional requirements. Defaults assume the standard CoreAI provider.

SwatchPicker API

interface SwatchPickerProps {
  as?: "div";

  children?: any;

  className?: string;

  /**
   * Default selected value
   */
  defaultSelectedValue?: string;

  /**
   * Sets the focus behavior for the SwatchPicker.
   *
   * `arrow`
   * This behavior will cycle through all elements inside of the SwatchPicker when pressing the Arrow key.
   *
   * `tab`
   * This behavior will cycle through all elements inside of the SwatchPicker when pressing the Tab key.
   * @default 'arrow'
   */
  focusMode?: "tab" | "arrow";

  /**
   * Whether SwatchPicker is row or grid
   */
  layout?: "grid" | "row";

  /**
   * Triggers a callback when the value has been changed
   */
  onSelectionChange?: EventHandler<SwatchPickerOnSelectionChangeData>;

  ref?: Ref<HTMLDivElement>;

  /**
   * Controlled selected value
   */
  selectedValue?: string;

  /**
   * Swatch shape.
   * @default 'rounded'
   */
  shape?: "circular" | "rounded" | "square";

  /**
   * Swatch size
   */
  size?: "small" | "medium" | "large" | "extra-small";

  /**
   * Spacing between swatches
   */
  spacing?: "small" | "medium";

  style?: CSSProperties;
}

ColorSwatch API

ColorSwatch component is used to render a colors, icons and gradients.

interface ColorSwatchProps {
  as?: "button";

  /**
   * Border color when contrast is low
   */
  borderColor?: string;

  children?: any;

  className?: string;

  /**
   * Swatch color
   */
  color?: string;

  /**
   * Whether the swatch is disabled
   */
  disabled?: boolean;

  disabledIcon?: WithSlotShorthandValue<{ as?: "span"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & { ref?: ((instance: HTMLSpanElement | null) => void) | RefObject<HTMLSpanElement> | null; }, "children"> & { children?: any; }> | null | undefined;

  icon?: WithSlotShorthandValue<{ as?: "span"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & { ref?: ((instance: HTMLSpanElement | null) => void) | RefObject<HTMLSpanElement> | null; }, "children"> & { children?: any; }> | null | undefined;

  ref?: Ref<HTMLButtonElement>;

  /**
   * Swatch shape
   */
  shape?: "circular" | "rounded" | "square";

  /**
   * Swatch size
   */
  size?: "small" | "medium" | "large" | "extra-small";

  style?: CSSProperties;

  /**
   * Swatch value
   */
  value?: string | number | readonly string[];
}

EmptySwatch API

EmptySwatch component is used for adding new color swatches.

interface EmptySwatchProps {
  as?: "button";

  children?: any;

  className?: string;

  ref?: Ref<HTMLButtonElement>;

  /**
   * Swatch shape
   */
  shape?: "circular" | "rounded" | "square";

  /**
   * Swatch size
   */
  size?: "small" | "medium" | "large" | "extra-small";

  style?: CSSProperties;
}

ImageSwatch API

ImageSwatch component is used to render an images, patterns and textures.

interface ImageSwatchProps {
  as?: "button";

  children?: any;

  className?: string;

  ref?: Ref<HTMLButtonElement>;

  /**
   * Swatch shape
   */
  shape?: "circular" | "rounded" | "square";

  /**
   * Swatch size
   */
  size?: "small" | "medium" | "large" | "extra-small";

  /**
   * Swatch color
   */
  src: string;

  style?: CSSProperties;

  /**
   * Swatch value
   */
  value?: string | number | readonly string[];
}

SwatchPickerRow API

SwatchPickerRow component is used to render a row of swatches.

interface SwatchPickerRowProps {
  as?: "div";

  children?: any;

  className?: string;

  ref?: Ref<HTMLDivElement>;

  style?: CSSProperties;
}