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.
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.
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.
Interactions
Interactions define what happens when users interact with the Color Input. Configure them from the Interactions tab of the Edit Color Input 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.
Controls the outer spacing around the component.
Top / Right / Bottom / Left: Adjust the space on each side.
Controls the inner spacing inside the component.
Top / Right / Bottom / Left: Adjust the space on each side.
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.
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.
Troubleshooting Common Issues
No Colors in the Palette: Add color values under Colors in the Palette section — an empty list shows nothing to pick from.
Users Can Type Any Color: Enable Hide Color Input to restrict selection to the palette and remove the manual text-entry field.
Selected Color Isn't Saved: Bind Value to a variable or record field; a static value won't persist the user's choice.
Menu Settings Have No Effect: Check whether Inline is enabled — in inline mode the picker renders on the page and the menu button options are ignored.
No Transparency Option: Enable Opacity to show the alpha slider; without it, only fully opaque colors can be chosen.
Can't Change the Color: Confirm Disabled and Read Only are both off, otherwise users can't interact with the picker.
Last updated
Was this helpful?