ColorInput — Smart UI JavaScript API

ColorInput — Smart UI JavaScript API

On this page + Quick start

Quick start · JavaScript

Complete starter source per framework. Run the scaffold/install command first, then replace the listed files with the full code below.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>ColorInput - JavaScript Quick Start</title>
  <link rel="stylesheet" href="./node_modules/smart-webcomponents/source/styles/smart.default.css" />
</head>
<body>
  <smart-color-input id="demo-colorinput"></smart-color-input>

  <script type="module">
    import './node_modules/smart-webcomponents/source/modules/smart.colorinput.js';

    const el = document.getElementById('demo-colorinput');
    if (el) {

      el.value = '#3f51b5';

      el.addEventListener('change', (event) => console.log('change:', event.detail || event));
    }
  </script>
</body>
</html>
For AI tooling

Developer Quick Reference

Component: ColorInput   Framework: JavaScript   Selector: smart-color-input

API counts: 27 properties, 3 methods, 1 events

Common properties: 0, 1, 2, 3, 4, 5

Common methods: close(), open(), select()

Common events: change

Module hint: smart-webcomponents/source/modules/smart.colorinput.js

ColorInput is an input field with colors displayed in a DropDown grid like in Excel.

Class

ColorInput

ColorInput

ColorInput is an input field with colors displayed in a DropDown grid like in Excel.

Selector

smart-color-input

Quick picks

changeclosedataSourcedisableditemsopenvalue

Properties

