Comment on page

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
Name
Type
Description
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
Name
Description
change
The event fired when the color value changed.
Styling Hooks
Name
Description
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

Name	Type	Description
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

Name	Description
change	The event fired when the color value changed.

Name	Description
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 modified 2mo ago