import {
  ExampleCodeBlock,
  Specifications,
  SymbolDoc,
} from '@workday/canvas-kit-docs';

import Basic from './examples/Basic';
import LabelPosition from './examples/LabelPosition';
import RefForwarding from './examples/RefForwarding';


# Canvas Kit Color Preview

Color Preview displays a color swatch.

[> Workday Design Reference](https://design.workday.com/components/inputs/color-input)

## Installation

```sh
yarn add @workday/canvas-kit-react
```

## Usage

### Basic Example

<ExampleCodeBlock code={Basic} />

### Ref Forwarding

Color Preview supports [ref forwarding](https://reactjs.org/docs/forwarding-refs.html). It will
forward `ref` to its underlying `<input type="text">` element.

<ExampleCodeBlock code={RefForwarding} />

### Label Position Horizontal

Set the `orientation` prop of the Form Field to designate the position of the label relative to the
input component. By default, the orientation will be set to `vertical`.

<ExampleCodeBlock code={LabelPosition} />

## Component API

<SymbolDoc name="ColorPreview" fileName="/react/" />

## Specifications

<Specifications file="./cypress/component/ColorPicker.spec.tsx" name="ColorPreview" />