AanimationSpecifies or retrieves the current animation mode. When this property is set to 'none', all animations are disabled. Otherwise, the specified animation mode determines how animations are displayed.
AautoCompleteDelaySpecifies the amount of time, in milliseconds, to wait before displaying the dropdown menu that shows matching suggestions from the autocomplete operation. This delay begins after the user stops typing, allowing you to control how quickly the autocomplete dropdown appears in response to user input.
DdataSourceSpecifies the source of data that provides the available color options to be loaded into the Input component. The dataSource property accepts one of the following formats:- 'Array of strings': Each string represents a valid color value.- 'Array of objects': Each object should contain attributes (such as label and value) that define the display properties and value of each color option in the list.- 'Callback function': A function that returns an array of items in either of the above formats (strings or objects with the specified attributes).This flexibility allows you to populate the Input with color choices from static lists or dynamic sources, ensuring seamless integration with various data structures.
DdisabledDetermines whether the element is interactive or not. When enabled, users can interact with the element; when disabled, the element becomes non-interactive and may appear visually subdued.
DdisplayModeSpecifies the color palette to be used, including the individual colors and their arrangement or positioning within the user interface. This setting controls both the selection of colors and how they are visually organized or applied throughout the application.
DdropDownButtonPositionSpecifies the placement of the dropdown button relative to its parent element, such as aligning it to the left, right, top, or bottom. This setting controls where the dropdown button will appear within the interface.
DdropDownHeightSpecifies the height of the dropdown menu. By default, this value is an empty string, which means the dropdown's height is determined by the associated CSS variable. If a specific height is provided, it will override the default CSS variable, allowing you to directly control the dropdown's height through this property.
DdropDownWidthSpecifies the width of the dropdown menu. By default, this property is set to an empty string (""), which means the dropdown's width will be determined by the value of a corresponding CSS variable rather than an explicit pixel or percentage value. You can override the default behavior by providing a specific width (e.g., "200px", "50%") to directly control the dropdown’s size. If left empty, ensure the relevant CSS variable is defined to maintain consistent styling.
IinputPurposeSpecifies the expected type of input for the form element and informs the browser about the purpose of the field. This allows the user agent (such as a web browser or password manager) to offer relevant, automated suggestions or autofill options to the user, based on previously entered or stored data. This property corresponds to the standard HTML autocomplete attribute, which accepts values like 'on' (enables autofill), 'off' (disables autofill), 'name', 'email', 'organization', 'street-address', and many others. Setting this attribute properly enhances accessibility, improves user experience, and ensures that the browser presents the correct input suggestions for each form field.
IitemsSpecifies the maximum number of items that can be displayed in the dropdown list as results of a new autoComplete query. When a user enters a search term, only up to this number of matching items will be shown in the dropdown. By default, a maximum of 8 items are visible, ensuring that the dropdown remains manageable and user-friendly. If there are more matching items than the specified maximum, only the first set will be displayed.
LlocaleDefines or retrieves the current language code (e.g., 'en', 'fr'), which determines the locale used for displaying messages. This property works together with the messages property to select the appropriate set of localized messages for the specified language.
LlocalizeFormatFunctionCallback function that allows you to customize the formatting of messages returned by the Localization Module. Use this to modify, localize, or adjust the appearance of messages before they are delivered to the user interface.
MmessagesDefines or retrieves an object containing localized string values used throughout the widget’s user interface. This property allows you to customize or translate text elements, such as labels, tooltips, and messages, enabling support for multiple languages. It should be used together with the locale property to ensure that the correct set of localized strings is applied based on the selected language or region.
MminLengthSpecifies the minimum number of characters a user must enter into the input field before the autocomplete functionality is activated. Once this threshold is reached, the dropdown menu will open and display the list of matching items based on the user's input.
NnameSets or retrieves the value of the element’s name attribute. The name attribute uniquely identifies the element within an HTML form and is used as the key when the form data is submitted to the server. This allows the submitted data to be organized and referenced by the specified name.
OopenedSpecifies whether the dropdown menu is currently open (visible) or closed (hidden).
PplaceholderSpecifies the placeholder text that appears within the input field when it is empty, providing a hint or example to guide users on the expected input format.
QqueryDefines or retrieves the filter query used to narrow down the displayed items. This query is utilized by the autoComplete operation to show only items that match the specified criteria. If the query is set to an empty string, no filtering is applied, and all items from the data source are displayed.
QqueryModeSpecifies the query mode used for autocomplete operations. This property defines how the autocomplete engine interprets and matches user input against available data, determining the matching algorithm and search behavior (such as prefix, infix, or fuzzy matching) for generating autocomplete suggestions.
RreadonlySpecifies whether the input field is editable by the user. If set to true, the user can type text directly into the input. If set to false, the input becomes read-only, and the user can only select from the provided options. When a dataSource is supplied, this property also determines the component's behavior: - If editable is true, the element functions as a ComboBox, allowing users to enter custom values or select from the list. - If editable is false, the element acts as a DropDownList, restricting selection to the available options in the dataSource only.
RrightToLeftSets or retrieves a value that determines whether the element's content alignment is configured for right-to-left languages, such as Arabic or Hebrew. This ensures proper layout and text direction for locales that require right-to-left reading order.
TthemeSpecifies the visual theme to be applied to the element. The selected theme controls the element's overall appearance, including colors, fonts, backgrounds, and other stylistic properties, to ensure a consistent look and feel across the user interface.
UunfocusableIf set to true, the element will be excluded from keyboard navigation and cannot receive focus via the Tab key or programmatically.
UunlockKeySets or retrieves the unlockKey, a unique code or token required to unlock and activate access to the product’s full features.
VvalueSets or retrieves the current value of the element, allowing you to either update its content programmatically or access its existing value for processing. This is commonly used with form elements such as input, textarea, and select to manage user input dynamically.
VvalueDisplayModeSpecifies the content or controls that will appear within the action section of the color picker component. This determines which buttons, options, or interface elements are available to the user when interacting with the color picker’s action area.
VvalueFormatSpecifies the format in which the color value is represented. Supported formats include HEX, RGB, and RGBA. By default, the color format is automatically selected based on the current displayMode setting.

Events

CchangeThis event is triggered whenever the user modifies the current selection, such as highlighting a different range of text, choosing another item in a list, or altering the selected elements within an interface. It fires immediately after the selection change occurs, allowing you to respond dynamically to user interactions.

Methods

CcloseCloses the dropdown menu, hiding all currently visible options and returning the component to its default, collapsed state.
OopenDisplays the dropdown menu, allowing the user to view and select available options.
SselectSelects the text inside the input element. If the input is set to readonly, the element will be focused instead, without selecting the text.

Properties

animationSpecifies or retrieves the current animation mode. When this property is set to 'none', all animations are disabled. Otherwise, the specified animation mode determines how animations are displayed."none" | "simple" | "advanced"

Specifies or retrieves the current animation mode. When this property is set to 'none', all animations are disabled. Otherwise, the specified animation mode determines how animations are displayed.

Allowed Values

  • "none" - animation is disabled
  • "simple" - ripple animation is disabled
  • "advanced" - all animations are enabled

Default value

"advanced"

Examples

Markup and runtime examples for animation:

HTML:

<smart-color-input animation="none"></smart-color-input>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-color-input');
el.animation = "simple";

Read the current value:

const el = document.querySelector('smart-color-input');
const animation = el.animation;

