e8-form-color-picker
Updated on Sep 18, 2025 19 minutes to readA color picker form control that allows users to select colors using a text input or a visual color palette.
It supports standard input, palette mode, optional clear and popup buttons, and can be customized with labels, tooltips, and size variants.
e8-form-color-picker represents a color selection input inside a form.
It allows users to pick a color by typing a hex value or using a popup color picker.
The component supports two modes: default (standard picker) and palette (predefined color selection).
It also supports binding through v-model, displays a label and optional tooltip, and can show or hide auxiliary buttons for clearing or opening the color picker popup.
Visibility, read-only state, and size variants are fully supported.
A change event is emitted whenever the color value is modified.
Insert this code into Main or Initialization script of the form to register a global method
E8App.$set(E8App.vars, 'favoriteColor', '#FF0000');
E8App.$set(E8App.vars, 'themeColor', '#00FF00');
E8App.$set(E8App.vars, 'headerColor', '#FFFFFF');Copy this snippet into the Content section
<!-- Default color picker -->
<e8-form-color-picker
v-model="vars.favoriteColor"
label="Favorite Color"
></e8-form-color-picker>
<p>Selected color: {{ vars.favoriteColor }}</p>
<!-- Palette mode with predefined colors -->
<e8-form-color-picker
v-model="vars.themeColor"
label="Theme Color"
mode="palette"
:palette="['#FF0000', '#00FF00', '#0000FF']"
clear-button
></e8-form-color-picker>
<p>Selected theme color: {{ vars.themeColor }}</p>
<!-- Color picker with tooltip and disabled popup -->
<e8-form-color-picker
v-model="vars.headerColor"
label="Header Color"
tooltip="Pick a color for the header"
:disable-popup="true"
></e8-form-color-picker>Selected color: {{ vars.favoriteColor }}
Selected theme color: {{ vars.themeColor }}
Properties
| Property | Description | Type | Default |
|---|---|---|---|
| clear-button | Shows a button to clear the current color value. | boolean | false |
| disable-popup | Disables opening of the popup color picker. | boolean | false |
| disable-popup-on-focus | Prevents popup from opening on input focus. | boolean | false |
| label | Text displayed next to the color picker; set to false to hide label. | string | boolean | — |
| mode | Picker mode. | E8FormColorPickerMode | 'default' |
| palette | Array of colors used in palette mode. | string[] | [] |
| placeholder | Placeholder text displayed in the input. | string | — |
| size | Size of the input. | E8ElementSizes | 'default' |
| tooltip | Tooltip text displayed on hover. | string | — |
| v-model | Bound color value as a hex string (e.g., #FFFFFF). | string | — |
| visible | Controls whether the color picker is visible. | boolean | true |
| readonly | Makes the control read-only. | boolean | false |
Slots
| Slot | Description |
|---|---|
| append | Custom content rendered in the input append group. |
| label | Custom content for the label. Receives label and value as slot props. |
| prepend | Custom content rendered in the input prepend group. |
Events
| Event | Description |
|---|---|
| on-change | Triggered when the color value changes. |