@clayui/color-picker

ClayColorPicker component

Usage no npm install needed!

<script type="module">
  import clayuiColorPicker from 'https://cdn.skypack.dev/@clayui/color-picker';
</script>

README

title: 'Color Picker' description: 'Color picker lets users select a color from a predefined palette, specify a color via its hexadecimal value, sample a color, and explore color values to create a custom color variation.' lexiconDefinition: 'https://liferay.design/lexicon/core-components/forms/picker-color/' packageNpm: '@clayui/color-picker'

import {ColorPicker} from '$packages/clay-color-picker/docs/index';

Types of Color Picker

Color Picker is delivered in 4 different ways: default colors, custom colors, native and small.

  • Default colors: a predefined list of colors to the dropdown that is not allowed to change or manipulate.
  • Custom colors: using the colors API in conjunction with onColorsChange enables the user to modify colors and add new ones.
  • Native: use the useNative API when the color picker is being used in a native environment, it changes to the browser default color picker.
  • Small: use the small API to size the color picker input to match other small inputs.

We recommend that you review the use cases in the Storybook.