autoCompleteDelaySpecifies the amount of time, in milliseconds, to wait before displaying the dropdown menu that shows matching suggestions from the autocomplete operation. This delay begins after the user stops typing, allowing you to control how quickly the autocomplete dropdown appears in response to user input.number

Specifies the amount of time, in milliseconds, to wait before displaying the dropdown menu that shows matching suggestions from the autocomplete operation. This delay begins after the user stops typing, allowing you to control how quickly the autocomplete dropdown appears in response to user input.

Default value

100

Examples

Markup and runtime examples for autoCompleteDelay:

HTML:

<smart-color-input auto-complete-delay="50"></smart-color-input>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-color-input');
el.autoCompleteDelay = 200;

Read the current value:

const el = document.querySelector('smart-color-input');
const autoCompleteDelay = el.autoCompleteDelay;

dataSourceSpecifies the source of data that provides the available color options to be loaded into the Input component. The dataSource property accepts one of the following formats:- 'Array of strings': Each string represents a valid color value.- 'Array of objects': Each object should contain attributes (such as label and value) that define the display properties and value of each color option in the list.- 'Callback function': A function that returns an array of items in either of the above formats (strings or objects with the specified attributes).This flexibility allows you to populate the Input with color choices from static lists or dynamic sources, ensuring seamless integration with various data structures.any

Specifies the source of data that provides the available color options to be loaded into the Input component. The dataSource property accepts one of the following formats:

- 'Array of strings': Each string represents a valid color value.
- 'Array of objects': Each object should contain attributes (such as label and value) that define the display properties and value of each color option in the list.
- 'Callback function': A function that returns an array of items in either of the above formats (strings or objects with the specified attributes).

This flexibility allows you to populate the Input with color choices from static lists or dynamic sources, ensuring seamless integration with various data structures.

Examples

Markup and runtime examples for dataSource:

HTML:

<smart-color-input data-source="[{ label: "item 1", value: 1 }, { label: "item 2", value: 2 }]"></smart-color-input>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-color-input');
el.dataSource = ["new item 1", "new item 2"];

Read the current value:

const el = document.querySelector('smart-color-input');
const dataSource = el.dataSource;

disabledDetermines whether the element is interactive or not. When enabled, users can interact with the element; when disabled, the element becomes non-interactive and may appear visually subdued.boolean

Determines whether the element is interactive or not. When enabled, users can interact with the element; when disabled, the element becomes non-interactive and may appear visually subdued.

Default value

false

Examples

Markup and runtime examples for disabled:

HTML attribute:

<smart-color-input disabled></smart-color-input>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-color-input');
el.disabled = false;

Read the current value:

const el = document.querySelector('smart-color-input');
const disabled = el.disabled;

displayModeSpecifies the color palette to be used, including the individual colors and their arrangement or positioning within the user interface. This setting controls both the selection of colors and how they are visually organized or applied throughout the application."default" | "grid"

Specifies the color palette to be used, including the individual colors and their arrangement or positioning within the user interface. This setting controls both the selection of colors and how they are visually organized or applied throughout the application.

Allowed Values

  • "default" - Represents a grid of all standart colors that are most frequently used.
  • "grid" - Represents a predefined grid of colors or a custom grid of colors. The dataSource property determines the colors that will be loaded in the grid.

Default value

"default"
Try a demo showcasing the displayMode property.

Examples

Markup and runtime examples for displayMode:

HTML:

<smart-color-input display-mode="grid"></smart-color-input>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-color-input');
el.displayMode = "default";

Read the current value:

const el = document.querySelector('smart-color-input');
const displayMode = el.displayMode;

dropDownButtonPositionSpecifies the placement of the dropdown button relative to its parent element, such as aligning it to the left, right, top, or bottom. This setting controls where the dropdown button will appear within the interface."left" | "right" | "top" | "bottom"

Specifies the placement of the dropdown button relative to its parent element, such as aligning it to the left, right, top, or bottom. This setting controls where the dropdown button will appear within the interface.

Allowed Values

  • "left" - Positions the drop down button on the left side of the element.
  • "right" - Positions the drop down button on the right side of the element.
  • "top" - Positions the drop down button on the top side of the element.
  • "bottom" - Positions the drop down button on the bottom side of the element.

Default value

"none"

Examples

Markup and runtime examples for dropDownButtonPosition:

HTML:

<smart-color-input drop-down-button-position="left"></smart-color-input>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-color-input');
el.dropDownButtonPosition = "right";

Read the current value:

const el = document.querySelector('smart-color-input');
const dropDownButtonPosition = el.dropDownButtonPosition;

