Color Picker

A configurable interface for color selection.

What the Avonni Color Picker does

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.

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