Color Input

Tips & examples

A clickable colored input block covering its container area that launches a full popout color picker selection window when clicked. If configured, a plain uncolored label is rendered adjacent to the color block.

When to use

Allowing users to pick a color visually using an advanced popup color picker panel.
Binding user-selected colors as hex string data values within database records.

What you need

Deactivated by default. Requires an active connection to a parent default_form element via Element ID and Field Path attributes.

Examples

A user profile setting field labeled ‘Choose Theme Accent Color’ that stores hexadecimal value text strings.
An asset categorization input to tag organizational records with colored identity flags.

Avoid

Using as a static or read-only color swatch preview where user interaction is not required, use color_field instead of an interactive picker component.
Attempting to configure form Data Source bindings (Element ID and Field Path) before placing a parent default_form component on the page canvas layout.
Passing invalid hex format strings (e.g., missing leading ‘#’, using invalid characters, or writing plain color names like ‘blue’) in Default Value, which prevents the popup color picker from parsing initial color states.

Properties

Editor properties

Configure these in the Application Designer property panel. Group headings mirror the editor where possible. Data Source is where the element gets its rows or field binding (a view/query, a connector operation, or a parent form field). References appear only for view-backed sources and map foreign-key ID columns to readable labels from another view.

Data Source

Element IDrequiredNumber or TextInside `dataSource`: Another element on the page whose data backs this field.
Default: none
Field PathrequiredList of Text or NumberInside `dataSource`: Path into the source element’s data (property segments).
Default: none

Input

Default ValueoptionalNot set (null): The default fallback hexadecimal color string initialized before user interactions take place.
Example #FFFFFF
Default: none
DisabledoptionalYes / no or Custom expression (yes/no): When true, the control cannot be edited.
Example true
Default: none
NullableoptionalYes / no or Custom expression (yes/no): Whether the field may be left empty.
Example true
Default: none

Styling

PlacementoptionalOne of: bottom, top, end, start

Label position relative to the input control.

Choices

bottom — The text label sits centered beneath the color square block layout footprint.
top — The text label renders above the boundary line of the color input square.
end — The text label renders to the right side of the color picker square window frame.
start — The text label renders to the left side of the input frame block.

Default: none

Sizing

No size of its own: dropped at the platform default of 1 × 1 grid cells and resized on the page.

Translatable labels

label — Plain text description framing what color entity the field modifies.

Accessibility

Clicking the input block reveals a modal-focused palette selector window. Emits descriptive value updates to assistive screens as Hex string formats match state logs.

Expressions

Values you can read in expressions

Other parts of your app can read live values from this element in custom expressions:

elements.myColorInput.<property>

value string Current input value of this control. elements.myColorInput.value

When The chosen colour string. Feed it to a colour expression on another element to preview the choice before saving.

disabled boolean True while the control is locked and cannot be edited. elements.myColorInput.disabled

To use one of these, open the property you want to drive on the other element, switch it to expression mode in the Expression Editor, and enter:

1
elements.myColorInput.value

Replace myColorInput with this element’s unique id. Select the element in Application Designer and copy the id chip at the top of the right-hand property panel.

Composition

Where you can place it

Drag this element into one of these containers:

Sample configuration

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
{
  "config": {
    "dataSource": {
      "elementId": "myElement",
      "fieldPath": [
        "fieldPath"
      ]
    },
    "defaultValue": "defaultValue",
    "disabled": false,
    "nullable": false,
    "placement": "bottom"
  }
}

Ready-made setups

Form Accent Color Input ↕

A standard color input component placed inside a form container layout with its text descriptor placed above the block bounds.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
{
  "config": {
    "dataSource": {
      "elementId": "themeFormWrapper",
      "fieldPath": [
        "accentHexCode"
      ]
    },
    "input": {
      "defaultValue": "#3F51B5",
      "nullable": false
    },
    "styling": {
      "placement": "top"
    }
  }
}