dropDownHeightSpecifies the height of the dropdown menu. By default, this value is an empty string, which means the dropdown's height is determined by the associated CSS variable. If a specific height is provided, it will override the default CSS variable, allowing you to directly control the dropdown's height through this property.string | number

Specifies the height of the dropdown menu. By default, this value is an empty string, which means the dropdown's height is determined by the associated CSS variable. If a specific height is provided, it will override the default CSS variable, allowing you to directly control the dropdown's height through this property.

Default value

""

Examples

Markup and runtime examples for dropDownHeight:

HTML:

<smart-color-input drop-down-height="300"></smart-color-input>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-color-input');
el.dropDownHeight = 500;

Read the current value:

const el = document.querySelector('smart-color-input');
const dropDownHeight = el.dropDownHeight;

dropDownWidthSpecifies the width of the dropdown menu. By default, this property is set to an empty string (""), which means the dropdown's width will be determined by the value of a corresponding CSS variable rather than an explicit pixel or percentage value. You can override the default behavior by providing a specific width (e.g., "200px", "50%") to directly control the dropdown’s size. If left empty, ensure the relevant CSS variable is defined to maintain consistent styling.string | number

Specifies the width of the dropdown menu. By default, this property is set to an empty string (""), which means the dropdown's width will be determined by the value of a corresponding CSS variable rather than an explicit pixel or percentage value. You can override the default behavior by providing a specific width (e.g., "200px", "50%") to directly control the dropdown’s size. If left empty, ensure the relevant CSS variable is defined to maintain consistent styling.

Default value

""

Examples

Markup and runtime examples for dropDownWidth:

HTML:

<smart-color-input drop-down-width="300"></smart-color-input>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-color-input');
el.dropDownWidth = 500;

Read the current value:

const el = document.querySelector('smart-color-input');
const dropDownWidth = el.dropDownWidth;

inputPurposeSpecifies the expected type of input for the form element and informs the browser about the purpose of the field. This allows the user agent (such as a web browser or password manager) to offer relevant, automated suggestions or autofill options to the user, based on previously entered or stored data. This property corresponds to the standard HTML autocomplete attribute, which accepts values like 'on' (enables autofill), 'off' (disables autofill), 'name', 'email', 'organization', 'street-address', and many others. Setting this attribute properly enhances accessibility, improves user experience, and ensures that the browser presents the correct input suggestions for each form field.string

Specifies the expected type of input for the form element and informs the browser about the purpose of the field. This allows the user agent (such as a web browser or password manager) to offer relevant, automated suggestions or autofill options to the user, based on previously entered or stored data. This property corresponds to the standard HTML autocomplete attribute, which accepts values like 'on' (enables autofill), 'off' (disables autofill), 'name', 'email', 'organization', 'street-address', and many others. Setting this attribute properly enhances accessibility, improves user experience, and ensures that the browser presents the correct input suggestions for each form field.

Default value

"off"

Examples

Markup and runtime examples for inputPurpose:

HTML:

<smart-color-input input-purpose="on"></smart-color-input>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-color-input');
el.inputPurpose = "country";

Read the current value:

const el = document.querySelector('smart-color-input');
const inputPurpose = el.inputPurpose;

itemsSpecifies the maximum number of items that can be displayed in the dropdown list as results of a new autoComplete query. When a user enters a search term, only up to this number of matching items will be shown in the dropdown. By default, a maximum of 8 items are visible, ensuring that the dropdown remains manageable and user-friendly. If there are more matching items than the specified maximum, only the first set will be displayed.number

Specifies the maximum number of items that can be displayed in the dropdown list as results of a new autoComplete query. When a user enters a search term, only up to this number of matching items will be shown in the dropdown. By default, a maximum of 8 items are visible, ensuring that the dropdown remains manageable and user-friendly. If there are more matching items than the specified maximum, only the first set will be displayed.

Default value

8

Examples

Markup and runtime examples for items:

HTML:

<smart-color-input items="2"></smart-color-input>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-color-input');
el.items = 5;

Read the current value:

const el = document.querySelector('smart-color-input');
const items = el.items;

localeDefines or retrieves the current language code (e.g., 'en', 'fr'), which determines the locale used for displaying messages. This property works together with the messages property to select the appropriate set of localized messages for the specified language.string

Defines or retrieves the current language code (e.g., 'en', 'fr'), which determines the locale used for displaying messages. This property works together with the messages property to select the appropriate set of localized messages for the specified language.

Default value

"en"

Examples

Markup and runtime examples for locale:

HTML:

