Color Picker
Overview
Color Picker is an input widget that lets users select a color from a visual color palette on the dashboard. The selected color is written to the bound flow variable as a hex color string (e.g. #FF5733).
Color Picker widget on the Dashboard
Widget Info
| Field | Value |
|---|---|
| Type | Input |
| Description | Color picker input for string hex color values |
| Data Types | string, null, undefined |
| Dev Stage | Beta |
Data Source
The Data Source dropdown binds the widget to a flow variable. The selected color value is stored into this variable each time the user picks a color. The variable must be of type string.
Settings
Settings panel with live preview of the selected color
Label
Label displayed on the widget.
Label Color
Color of the label text. Use the color swatch to pick a custom color, or press the reset button (↺) to restore the default.
Read Only
When enabled, prevents the user from interacting with the color picker.
Advanced Options
Enable Advanced Options at the top right of the settings panel to reveal the following additional settings.
Label Class Name
Tailwind CSS class name applied to the label element for custom styling.
Label Icon ID
The icon to display next to the label.
Label Icon Class Name
Tailwind CSS class name applied to the label icon element for custom styling.
Layout
Controls how the label and color picker are arranged.
| Value | Description |
|---|---|
default | Label appears above the color picker (stacked vertically) |
row | Label and color picker appear side by side on the same row |