@workday/canvas-kit-react-color-picker

Canvas Kit Color Picker

Color Picker is a two part component. It has a color input that handles custom hex colors and then selecting specific swatches.

> Workday Design Reference

Installation

yarn add @workday/canvas-kit-react-color-picker

or

yarn add @workday/canvas-kit-color-picker

Color Input

A controlled input for accepting typed/pasted hex codes.

Usage

import * as React from 'react';
import {ColorInput} from '@workday/canvas-kit-color-picker';

<ColorInput
  showCheck={true}
  onChange={this.onChange}
  value={this.state.color}
  onValidColorChange={this.validColorChange}
/>;

Static Properties

None

Component Props

All props available for TextInput are available here. Also, all standard input attributes are available and can be passed to the input field.

Required

None

---

Optional

value: string

The value entered by the user into the color input

---

inputRef: React.Ref<HTMLInputElement>

A ref to the input element. This allows you to imperatively focus on the color input if needed.

---

onChange: (e: React.ChangeEvent<HTMLInputElement>) => void

A onChange callback from the input. Value can be accessed from e.currentTarget.value. Should be used to control the input.

---

onValidColorChange: (color: string) => void

A callback that passes up the valid hex value typed by the user. This is always prefixed with a hash, and is always the expanded hex value (e.g. "03F" > "#0033FF").

---

showCheck: boolean

Optionally show a check icon when a custom hex color has been selected

Default: false

---

error: ErrorType

The type of error to display, if any.

Type	Description
Error	Red outline with error icon.
Alert	Yellow outline with alert icon.

Color Preview

A component to show a color swatch

Usage

import * as React from 'react';
import {ColorPreview} from '@workday/canvas-kit-color-preview';

<ColorPreview value="#00FFCC" />;

Static Properties

None

Component Props

Required

value: string

The value entered by the user into the color input

---

Optional

id: string

An id linked to the color preview input to be used with an associated form label