<smart-color-input locale="de"></smart-color-input>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-color-input');
el.locale = "en";

Read the current value:

const el = document.querySelector('smart-color-input');
const locale = el.locale;

localizeFormatFunctionCallback function that allows you to customize the formatting of messages returned by the Localization Module. Use this to modify, localize, or adjust the appearance of messages before they are delivered to the user interface.function

Callback function that allows you to customize the formatting of messages returned by the Localization Module. Use this to modify, localize, or adjust the appearance of messages before they are delivered to the user interface.

Examples

Markup and runtime examples for localizeFormatFunction:

HTML:

<smart-color-input localize-format-function="function(defaultMessage, message, messageArguments){return '...'}"></smart-color-input>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-color-input');
el.localizeFormatFunction = "function(defaultMessage, message, messageArguments){return '...'}";

Read the current value:

const el = document.querySelector('smart-color-input');
const localizeFormatFunction = el.localizeFormatFunction;

messagesDefines or retrieves an object containing localized string values used throughout the widget’s user interface. This property allows you to customize or translate text elements, such as labels, tooltips, and messages, enabling support for multiple languages. It should be used together with the locale property to ensure that the correct set of localized strings is applied based on the selected language or region.object

Defines or retrieves an object containing localized string values used throughout the widget’s user interface. This property allows you to customize or translate text elements, such as labels, tooltips, and messages, enabling support for multiple languages. It should be used together with the locale property to ensure that the correct set of localized strings is applied based on the selected language or region.

Default value




"en": {

"propertyUnknownType": "'{{name}}' property is with undefined 'type' member!",

"propertyInvalidValue": "Invalid '{{name}}' property value! Actual value: {{actualValue}}, Expected value: {{value}}!",

"propertyInvalidValueType": "Invalid '{{name}}' property value type! Actual type: {{actualType}}, Expected type: {{type}}!",

"elementNotInDOM": "Element does not exist in DOM! Please, add the element to the DOM, before invoking a method.",

"moduleUndefined": "Module is undefined.",

"missingReference": "{{elementType}}: Missing reference to {{files}}.",

"htmlTemplateNotSuported": "{{elementType}}: Browser doesn't support HTMLTemplate elements.",

"invalidTemplate": "{{elementType}}: '{{property}}' property accepts a string that must match the id of an HTMLTemplate element from the DOM.",

"invalidNode": "{{elementType}}: Invalid parameter '{{node}}' when calling {{method}}."

}

Try a demo showcasing the messages property.

Examples

Markup and runtime examples for messages:

HTML:

<smart-color-input messages="{"de":{"propertyUnknownType":"Die Eigenschaft '{{name}}' hat ein nicht definiertes 'type'-Member!","propertyInvalidValue":"Ungultiger Eigenschaftswert '{{name}}'! Aktueller Wert: {{actualValue}}, Erwarteter Wert: {{value}}!","propertyInvalidValueType":"Ungultiger Eigenschaftswert '{{name}}'! Aktueller Wert: {{actualType}}, Erwarteter Wert: {{type}}!","elementNotInDOM":"Element existiert nicht in DOM! Bitte fugen Sie das Element zum DOM hinzu, bevor Sie eine Methode aufrufen.","moduleUndefined":"Modul ist nicht definiert.","missingReference":"{{elementType}}: Fehlender Verweis auf {{files}}.","htmlTemplateNotSuported":"{{elementType}}: Browser unterstutzt keine HTMLTemplate-Elemente.","invalidTemplate":"{{elementType}}: '{{property}}' Die Eigenschaft akzeptiert eine Zeichenfolge, die mit der ID eines HTMLTemplate-Elements aus dem DOM ubereinstimmen muss.","invalidNode":"{{elementType}}: Ungultiger Parameter '{{node}}' beim Aufruf von {{method}}."}}"></smart-color-input>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-color-input');
el.messages = {"en":{"propertyUnknownType":"'{{name}}' property is with undefined 'type' member!","propertyInvalidValue":"Invalid '{{name}}' property value! Actual value: {{actualValue}}, Expected value: {{value}}!","propertyInvalidValueType":"Invalid '{{name}}' property value type! Actual type: {{actualType}}, Expected type: {{type}}!","elementNotInDOM":"Element does not exist in DOM! Please, add the element to the DOM, before invoking a method.","moduleUndefined":"Module is undefined.","missingReference":"{{elementType}}: Missing reference to {{files}}.","htmlTemplateNotSuported":"{{elementType}}: Browser doesn't support HTMLTemplate elements.","invalidTemplate":"{{elementType}}: '{{property}}' property accepts a string that must match the id of an HTMLTemplate element from the DOM.","invalidNode":"{{elementType}}: Invalid parameter '{{node}}' when calling {{method}}."}};

