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: |
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 |
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 |
Last updated