TPDS

Color Picker

A color picker + input combo component

You can click the swatch to pick a color or type a hexadecimal value in the text input.


color picker



1import ColorPicker from '@tempoplatform/tpds/components/color-picker'
2const [selectedColor, setSelectedColor] = React.useState('#ff0000')
3
4<ColorPicker
5  hexColor={selectedColor}
6  onChangeHandler={value => setSelectedColor(value)}
7/>


Prop Name

Type

Default

Required

Description

selectedColor

string

null

Yes

The selected color to display, hexadecimal format

onChangeHandler

Function

null

Yes

Handler function to pass updates to the host component.

omitTextInput

boolean

false

No

If true, the text input will not be displayed.

swatchSide

string

right

No

The side of the swatch to display, left or right.

placeholder

string

Hex

No

The placeholder text for the text input.