Read the current value:

const el = document.querySelector('smart-color-input');
const messages = el.messages;

minLengthSpecifies the minimum number of characters a user must enter into the input field before the autocomplete functionality is activated. Once this threshold is reached, the dropdown menu will open and display the list of matching items based on the user's input.number

Specifies the minimum number of characters a user must enter into the input field before the autocomplete functionality is activated. Once this threshold is reached, the dropdown menu will open and display the list of matching items based on the user's input.

Default value

1

Examples

Markup and runtime examples for minLength:

HTML:

<smart-color-input min-length="2"></smart-color-input>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-color-input');
el.minLength = 0;

Read the current value:

const el = document.querySelector('smart-color-input');
const minLength = el.minLength;

nameSets or retrieves the value of the element’s name attribute. The name attribute uniquely identifies the element within an HTML form and is used as the key when the form data is submitted to the server. This allows the submitted data to be organized and referenced by the specified name.string

Sets or retrieves the value of the element’s name attribute. The name attribute uniquely identifies the element within an HTML form and is used as the key when the form data is submitted to the server. This allows the submitted data to be organized and referenced by the specified name.

Default value

""

Examples

Markup and runtime examples for name:

HTML:

<smart-color-input name="dropdown"></smart-color-input>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-color-input');
el.name = "dropDown2";

Read the current value:

const el = document.querySelector('smart-color-input');
const name = el.name;

openedSpecifies whether the dropdown menu is currently open (visible) or closed (hidden).boolean

Specifies whether the dropdown menu is currently open (visible) or closed (hidden).

Default value

false

Examples

Markup and runtime examples for opened:

HTML attribute:

<smart-color-input opened></smart-color-input>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-color-input');
el.opened = false;

Read the current value:

const el = document.querySelector('smart-color-input');
const opened = el.opened;

placeholderSpecifies the placeholder text that appears within the input field when it is empty, providing a hint or example to guide users on the expected input format.string

Specifies the placeholder text that appears within the input field when it is empty, providing a hint or example to guide users on the expected input format.

Default value

""
Try a demo showcasing the placeholder property.

Examples

Markup and runtime examples for placeholder:

HTML:

<smart-color-input placeholder="Empty"></smart-color-input>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-color-input');
el.placeholder = "Enter:";

Read the current value:

const el = document.querySelector('smart-color-input');
const placeholder = el.placeholder;

queryDefines or retrieves the filter query used to narrow down the displayed items. This query is utilized by the autoComplete operation to show only items that match the specified criteria. If the query is set to an empty string, no filtering is applied, and all items from the data source are displayed.string | number

Defines or retrieves the filter query used to narrow down the displayed items. This query is utilized by the autoComplete operation to show only items that match the specified criteria. If the query is set to an empty string, no filtering is applied, and all items from the data source are displayed.

Default value

""

Examples

Markup and runtime examples for query:

HTML:

<smart-color-input query="ABC"></smart-color-input>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-color-input');
el.query = "'some query'";

Read the current value:

const el = document.querySelector('smart-color-input');
const query = el.query;

queryModeSpecifies the query mode used for autocomplete operations. This property defines how the autocomplete engine interprets and matches user input against available data, determining the matching algorithm and search behavior (such as prefix, infix, or fuzzy matching) for generating autocomplete suggestions."contains" | "containsIgnoreCase" | "doesNotContain" | "doesNotContainIgnoreCase" | "equals" | "equalsIgnoreCase" | "startsWith" | "startsWithIgnoreCase" | "endsWith" | "endsWithIgnoreCase"

Specifies the query mode used for autocomplete operations. This property defines how the autocomplete engine interprets and matches user input against available data, determining the matching algorithm and search behavior (such as prefix, infix, or fuzzy matching) for generating autocomplete suggestions.

Allowed Values

  • "contains" - Displays the items that contain the search query (case sensitive)
  • "containsIgnoreCase" - Displays the items that contain the search query (case insensitive)
  • "doesNotContain" - Displays the items that do not contain the search query (case sensitive)
  • "doesNotContainIgnoreCase" - Displays the items that do not contain the search query (case insensitive)
  • "equals" - Displays the items that are equal the search query (case sensitive)
  • "equalsIgnoreCase" - Displays the items that are equal the search query (case insensitive)
  • "startsWith" - Displays the items that start with the search query (case sensitive)
  • "startsWithIgnoreCase" - Displays the items that start with the search query (case insensitive)
  • "endsWith" - Displays the items that end with the search query (case sensitive)
  • "endsWithIgnoreCase" - Displays the items that start with the search query (case insensitive)

Default value

"containsIgnoreCase"

Examples

Markup and runtime examples for queryMode:

HTML:

<smart-color-input query-mode="contains"></smart-color-input>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-color-input');
el.queryMode = "endsWith";

Read the current value:

const el = document.querySelector('smart-color-input');
const queryMode = el.queryMode;

readonlySpecifies whether the input field is editable by the user. If set to true, the user can type text directly into the input. If set to false, the input becomes read-only, and the user can only select from the provided options. When a dataSource is supplied, this property also determines the component's behavior: - If editable is true, the element functions as a ComboBox, allowing users to enter custom values or select from the list. - If editable is false, the element acts as a DropDownList, restricting selection to the available options in the dataSource only.boolean

Specifies whether the input field is editable by the user. If set to true, the user can type text directly into the input. If set to false, the input becomes read-only, and the user can only select from the provided options. When a dataSource is supplied, this property also determines the component's behavior:
- If editable is true, the element functions as a ComboBox, allowing users to enter custom values or select from the list.
- If editable is false, the element acts as a DropDownList, restricting selection to the available options in the dataSource only.

Default value

false

Examples

Markup and runtime examples for readonly:

HTML attribute:

<smart-color-input readonly></smart-color-input>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-color-input');
el.readonly = false;

Read the current value:

const el = document.querySelector('smart-color-input');
const readonly = el.readonly;

rightToLeftSets or retrieves a value that determines whether the element's content alignment is configured for right-to-left languages, such as Arabic or Hebrew. This ensures proper layout and text direction for locales that require right-to-left reading order.boolean

Sets or retrieves a value that determines whether the element's content alignment is configured for right-to-left languages, such as Arabic or Hebrew. This ensures proper layout and text direction for locales that require right-to-left reading order.

Default value

false
Try a demo showcasing the rightToLeft property.

Examples

Markup and runtime examples for rightToLeft:

HTML attribute:

<smart-color-input right-to-left></smart-color-input>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-color-input');
el.rightToLeft = true;

Read the current value:

const el = document.querySelector('smart-color-input');
const rightToLeft = el.rightToLeft;

themeSpecifies the visual theme to be applied to the element. The selected theme controls the element's overall appearance, including colors, fonts, backgrounds, and other stylistic properties, to ensure a consistent look and feel across the user interface.string

Specifies the visual theme to be applied to the element. The selected theme controls the element's overall appearance, including colors, fonts, backgrounds, and other stylistic properties, to ensure a consistent look and feel across the user interface.

Default value

""

Examples

Markup and runtime examples for theme:

HTML:

<smart-color-input theme="blue"></smart-color-input>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-color-input');
el.theme = "red";

Read the current value:

const el = document.querySelector('smart-color-input');
const theme = el.theme;

unfocusableIf set to true, the element will be excluded from keyboard navigation and cannot receive focus via the Tab key or programmatically.boolean

If set to true, the element will be excluded from keyboard navigation and cannot receive focus via the Tab key or programmatically.

Default value

false

Examples

Markup and runtime examples for unfocusable:

HTML attribute:

<smart-color-input unfocusable></smart-color-input>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-color-input');
el.unfocusable = false;

Read the current value:

const el = document.querySelector('smart-color-input');
const unfocusable = el.unfocusable;

unlockKeySets or retrieves the unlockKey, a unique code or token required to unlock and activate access to the product’s full features.string

Sets or retrieves the unlockKey, a unique code or token required to unlock and activate access to the product’s full features.

Default value

""

Examples

Markup and runtime examples for unlockKey:

HTML:

<smart-color-input unlock-key=""></smart-color-input>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-color-input');
el.unlockKey = "1111-2222-3333-4444-5555";

Read the current value:

const el = document.querySelector('smart-color-input');
const unlockKey = el.unlockKey;

valueSets or retrieves the current value of the element, allowing you to either update its content programmatically or access its existing value for processing. This is commonly used with form elements such as input, textarea, and select to manage user input dynamically.string

Sets or retrieves the current value of the element, allowing you to either update its content programmatically or access its existing value for processing. This is commonly used with form elements such as input, textarea, and select to manage user input dynamically.

Default value

""
Try a demo showcasing the value property.

Examples

Markup and runtime examples for value:

