Color picker

A color picker allows users to customize a component by choosing a color option. It is only available in instances where a user is adding bespoke content that needs to be differentiated.

Examples

TODO:
Add example. Create an issue
TODO:
Add to Pajamas UI kit. Create an issue

Structure

TODO:
Add structure image. Create an issue

Guidelines

When to use

TODO:
Add when to use. Create an issue

When not to use

TODO:
Add when not to use. Create an issue

Behavior

  • The user may edit the color by:
    • Choosing a new color from the list of suggestions
    • Using the color picker popover
    • Entering a HEX value

Content

Input field

  • Pre-populated with the default value of #6699CC.
  • Can only enter HEX formats.

Color swatch preview

  • Allows a user to visualize what HEX code is currently inputted.

Accessibility

TODO:
Add accessibility guidelines. Create an issue

Last updated at: