Color Picker
A configurable interface for color selection.
Last updated
A configurable interface for color selection.
Last updated
The Color Picker Component allows users to select a specific color from various available colors. It is typically used in applications where users need to input or choose colors, such as in design or drawing tools. It may also allow users to input a specific color code.
The Color Picker can be configured to display color opacity
, hide color input
or change the label variant.
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.
The label is stylable with access to Color
, Font Size
and Font Weight
attributes
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
change
The event fired when the color value changed.
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