HTML:

<smart-color-input value="#000000"></smart-color-input>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-color-input');
el.value = "#ffffff";

Read the current value:

const el = document.querySelector('smart-color-input');
const value = el.value;

valueDisplayModeSpecifies the content or controls that will appear within the action section of the color picker component. This determines which buttons, options, or interface elements are available to the user when interacting with the color picker’s action area."default" | "colorBox" | "colorCode" | "none"

Specifies the content or controls that will appear within the action section of the color picker component. This determines which buttons, options, or interface elements are available to the user when interacting with the color picker’s action area.

Allowed Values

  • "default" - The color box and the color code are displayed next to the drop down button.
  • "colorBox" - Only the color box is visible next to the drop down button.
  • "colorCode" - Only the color code is dispalyed next to the drop down button.
  • "none" - Only the drop down button is displayed.

Default value

"default"

Examples

Markup and runtime examples for valueDisplayMode:

HTML:

<smart-color-input value-display-mode="colorBox"></smart-color-input>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-color-input');
el.valueDisplayMode = "default";

Read the current value:

const el = document.querySelector('smart-color-input');
const valueDisplayMode = el.valueDisplayMode;

valueFormatSpecifies the format in which the color value is represented. Supported formats include HEX, RGB, and RGBA. By default, the color format is automatically selected based on the current displayMode setting."default" | "rgb" | "rgba" | "hex"

Specifies the format in which the color value is represented. Supported formats include HEX, RGB, and RGBA. By default, the color format is automatically selected based on the current displayMode setting.

Allowed Values

  • "default" - The value is presented depending on the displayMode.
  • "rgb" - The value is presented as RGB color.
  • "rgba" - The value is presented as RGBA color.
  • "hex" - The value is presented as HEX color.

Default value

"default"

Examples

Markup and runtime examples for valueFormat:

HTML:

<smart-color-input value-format="rgba"></smart-color-input>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-color-input');
el.valueFormat = "rgb";

Read the current value:

const el = document.querySelector('smart-color-input');
const valueFormat = el.valueFormat;

Events

changeThis event is triggered whenever the user modifies the current selection, such as highlighting a different range of text, choosing another item in a list, or altering the selected elements within an interface. It fires immediately after the selection change occurs, allowing you to respond dynamically to user interactions.CustomEvent

This event is triggered whenever the user modifies the current selection, such as highlighting a different range of text, choosing another item in a list, or altering the selected elements within an interface. It fires immediately after the selection change occurs, allowing you to respond dynamically to user interactions.

  • Bubbles Yes
  • Cancelable No
  • Interface CustomEvent
  • Event handler property onChange

Arguments

evCustomEvent
ev.detailObject
ev.detail.label - The label of the new selected color.
ev.detail.oldLabel - The label of the color that was previously selected before the event was triggered.
ev.detail.oldValue - The value of the color that was previously selected before the event was triggered.
ev.detail.value - The value of the new selected color.

Methods

isDefaultPrevented

Returns true if the event was prevented by any of its subscribers.

Returns

boolean true if the default action was prevented. Otherwise, returns false.

preventDefault

The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

stopPropagation

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

Examples

Listen for change using the pattern that matches your stack.

DOM — listen on the custom element (use a specific selector if the page has more than one):

document.querySelector('smart-color-input')?.addEventListener('change', (event) => {
    const detail = event.detail,
        label = detail.label,
        oldLabel = detail.oldLabel,
        oldValue = detail.oldValue,
        value = detail.value;

	// event handling code goes here.
})

Methods

close(): voidCloses the dropdown menu, hiding all currently visible options and returning the component to its default, collapsed state.

Closes the dropdown menu, hiding all currently visible options and returning the component to its default, collapsed state.

On the custom element in the DOM (narrow the selector, e.g. to #my-colorinput, if you host multiple widgets):

document.querySelector('smart-color-input')?.close();

open(): voidDisplays the dropdown menu, allowing the user to view and select available options.

Displays the dropdown menu, allowing the user to view and select available options.

On the custom element in the DOM (narrow the selector, e.g. to #my-colorinput, if you host multiple widgets):

document.querySelector('smart-color-input')?.open();

select(): voidSelects the text inside the input element. If the input is set to readonly, the element will be focused instead, without selecting the text.

Selects the text inside the input element. If the input is set to readonly, the element will be focused instead, without selecting the text.

On the custom element in the DOM (narrow the selector, e.g. to #my-colorinput, if you host multiple widgets):

document.querySelector('smart-color-input')?.select();