ColorPicker

Contrôle de sélection de couleur avec préréglages et support de plusieurs formats.

Import

import { ColorPicker } from 'asterui'

Exemples

ColorPicker de base

Sélecteur de couleur simple avec panneau de saturation/luminosité et curseur de teinte.

</>

import { ColorPicker } from 'asterui'

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

export default App

Avec affichage de texte

Sélecteur de couleur affichant la valeur hexadécimale sous le sélecteur.

</>

#10B981

import { ColorPicker } from 'asterui'

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

export default App

Préréglages personnalisés

Sélecteur de couleur avec nuances de couleur préréglées personnalisées.

</>

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

Tailles

Sélecteurs de couleur de différentes tailles.

</>

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

Contrôlé

Sélecteur de couleur contrôlé avec gestion d'état.

</>

#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

Modes d'affichage

Sélecteur uniquement, nuances uniquement, ou les deux.

</>

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

Propriété	Description	Type	Défaut
value	Valeur de couleur contrôlée (hex)	string	-
defaultValue	Valeur de couleur initiale (non contrôlée)	string	'#000000'
onChange	Callback lors du changement de couleur	(color: string) => void	-
mode	Mode d’affichage	'swatches' | 'picker' | 'both'	'both'
presets	Nuances de couleur préréglées	string[]	Palette par défaut
showText	Afficher la valeur hexadécimale sous le sélecteur	boolean	false
allowClear	Afficher le bouton d’effacement pour réinitialiser la couleur	boolean	false
disabled	Désactiver le sélecteur	boolean	false
size	Taille du sélecteur	'xs' | 'sm' | 'md' | 'lg'	'md'
data-testid	Préfixe d’ID de test pour les éléments enfants	string	'colorpicker'
className	Classes CSS supplémentaires	string	-

Accessibilité

• Le panneau de saturation/luminosité a role="slider" avec aria-valuetext
• Le curseur de teinte a role="slider" avec aria-valuemin, aria-valuemax et aria-valuenow
• Les préréglages de couleur utilisent role="listbox" et role="option" avec aria-selected
• Navigation complète au clavier : Les touches fléchées ajustent les valeurs de couleur, Maj+Flèche pour des pas plus grands
• Indicateurs de focus visibles sur les éléments interactifs
• Tous les éléments interactifs ont des attributs aria-label descriptifs