Color can be any valid for background-color css property.

const Example01 = () => {
    const [color, setColor] = React.useState('#8772e5')
    return (
        <div>
            <ColorPicker
                        colors={[ '#1fbc70', '#ff745f', '#faafe2', '#8772e5', '#01f346', '#90efc0', '#ffcc80', 'rgb(8, 191, 223)', 'rgb(204, 157, 127)' ]}
                        value={color}
                        onChange={(newColor) => setColor(newColor)}
                />
            <BodyText className="m-t-2">Color selected: {color}</BodyText>
        </div>
    )
}
render (Example01)

Form.ColorPicker

Ready to be used inside of Form

const ExampleInsideForm = () => {
    const [color, setColor] = React.useState('#ff745f')
    return (
        <Form>
            <Form.ColorPicker
                label="Pick A Color"
                colors={[ '#1fbc70', '#ff745f', '#faafe2', '#8772e5', '#01f346', 'rgb(255, 145, 22)', 'rgb(144, 239, 192)', 'rgb(255, 204, 128)' ]}
                value={color}
                onChange={(newColor) => setColor(newColor)}
            />
        </Form>
    )
}
render (ExampleInsideForm)
const ExampleInsideForm = () => {
    const [color, setColor] = React.useState('#ff745f')
    return (
        <Form>
            <Form.ColorPicker
                label="Pick A Color"
                colors={[ '#1fbc70', '#ff745f', '#faafe2', '#8772e5', '#01f346', 'rgb(255, 145, 22)', 'rgb(144, 239, 192)', 'rgb(255, 204, 128)' ]}
                value={color}
                onChange={(newColor) => setColor(newColor)}
                description="Description goes here..."
            />
        </Form>
    )
}
render (ExampleInsideForm)

Label Help

Labels can have a help icon with a tooltip to provide additional context to a label.

<Form>
    <Form.ColorPicker
        label="ColorPicker Label"
        colors={[ 'rgb(31, 188, 112)', '#ff745f', '#faafe2', '#01f346', '#ff9116', '#90efc0', '#ffcc80', '#08bfdf', '#606162', '#cc9d7f' ]}
        value={'#01f346'}
        labelProps={{
            help: "This is help text",
            direction: "r"
        }}
    />
</Form>

Required and Optional

A visual indicator can be applied on a Color Picker's label.

<Form>
    <Form.ColorPicker
        label="ColorPicker Label"
        colors={[ 'rgb(31, 188, 112)', '#ff745f', '#faafe2', '#01f346', '#ff9116', '#90efc0', '#ffcc80', '#08bfdf', '#606162', '#cc9d7f' ]}
        value={'#01f346'}
        labelProps={{
            required: true
        }}
    />
    <Form.ColorPicker
        label="ColorPicker Label"
        colors={[ 'rgb(31, 188, 112)', '#ff745f', '#faafe2', '#01f346', '#ff9116', '#90efc0', '#ffcc80', '#08bfdf', '#606162', '#cc9d7f' ]}
        value={'#01f346'}
        labelProps={{
            optional: true
        }}
    />
</Form>

Disabled state

Both ColorPicker and Form.ColorPicker have disabled state.

<Form>
    <Form.ColorPicker
        label="Pick A Color"
        colors={[ 'rgb(31, 188, 112)', '#ff745f', '#faafe2', '#01f346', '#ff9116', '#90efc0', '#ffcc80', '#08bfdf', '#606162', '#cc9d7f' ]}
        value={'#01f346'}
        disabled
    />
</Form>

Both ColorPicker and Form.ColorPicker support tabIndex, onFocus/onBlur events when not disabled, and left/right arrow key controls when focused.


Importing

for ColorPicker :

import { ColorPicker } from '@servicetitan/design-system';

for Form.ColorPicker :

import { Form } from '@servicetitan/design-system';

To use color tokens from the design system you need to import them explicitly (if import isn't working please take a look at https://github.com/servicetitan/assets/pull/282, we are working on it currently)

import tokens from '@servicetitan/tokens';