ColorPicker

Controle de seleção de cor com predefinições e suporte a múltiplos formatos.

Importação

import { ColorPicker } from 'asterui'

Exemplos

ColorPicker Básico

Seletor de cor simples com painel de saturação/luminosidade e controle deslizante de matiz.

</>

import { ColorPicker } from 'asterui'

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

export default App

Com Exibição de Texto

Seletor de cor mostrando o valor hexadecimal abaixo do seletor.

</>

#10B981

import { ColorPicker } from 'asterui'

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

export default App

Predefinições Personalizadas

Seletor de cor com amostras de cor predefinidas personalizadas.

</>

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

Tamanhos

Seletores de cor em diferentes tamanhos.

</>

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

Controlado

Seletor de cor controlado com gerenciamento de estado.

</>

#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

Modos de Exibição

Apenas seletor, apenas amostras ou ambos.

</>

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

Propriedade	Descrição	Tipo	Padrão
value	Valor de cor controlado (hex)	string	-
defaultValue	Valor de cor inicial (não controlado)	string	'#000000'
onChange	Callback quando a cor muda	(color: string) => void	-
mode	Modo de exibição	'swatches' | 'picker' | 'both'	'both'
presets	Amostras de cor predefinidas	string[]	Paleta padrão
showText	Mostrar valor hexadecimal abaixo do seletor	boolean	false
allowClear	Mostrar botão de limpar para redefinir cor	boolean	false
disabled	Desabilitar o seletor	boolean	false
size	Tamanho do seletor	'xs' | 'sm' | 'md' | 'lg'	'md'
data-testid	Prefixo de ID de teste para elementos filhos	string	'colorpicker'
className	Classes CSS adicionais	string	-

Acessibilidade

• Painel de saturação/luminosidade tem role="slider" com aria-valuetext
• Controle deslizante de matiz tem role="slider" com aria-valuemin, aria-valuemax e aria-valuenow
• Predefinições de cor usam role="listbox" e role="option" com aria-selected
• Navegação completa por teclado: Teclas de seta ajustam valores de cor, Shift+Seta para passos maiores
• Indicadores de foco visíveis em elementos interativos
• Todos os elementos interativos têm atributos aria-label descritivos