> For the complete documentation index, see [llms.txt](https://docs.avonnicomponents.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.avonnicomponents.com/dynamic-components/components/color-input.md).

# Color Input

The Avonni Color Input component lets users select a color through a palette, a custom color wheel, or a predefined set of swatches. Use it wherever your page needs a color-selection field — for styling options, categorization, or any scenario that benefits from a visual color chooser.

## Overview

The component ships as two display variants that share the same configuration panel:

* **Color Input** — the default preset. Displays a color swatch button alongside a text field where users can read or type a color value.
* **Color Picker** — same component with **Hide Color Input** enabled. Shows only the swatch button; the text field is hidden, giving a more compact appearance.

Both variants open the same color picker popover (or render inline when **Inline** is enabled) and support Base, Custom, and Predefined picker modes.

## Configuration

To configure the Color Input, select it on the canvas. The **Edit Color Input** panel opens on the right with three tabs: **Properties**, **Interactions**, and **Style**. The sections below mirror the Properties tab.

### Properties

#### Label

Text label displayed above the component. Use a short, descriptive label so users understand what the color represents.

#### Value

The initial or pre-populated color value (for example `#FF0000` or `rgb(255, 0, 0)`). Accepts any valid CSS color string.

#### Field Level Help

Optional help text shown as a tooltip icon next to the label. Use it to explain what the color selection affects.

#### Type

Controls which color selection mode is shown. Default: **Base**.

| Option         | Description                                                                                                            |
| -------------- | ---------------------------------------------------------------------------------------------------------------------- |
| **Base**       | Combines all modes into tabs, letting users switch between the custom color wheel, the palette, and predefined colors. |
| **Custom**     | Shows only the custom color wheel with gradient and hue sliders.                                                       |
| **Predefined** | Shows only the palette of swatches.                                                                                    |

#### Variant

Controls the label position relative to the input. Default: **Standard**.

| Option            | Description                                              |
| ----------------- | -------------------------------------------------------- |
| **Standard**      | Label appears above the input.                           |
| **Label Hidden**  | Label is present for accessibility but not visible.      |
| **Label Inline**  | Label appears to the left of the input on the same line. |
| **Label Stacked** | Label floats above the input when the field is active.   |

#### Hide Color Input

When enabled, the text field showing the color value is hidden and only the swatch button is displayed. This is the key difference between the **Color Picker** preset (enabled) and the **Color Input** preset (disabled).

#### Inline

When enabled, the picker content is rendered directly on the page instead of inside a popover. Useful when you want the palette or color wheel always visible without requiring a button click.

#### Opacity

When enabled, an alpha (opacity) slider is added to the picker, allowing users to select semi-transparent colors.

#### Required

Marks the field as required. A visual indicator is shown and the field must be filled before the form can be submitted.

#### Disabled

Disables the component entirely. Users cannot interact with it.

#### Read Only

Makes the palette read-only. The current color value is displayed but cannot be changed by the user.

### Palette

Customize the swatch palette displayed in the picker.

#### Colors

A list of colors to display as palette swatches. Each entry can be a color string or a color object. Use the inline collection editor to add, reorder, or remove swatches.

#### Number of Columns

Number of columns used to arrange the palette swatches. If not set, defaults to 7 (except when **Inline** is enabled).

#### Hide Outline

When enabled, the selection outline around the currently selected swatch is hidden.

#### Show Checkmark

When enabled, a checkmark is overlaid on the currently selected swatch.

#### Tile Height (px)

Sets the height of each palette swatch tile in pixels.

#### Tile Width (px)

Sets the width of each palette swatch tile in pixels.

### Button Menu

Customize the button that opens the color picker popover. These settings have no visible effect when **Inline** is enabled.

#### Label

Optional text shown on the button alongside the color swatch. Leave blank for an icon-only button.

#### Variant

Controls the visual style of the button. Default: **Border**.

Options: Bare, Container, Brand, Border, Border Filled, Bare Inverse, Border Inverse.

#### Icon Name

Lightning Design System icon displayed on the button (for example `utility:color_swatch`).

#### Icon Size

Size of the button icon. Default: **X Small**. Requires: **Icon Name** to be set.

Options: Xx Small, X Small, Small, Medium, Large.

#### Alignment

Controls where the picker popover appears relative to the button. Default: **Left**.

Options: Auto, Left, Center, Right, Bottom Left, Bottom Center, Bottom Right.

#### Nubbin

When enabled, a small triangular stub (nubbin) points from the popover toward the button, making the relationship between button and menu visually explicit.

### Set Component Visibility

All components support conditional visibility — see [Component Visibility](/dynamic-components/core-concepts/component-visibility.md).

## Interactions

[Interactions](/dynamic-components/component-builder/interactions.md) define what happens when users interact with the Color Picker. Configure them from the **Interactions** tab of the Edit Color Picker panel.

### Change

Fires when the user selects a new color. Use this to store the chosen color in a variable, update a record field, or drive other components on the page.

## Styling

The **Style** tab gives you fine-grained control over the Color Input's appearance. Configure it from the **Style** tab of the Edit Color Input panel.

{% tabs %}
{% tab title="Margin" %}
Controls the *outer* spacing around the component.

* **Top / Right / Bottom / Left:** Adjust the space on each side.
  {% endtab %}

{% tab title="Padding" %}
Controls the *inner* spacing inside the component.

* **Top / Right / Bottom / Left:** Adjust the space on each side.
  {% endtab %}

{% tab title="Label" %}
Customizes the label text.

* **Color:** Set the label text color.
* **Font Size:** Adjust the label font size.
* **Font Style:** Choose a font style.
* **Font Weight:** Choose a font weight.
  {% endtab %}

{% tab title="Swatch" %}
Customizes the preview swatch and the palette swatches, including the selected-swatch indicators.

* **Preview Border Radius:** Round the corners of the preview swatch.
* **Palette Border Radius:** Round the corners of the palette swatches.
* **Selected Outline Width / Color:** Set the outline thickness and color of the selected swatch.
* **Selected Border Width / Color:** Set the border thickness and color of the selected swatch.
* **Selected Checkmark Color:** Set the color of the checkmark on the selected swatch.
  {% endtab %}
  {% endtabs %}


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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, and the optional `goal` query parameter:

```
GET https://docs.avonnicomponents.com/dynamic-components/components/color-input.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.