ClayClay
  • Get Started
    • How to Use Clay
    • Composition Philosophy
    • How to Read This Documentation
    • Migrating From v2.x
    • Using Clay in JSPs
  • Components
    • Alert
    • Application Bar
    • Autocomplete
    • Badge
    • Breadcrumb
    • Button Group
    • Buttons
    • Card
    • Chart
    • Color Picker
    • Data Provider
    • Date Picker
    • Drop Down
    • Empty State
    • Form
      • Checkbox
      • Dual List Box
      • Input
      • Radio Group
      • Select
      • Select Box
      • Toggle Switch
    • Forms Hierarchy
    • Icon
    • Label
    • Layout
    • Link
    • List
    • Loading Indicator
    • Localized Input
    • Management Toolbar
    • Modal
    • Multi Select
    • Multi Step Nav
    • Nav
    • Navigation Bar
    • Pagination
    • Pagination Bar
    • Panel
    • Popover
    • Progress Bar
    • Sidebar
    • Slider
    • Sticker
    • Table
    • Tabs
    • Timelines
    • Time Picker
    • Toolbar
    • Tooltip
    • Upper Toolbar
  • Contributing
  • CSS Framework
    • Paver
    • SCSS
    • Color
    • Grid
    • Content
      • Typography
      • C Kbd
    • Utilities
      • Autofit
      • C Focus Inset
      • C Inner
      • C Spacing Utilities
      • Inline Item
    • Playground
  • Examples
  • Docs
  • Blog
  • Storybook
  • Codesandbox
  • Github
  • Use this menu to toggle between Atlas and Base Themes.

Color Picker

yarn add @clayui/color-picker

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.

  • Examples
  • Markup
  • API

Stable3.4.4View in LexiconCHANGELOGstorybook demos

PropertyTypeRequiredDefaultDescription
ariaLabels
{ selectColor: string; selectionIs: string; }false{ selectColor: 'Select a color', selectionIs: 'Color selection is {0}', }Labels for the aria attributes
colors
Array<string>falseList of color hex values
disabled
booleanfalseFlag for adding ColorPicker in disabled state
label
stringfalseThe label describing the collection of colors in the menu
name
stringfalseThe input attribute for name
onColorsChange
(val: Array<string>) => voidfalseCallback for when the list of colors change
onValueChange
(val: string) => voidfalse() => {}Callback for when the selected color changes
showHex
booleanfalsetrueDetermines if the hex input should render
showPalette
booleanfalsetrueFlag for showing and disabling the palette of colors. This defaults to true
small
booleanfalseFlag to indicate if `input-group-sm` class should be applied to `ClayInput.Group`
spritemap
stringfalsePath to the location of the spritemap resource.
title
stringfalseTitle to describe the color picker form element
useNative
booleanfalsefalseDetermines if the native color picker should be used
value
stringfalse'FFFFFF'Value of the selected color hex

How can this be improved? Create an issue!