# Color Picker
## Overview
The Avonni Color Picker is a Flow Screen component that provides a rich user interface for selecting colors. It supports three main modes of selection: a visual spectrum, a predefined palette of swatches, or direct input of color codes (Hex, RGB, etc.). It can be configured as a standalone input field, an inline palette, or a dropdown menu button.
***
## Configuration & Customization
### General Behavior & Layout
Control how the component interacts with the user and fits into your screen design.
* **Display Mode**: Choose between a standard input field, a clickable button, or an inline canvas.
* **Validation**: Toggle Required, Disabled, or Read-Only states to manage user input.
* **Transparency**: Enable the Opacity slider to allow alpha-channel adjustments.
### Customizing the Palette
Ideal for product configurators or strict brand compliance, this section allows you to curate the visual selection experience.
* **Curated Colors**: Define specific color arrays (Hex/RGB) to restrict user choice.
* **Grid Layout**: Customize the Number of Columns and Tile Dimensions (width/height).
* **Selection Style**: Choose how selected colors are highlighted (Outline vs. Checkmark).
### Button Menu Mode
Activated when the `Type` is set to Menu, transforming the input into a seamless dropdown.
* **Label & Icon**: Customize the button text and Lightning Design System icon.
* **Variant**: Adjust the button style (e.g., `Border-filled`, `Bare`) to match your page layout.
* **Alignment**: Control where the dropdown menu appears relative to the button.
***
## Interactions
The Color Picker supports one interaction event: **On Change**. It fires every time the user selects a different color — whether by clicking a swatch, picking from the spectrum, or typing a hex code.
Open the **Interactions** tab in the Component Builder to configure what happens when the color changes.
#### On Change
This event fires immediately when the selected color value changes. Here are common ways to use it:
| Action | What it does | When to use |
| -------------------- | ----------------------------------------- | ------------------------------------------------------------------------------------------------------------------- |
| **Flow Navigation** | Automatically advances to the next screen | When color selection is the only step on the screen — creates a one-click experience with no "Next" button needed |
| **Show Toast** | Displays a confirmation message | To give immediate visual feedback (e.g., "Color preference saved!") |
| **Open Flow Dialog** | Opens a sub-flow in a modal | To show related options based on the color choice (e.g., selecting "Red" opens a modal with available red products) |
| **Update Records** | Saves the color to Salesforce immediately | To persist the selection in real time without waiting for the user to finish the screen |
| **Refresh Query** | Refreshes another component's data | To update a preview or related component that depends on the selected color |
{% hint style="info" %}
#### **Accessing the selected color in your flow**
After the screen, use the **Value** output variable on the Color Picker component in Flow Builder. It returns the selected color as a string (e.g., `#1B5E20`). No interaction setup is needed to capture this value — it's available automatically
{% endhint %}
***
## Use Case Example
### The Seamless Product Selector
**Scenario**: You are building a "Product Customization" screen where the user picks a color preference. You want the experience to feel fast and fluid.
**The Setup**
1. User Action: The user clicks a specific color in the palette.
2. Component Interaction: The Color Picker is configured to trigger `Flow Navigation (Next)` on the `Change` event.
**The Logic Chain (Standard Flow Behavior)**
* **Step 1** (Screen): User picks "Midnight Blue." The screen automatically transitions.
* **Step 2** (Flow Element): The Flow moves to a standard Assignment element to store the color value.
* **Step 3** (Flow Element): The Flow moves to a standard Update Records element to save the choice to the Salesforce database.
* **Step 4** (Screen): The user lands on a "Summary" screen showing their updated product configuration.
**Result**: By using the interaction to auto-advance, you eliminate unnecessary clicks, making the Flow feel like a modern web application.
***
## Specifications
### General Attributes
| Name | Type | Description |
| ---------------- | ------- | ---------------------------------------------------------------------------------------------------------------------- |
| Label | String | The text label displayed for the input. |
| Value | String | The current value of the selected color (e.g., `#FFFFFF`). Use this to set a default value or store the user's output. |
| Type | String | Determines the display mode. Can be set to base (standard input) or custom (button menu). |
| Variant | String | Changes the layout appearance. Options: `standard`, `label-inline`, `label-hidden`, or `label-stacked`. |
| Hide Color Input | Boolean | If enabled, the text input field (for Hex/RGB codes) is hidden, forcing users to pick from the visual tools only. |
| Inline | Boolean | If enabled, the color palette is displayed directly on the screen (inline) rather than inside a popover or dropdown. |
| Opacity | Boolean | If enabled, an alpha transparency slider is added to the picker. |
| Field Level Help | String | Help text (tooltip) explaining the purpose of the field. |
| Required | Boolean | If enabled, the user must select a color before the flow can proceed. |
| Disabled | Boolean | If enabled, the component is visible but non-interactive. |
| Read Only | Boolean | If enabled, the value is displayed but cannot be changed. |
#### Palette Configuration
| Name | Type | Description |
| ----------------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Colors | Array | An array of colors to display in the default palette. This can be a simple list of strings (Hex codes) or specific color objects (used to create grouped sections of colors). |
| Number of Columns | Integer | Defines the number of columns in the swatch grid. Defaults to 7 (unless `Inline` is used). |
| Tile Height | String | The height of individual color swatches (e.g., `30px`). |
| Tile Width | String | The width of individual color swatches (e.g., `30px`). |
| Hide Outline | Boolean | If enabled, the outline usually shown around a selected swatch is removed. |
| Show Checkmark | Boolean | If enabled, a checkmark icon appears on top of the selected color swatch. |
#### Button Menu Configuration
*(Only applicable when Type is set to menu/button mode)*
| Name | Type | Description |
| --------- | ------- | ---------------------------------------------------------------------------------------------------- |
| Label | String | Optional text to display on the button itself. |
| Icon Name | String | The Lightning Design System icon name (e.g., `utility:palette`) to display on the button. |
| Variant | String | Visual style of the button. Options: `bare`, `container`, `border`, `border-filled`, etc. |
| Alignment | String | Alignment of the dropdown menu relative to the button (e.g., `left`, `right`, `center`). |
| Nubbin | Boolean | If enabled, displays a small triangular pointer (nubbin) connecting the dropdown menu to the button. |
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://docs.avonnicomponents.com/flow/flow-components/color-picker.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.