ColorSwatchPicker

Language

Appearance

Default palette

Without names, screen readers describe each color in the locale.

import { useState } from 'react';
import { ColorSwatchPicker } from '@arbol-ai/ui';

const DefaultExample = () => {
  const [color, setColor] = useState<string | null>(null);
  return <ColorSwatchPicker label="Tag color" onChange={setColor} value={color} />;
};

<DefaultExample />

App palette with a custom color

Color in the agenda

import { useState } from 'react';
import { ColorSwatchPicker } from '@arbol-ai/ui';

const SERVICE_COLORS = [
  { value: '#00877c', name: 'Teal' },
  { value: '#2971c6', name: 'Blue' },
  { value: '#884bc0', name: 'Violet' },
  { value: '#c63c8a', name: 'Pink' },
  { value: '#be8700', name: 'Amber' },
];

const CustomExample = () => {
  const [color, setColor] = useState<string | null>('#2971c6');
  return (
    <ColorSwatchPicker
      allowsCustomColor
      colors={SERVICE_COLORS}
      label="Color in the agenda"
      onChange={setColor}
      value={color}
    />
  );
};

<CustomExample />

Palette keys drawn with theme colors

The app stores a key (blue) and each swatch shows a theme variable, so it follows light and dark mode.

Color of the professional

import { useState } from 'react';
import { ColorSwatchPicker } from '@arbol-ai/ui';

const PROFESSIONAL_COLORS = [
  { value: 'blue', color: 'var(--color-blue-9)', name: 'Blue' },
  { value: 'green', color: 'var(--color-green-9)', name: 'Green' },
  { value: 'amber', color: 'var(--color-amber-9)', name: 'Amber' },
  { value: 'red', color: 'var(--color-red-9)', name: 'Red' },
  { value: 'gray', color: 'var(--color-gray-9)', name: 'Gray' },
];

const KeysExample = () => {
  const [color, setColor] = useState<string | null>('blue');
  return (
    <ColorSwatchPicker
      colors={PROFESSIONAL_COLORS}
      label="Color of the professional"
      onChange={setColor}
      value={color}
    />
  );
};

<KeysExample />

Source

The examples above are src/components/color-swatch-picker/color-swatch-picker.examples.tsx, which the library’s tests render too.