ColorPicker

Color selection control with presets and multiple format support.

Import

import { ColorPicker } from 'asterui'

Examples

Basic ColorPicker

Simple color picker with saturation/lightness panel and hue slider.

</>

import { ColorPicker } from 'asterui'

function App() {
  return (
      <ColorPicker defaultValue="#6366f1" />
    )
}

export default App

With Text Display

Color picker showing the hex value below the picker.

</>

#10B981

import { ColorPicker } from 'asterui'

function App() {
  return (
      <ColorPicker defaultValue="#10b981" showText />
    )
}

export default App

Custom Presets

Color picker with custom preset color swatches.

</>

import { ColorPicker } from 'asterui'

function App() {
  const presets = [
    '#f43f5e', '#ec4899', '#d946ef', '#a855f7',
    '#8b5cf6', '#6366f1', '#3b82f6', '#0ea5e9',
    '#06b6d4', '#14b8a6', '#10b981', '#22c55e',
  ]
  
  return (
      <ColorPicker defaultValue="#6366f1" presets={presets} />
    )
}

export default App

Sizes

Color pickers in different sizes.

</>

import { ColorPicker, Space } from 'asterui'

function App() {
  return (
      <Space direction="vertical" size="md">
        <ColorPicker size="xs" defaultValue="#f43f5e" mode="picker" />
        <ColorPicker size="sm" defaultValue="#6366f1" mode="picker" />
        <ColorPicker size="md" defaultValue="#10b981" mode="picker" />
        <ColorPicker size="lg" defaultValue="#a855f7" mode="picker" />
      </Space>
    )
}

export default App

Controlled

Controlled color picker with state management.

</>

#6366F1

import { ColorPicker, Space } from 'asterui'
import { useState } from 'react'

function App() {
  const [color, setColor] = useState('#6366f1')
  
  return (
      <Space direction="vertical" size="sm">
        <ColorPicker value={color} onChange={setColor} showText />
        <div
          className="w-full h-16 rounded-lg"
          style={{ backgroundColor: color }}
        />
      </Space>
    )
}

export default App

Display Modes

Picker only, swatches only, or both.

</>

Picker only

Swatches only

import { ColorPicker, Space, Typography } from 'asterui'

function App() {
  const { Text } = Typography
  
  return (
      <Space direction="vertical" size="lg">
        <Space direction="vertical" size="xs">
          <Text size="sm" muted>Picker only</Text>
          <ColorPicker mode="picker" defaultValue="#6366f1" />
        </Space>
        <Space direction="vertical" size="xs">
          <Text size="sm" muted>Swatches only</Text>
          <ColorPicker mode="swatches" defaultValue="#6366f1" />
        </Space>
      </Space>
    )
}

export default App

API

ColorPicker

Property	Description	Type	Default
value	Controlled color value (hex)	string	-
defaultValue	Initial color value (uncontrolled)	string	'#000000'
onChange	Callback when color changes	(color: string) => void	-
mode	Display mode	'swatches' | 'picker' | 'both'	'both'
presets	Preset color swatches	string[]	Default palette
showText	Show hex value below picker	boolean	false
allowClear	Show clear button to reset color	boolean	false
disabled	Disable the picker	boolean	false
size	Picker size	'xs' | 'sm' | 'md' | 'lg'	'md'
data-testid	Test ID prefix for child elements	string	'colorpicker'
className	Additional CSS classes	string	-

Accessibility

• Saturation/lightness panel has role="slider" with aria-valuetext
• Hue slider has role="slider" with aria-valuemin, aria-valuemax, and aria-valuenow
• Color presets use role="listbox" and role="option" with aria-selected
• Full keyboard navigation: Arrow keys adjust color values, Shift+Arrow for larger steps
• Visible focus indicators on interactive elements
• All interactive elements have descriptive aria-label attributes