ColorPicker

Pick colors in hex(a), rgb(a), hsl(a) and hsv(a) formats.

Import


import { ColorPicker } from '@tidbcloud/uikit'

Usage


import { useState } from 'react'
import { ColorPicker, Text } from '@tidbcloud/uikit'
 
function Demo() {
  const [value, onChange] = useState('rgba(47, 119, 150, 0.7)')
 
  return (
    <>
      <ColorPicker format="rgba" value={value} onChange={onChange} />
      <Text>{value}</Text>
    </>
  )
}

Color format

ColorPicker supports hex, hexa, rgb, rgba, hsl and hsla color formats. Slider to change opacity and color preview are displayed only for hexa, rgba and hsla formats:


import { ColorPicker } from '@tidbcloud/uikit'
 
function Demo() {
  return <ColorPicker format="rgba" />
}

With swatches

You can add predefined color swatches with swatches prop:


import { ColorPicker } from '@tidbcloud/uikit'
 
function Demo() {
  return (
    <ColorPicker
      format="hex"
      swatches={[
        '#25262b',
        '#868e96',
        '#fa5252',
        '#e64980',
        '#be4bdb',
        '#7950f2',
        '#4c6ef5',
        '#228be6',
        '#15aabf',
        '#12b886',
        '#40c057',
        '#82c91e',
        '#fab005',
        '#fd7e14'
      ]}
    />
  )
}

Swatches only

To display swatches without picker set withPicker={false} and fullWidth props:


import { useState } from 'react'
import { ColorPicker, Text } from '@tidbcloud/uikit'
 
function Demo() {
  const [value, onChange] = useState('#fff')
 
  return (
    <>
      <ColorPicker
        format="hex"
        value={value}
        onChange={onChange}
        withPicker={false}
        fullWidth
        swatches={['#fa5252', '#e64980', '#be4bdb', '#7950f2', '#4c6ef5', '#228be6', '#15aabf']}
      />
      <Text>{value}</Text>
    </>
  )
}

Size

ColorPicker has 5 predefined sizes: xs, sm, md, lg and xl:


import { ColorPicker } from '@tidbcloud/uikit'
 
function Demo() {
  return <ColorPicker size="lg" />
}

Full width

Set fullWidth prop to stretch component to 100% of parent width:


import { ColorPicker } from '@tidbcloud/uikit'
 
function Demo() {
  return <ColorPicker fullWidth size="lg" format="rgba" />
}

HueSlider component


import { useState } from 'react'
import { HueSlider, Text } from '@tidbcloud/uikit'
 
function Demo() {
  const [value, onChange] = useState(250)
 
  return (
    <>
      <Text>Hue value: {value}</Text>
      <HueSlider value={value} onChange={onChange} />
    </>
  )
}

AlphaSlider component


import { useState } from 'react'
import { AlphaSlider, Text } from '@tidbcloud/uikit'
 
function Demo() {
  const [value, onChange] = useState(0.55)
 
  return (
    <>
      <Text>Alpha value: {value}</Text>
      <AlphaSlider color="#1c7ed6" value={value} onChange={onChange} />
    </>
  )
}

Props

Prop	Type	Default	Description
value	string	-	Controlled component value
defaultValue	string	-	Uncontrolled component default value
onChange	(value: string) => void	-	Called when value changes
onChangeEnd	(value: string) => void	-	Called when user stops dragging slider
format	ColorFormat	’hex’	Color format
swatches	string[]	-	List of predefined colors
swatchesPerRow	number	7	Number of swatches per row
size	MantineSize	’md’	Controls size of sliders
withPicker	boolean	true	Show color picker
fullWidth	boolean	false	Take 100% width of container
focusable	boolean	true	Make interactive elements focusable
saturationLabel	string	-	Saturation slider aria-label
hueLabel	string	-	Hue slider aria-label
alphaLabel	string	-	Alpha slider aria-label