Color Picker

A configurable interface for color selection.

Overview

The Color Picker Component allows users to select a specific color from a range of available colors. It is typically used in applications where users need to input or select colors, such as in design or drawing tools. It may also allow users to input a specific color code.

Overall, the Color Picker Flow Component is valuable for allowing users to select specific colors precisely and intuitively.

Changing the Properties

The Color Picker can be configured to display color opacity, hide color input or change the label variant.

Adding Interactions

From the interactions panel, you can define interactions when users select a color. For example, you may want to redirect users to another screen or save that value when they select a color.

Here is a full list of actions you can add to the carousel.

Styling the Color Picker

The label is stylable with access to Color, Font Size and Font Weight attributes

Examples

Specifications

Attributes

NameTypeDescription

disabled

Boolean

If present, the input field is disabled and users cannot interact with it

fieldLevelHelp

String

Help text detailing the purpose and function of the input

hideColorInput

Boolean

If true, hide the input color value

label

String

Text label for the input

menuAlignment

String

Determines the alignment of the menu relative to the button. Available options are: auto, left, center, right, bottom-left, bottom-center, bottom-right. The auto option aligns the dropdown menu based on available space

menuIconName

String

The Lightning Design System name of the icon to use as a button icon, instead of the color dropdown. Names are written in the format 'standard:account' where 'standard' is the category, and 'account' is the specific icon to be displayed

menuIconSize

String

Size of the icon. Options include xx-small, x-small, small, medium, or large

menuLabel

String

Optional text to be shown on the button

menuNubbin

Boolean

If present, a nubbin is present on the menu. A nubbin is a stub that protrudes from the menu item towards the button menu. The nubbin position is based on the menu-alignment

menuVariant

String

The variant changes the look of the button. Accepted variants include bare, container, border, border-filled, bare-inverse, and border-inverse

opacity

Boolean

If present, the alpha slider will be displayed

readOnly

Boolean

If present, the input field is read-only and cannot be edited by users

required

Boolean

If present, the input field must be filled out before the form is submitted

value

String

Specifies the value of an input element

variant

String

The variant changes the appearance of an input field. Accepted variants include standard, label-inline, label-hidden, and label-stacked. This value defaults to standard, which displays the label above the field. Use label-hidden to hide the label but make it available to assistive technology. Use label-inline to horizontally align the label and input field. Use label-stacked to place the label above the input field

Events

NameDescription

change

The event fired when the color value changed.

Styling Hooks

NameDescription

Text Color

Define a text color for the label

Font Size

Define a font size for the label

Font Style

Define a font style for the label

Font Weight

Define a font weight for the label

Last updated