ColorPicker

A color picker component that allows users to select colors with preset options and custom color input.

Basic Usage

Selected color: #3b82f6

import { ColorPicker } from "@akitectio/aki-ui";
import { useState } from "react";

export default function ColorPickerExample() {
  const [color, setColor] = useState('#3b82f6');

  return (
    <div className="space-y-4">
      <ColorPicker 
        value={color} 
        onChange={setColor} 
        placeholder="Select color" 
      />
      <div className="text-sm text-gray-600">
        Selected color: <span className="font-mono">{color}</span>
      </div>
    </div>
  );
}

Sizes

Small

Medium

Large

import { ColorPicker } from "@akitectio/aki-ui";

export default function ColorPickerSizes() {
  return (
    <div className="flex items-center space-x-6">
      <ColorPicker value="#ef4444" size="sm" onChange={setColor} />
      <ColorPicker value="#22c55e" size="md" onChange={setColor} />
      <ColorPicker value="#8b5cf6" size="lg" onChange={setColor} />
    </div>
  );
}

Custom Preset Colors

import { ColorPicker } from "@akitectio/aki-ui";

export default function CustomPresetColors() {
  const customColors = [
    '#ff6b6b', '#4ecdc4', '#45b7d1', '#96ceb4', '#ffeaa7',
    '#dda0dd', '#ffb3ba', '#ffdfba', '#ffffba', '#baffc9'
  ];

  return (
    <ColorPicker
      value="#ff6b6b"
      onChange={setColor}
      presetColors={customColors}
    />
  );
}

Without Preset Colors

import { ColorPicker } from "@akitectio/aki-ui";

export default function NoPresets() {
  return (
    <ColorPicker
      value="#2563eb"
      onChange={setColor}
      showPresets={false}
      placeholder="Select custom color"
    />
  );
}

Disabled State

ColorPicker is disabled

import { ColorPicker } from "@akitectio/aki-ui";

export default function DisabledColorPicker() {
  return (
    <ColorPicker
      value="#6b7280"
      disabled
      placeholder="Cannot select color"
      onChange={setColor}
    />
  );
}

Multiple ColorPickers

Primary Color

Secondary Color

Accent Color

Preview Theme Colors

import { ColorPicker } from "@akitectio/aki-ui";
import { useState } from "react";

export default function MultipleColorPickers() {
  const [primaryColor, setPrimaryColor] = useState('#3b82f6');
  const [secondaryColor, setSecondaryColor] = useState('#10b981');
  const [accentColor, setAccentColor] = useState('#f59e0b');

  return (
    <div className="space-y-6">
      <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
        <div>
          <label className="block text-sm font-medium text-gray-700 mb-2">
            Primary Color
          </label>
          <ColorPicker
            value={primaryColor}
            onChange={setPrimaryColor}
            placeholder="Select primary color"
          />
        </div>
        <div>
          <label className="block text-sm font-medium text-gray-700 mb-2">
            Secondary Color
          </label>
          <ColorPicker
            value={secondaryColor}
            onChange={setSecondaryColor}
            placeholder="Select secondary color"
          />
        </div>
        <div>
          <label className="block text-sm font-medium text-gray-700 mb-2">
            Accent Color
          </label>
          <ColorPicker
            value={accentColor}
            onChange={setAccentColor}
            placeholder="Select accent color"
          />
        </div>
      </div>

      <div className="p-4 rounded-lg border-2 space-y-2" style={{ borderColor: primaryColor }}>
        <h3 className="font-semibold" style={{ color: primaryColor }}>
          Preview Theme Colors
        </h3>
        <div className="flex space-x-2">
          <div
            className="w-8 h-8 rounded"
            style={{ backgroundColor: primaryColor }}
            title={`Primary: ${primaryColor}`}
          />
          <div
            className="w-8 h-8 rounded"
            style={{ backgroundColor: secondaryColor }}
            title={`Secondary: ${secondaryColor}`}
          />
          <div
            className="w-8 h-8 rounded"
            style={{ backgroundColor: accentColor }}
            title={`Accent: ${accentColor}`}
          />
        </div>
      </div>
    </div>
  );
}

API Reference

Prop	Type	Default	Description
value	string	'#3b82f6'	Current color value in hex format
onChange	(color: string) => void	-	Callback when color changes
disabled	boolean	false	Whether the component is disabled
className	string	''	Additional CSS classes
placeholder	string	'Select color'	Placeholder text for the button
presetColors	string[]	DEFAULT_PRESET_COLORS	Array of preset color values
showPresets	boolean	true	Whether to show preset colors
size	'sm' \| 'md' \| 'lg'	'md'	Size of the color picker button
labels	object		Custom labels for internationalization

Labels Object Structure

interface Labels {
  customColor?: string;        // Default: "Custom Color"
  presetColors?: string;       // Default: "Preset Colors"
  invalidHexMessage?: string;  // Default: "Please enter a valid hex color (e.g., #FF0000)"
  selectColor?: string;        // Default: "Select color"
  cancel?: string;             // Default: "Cancel"
  select?: string;             // Default: "Select"
}

Internationalization

Vietnamese Language Example

import { ColorPicker } from "@akitectio/aki-ui";

export default function VietnameseColorPicker() {
  const [color, setColor] = useState('#e11d48');

  return (
    <ColorPicker
      value={color}
      onChange={setColor}
      placeholder="Chọn màu"
      labels={{
        customColor: 'Màu tùy chỉnh',
        presetColors: 'Màu có sẵn',
        invalidHexMessage: 'Vui lòng nhập mã màu hex hợp lệ (ví dụ: #FF0000)',
        selectColor: 'Chọn màu',
        cancel: 'Hủy',
        select: 'Chọn',
      }}
    />
  );
}

Internationalization Support

The ColorPicker component now supports custom labels for different languages. You can customize all text displayed in the component interface by providing a labels object with your preferred translations.

Features

• Preset Colors: Quick selection from predefined color palette
• Custom Color: Select any color using color picker or hex input
• Multiple Sizes: Support for small, medium, and large sizes
• Validation: Validates hex color format
• Internationalization: Customizable labels for different languages
• Accessible: Keyboard navigation and screen reader support
• Responsive: Adapts to different screen sizes
• TypeScript: Full TypeScript support with proper types