ColorPicker

Control de selección de color con presets y soporte de múltiples formatos.

Importar

import { ColorPicker } from 'asterui'

Ejemplos

ColorPicker Básico

Selector de color simple con panel de saturación/luminosidad y deslizador de tono.

</>

import { ColorPicker } from 'asterui'

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

export default App

Con Visualización de Texto

Selector de color mostrando el valor hexadecimal debajo del selector.

</>

#10B981

import { ColorPicker } from 'asterui'

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

export default App

Presets Personalizados

Selector de color con muestras de color preset 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

Tamaños

Selectores de color en diferentes tamaños.

</>

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

Selector de color controlado con gestión 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 Visualización

Solo selector, solo muestras, o 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

Propiedad	Descripción	Tipo	Predeterminado
value	Valor de color controlado (hex)	string	-
defaultValue	Valor de color inicial (no controlado)	string	'#000000'
onChange	Callback cuando cambia el color	(color: string) => void	-
mode	Modo de visualización	'swatches' | 'picker' | 'both'	'both'
presets	Muestras de color preset	string[]	Paleta predeterminada
showText	Mostrar valor hex debajo del selector	boolean	false
allowClear	Mostrar botón de limpiar para reiniciar color	boolean	false
disabled	Deshabilitar el selector	boolean	false
size	Tamaño del selector	'xs' | 'sm' | 'md' | 'lg'	'md'
data-testid	Prefijo de ID de prueba para elementos hijos	string	'colorpicker'
className	Clases CSS adicionales	string	-

Accesibilidad

• El panel de saturación/luminosidad tiene role="slider" con aria-valuetext
• El deslizador de tono tiene role="slider" con aria-valuemin, aria-valuemax y aria-valuenow
• Los presets de color usan role="listbox" y role="option" con aria-selected
• Navegación completa por teclado: Teclas de flecha ajustan valores de color, Shift+Flecha para pasos más grandes
• Indicadores de foco visibles en elementos interactivos
• Todos los elementos interactivos tienen atributos aria-label descriptivos