CheckInput — Smart UI JavaScript API

CheckInput — 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>CheckInput - JavaScript Quick Start</title>
  <link rel="stylesheet" href="./node_modules/smart-webcomponents/source/styles/smart.default.css" />
</head>
<body>
  <smart-check-input id="demo-checkinput"></smart-check-input>

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

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

      el.dataSource = ['Accepted', 'Rejected', 'Pending'];
      el.value = 'Accepted';

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

Developer Quick Reference

Component: CheckInput   Framework: JavaScript   Selector: smart-check-input

API counts: 30 properties, 4 methods, 1 events

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

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

Common events: change

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

CheckInput specifies an input field where the user can enter data. Auto-complete options with checkboxes are displayed for easier input. Checkboxes allow to select/unselect one or multiple items.

Class

CheckInput

CheckInput

CheckInput specifies an input field where the user can enter data. Auto-complete options with checkboxes are displayed for easier input. Checkboxes allow to select/unselect one or multiple items.

Selector

smart-check-input

Quick picks

changeclosedataSourcedisableditemsopenvalue

Properties

AanimationSpecifies or retrieves the current animation mode. When the property is set to 'none', all animation effects are disabled, resulting in instant transitions without visual motion. For other values, the property enables different types of animations, which govern how elements transition or change states on the interface.
AautoCompleteDelaySpecifies the amount of time, in milliseconds, to wait before displaying the dropdown menu with autocomplete suggestions after the user begins typing. This delay helps control how quickly the matches appear, improving performance and user experience by preventing the dropdown from opening immediately with every keystroke.
DdataSourceSpecifies the source of data that populates the Input component. The dataSource property accepts one of the following:- 'Array of primitive values': An array consisting of strings or numbers, where each element represents a list item.- 'Array of objects': An array of objects, where each object defines the properties of a list item—typically using keys such as label for display text and value for the underlying value.- 'Callback function': A function that, when called, returns either of the above array formats (strings, numbers, or objects).This flexibility allows you to provide static data inline, transform or fetch data dynamically, and customize which properties represent the list items.
DdisabledSpecifies whether the element is interactive and can accept user input. When enabled, the element is fully functional; when disabled, the element is rendered inactive and does not respond to user actions such as clicks, typing, or focus.
DdropDownButtonPositionSpecifies the placement of the dropdown button relative to its parent element (e.g., top, bottom, left, or right). This setting controls where the dropdown button will appear in the user interface.
DdropDownHeightSpecifies the height of the dropdown menu. By default, this property is set to an empty string, which means the dropdown's height is determined by a corresponding CSS variable. You can override the default behavior by explicitly setting a height value, otherwise the component will use the CSS variable to control its height.
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 a corresponding CSS variable. If a value is provided, it will override the CSS variable and explicitly set the width of the dropdown. This allows for flexible customization of the dropdown's appearance through either direct property assignment or external styling.
IinputPurposeSpecifies the intended purpose of the input field and determines whether the user’s browser (user agent) is permitted to offer automated autofill suggestions when the input appears within a form. This attribute provides guidance to the browser about the type of information that should be entered, enhancing both user experience and data accuracy by suggesting relevant values. It corresponds to the standard HTML autocomplete attribute, which can accept a variety of predefined values such as 'on' (to enable autofill), 'off' (to disable autofill), 'name' (for personal names), 'organization' (for company names), 'street-address' (for addresses), and many others. By setting this attribute appropriately, developers can improve form usability and help browsers provide more accurate suggestions based on the expected input type.
IitemsSpecifies the maximum number of matching items to display in the dropdown list when a new autoComplete query is performed. By default, up to 8 items will be shown in the dropdown. If the total number of matched items exceeds this limit, only the first 8 results will be visible to the user. Adjust this value to control how many suggestions are presented at once in the dropdown interface.
LlocaleSpecifies or retrieves the current language setting. This property determines which language-specific messages from the messages property are displayed. Changing the language will update the content shown to the user based on the corresponding localized messages defined in messages.
LlocalizeFormatFunctionA callback function that allows you to customize the formatting of messages generated by the Localization Module before they are returned to the application. This enables you to modify, translate, or format localization messages according to specific requirements or user preferences.
MmessagesDefines or retrieves an object containing localized string values used within the widget’s user interface, allowing for text elements to be easily translated into different languages. This property works in conjunction with the locale property to enable internationalization by customizing display text based on the selected language or regional setting.
MminLengthSpecifies the minimum number of characters a user must type into the input field before the autocomplete feature becomes active. Once this character threshold is reached, the dropdown will appear, displaying a list of items that match the entered text.
NnameSets or retrieves the value of the "name" attribute for the element. The "name" attribute identifies the element within an HTML form, and its value is used as the key when the form data is submitted to the server. This allows data associated with the element to be correctly grouped and processed on the server side.
OopenedSpecifies whether the dropdown menu is currently expanded and visible (open) or collapsed and hidden (closed).
PplaceholderSpecifies the placeholder text displayed inside the input field when it is empty, providing guidance or an example to the user about what to enter.
QquerySpecifies or retrieves the query string used to filter items in the data source. This query is utilized by the autoComplete functionality to determine which items should be displayed based on user input. If the query is an empty string, no filtering is applied and all items from the data source are shown.
QqueryModeSpecifies the autocomplete query mode, which controls how search suggestions are generated and determines the matching algorithm used for the autocomplete operation. This property influences whether autocomplete suggestions are based on prefix matching, fuzzy matching, or other supported algorithms.
RreadonlySpecifies whether the user is allowed to enter text directly into the input field. When the dropDownButtonPosition property is set to either 'left' or 'right', the readonly property controls the behavior of the component if a dataSource is provided: - If readonly is false, the element functions as a ComboBox, allowing text input and selection from the data source. - If readonly is true, it behaves as a DropDownList, restricting input to selection from the provided options only, and preventing manual text entry.
RrightToLeftSets or returns a value that determines whether the element’s text direction is set to right-to-left (RTL) alignment, enabling proper display for languages and locales that use RTL scripts, such as Arabic or Hebrew.
SselectAllSpecifies whether an extra option—typically "Select All" or "Deselect All"—is shown at the top of the options list. This option enables users to quickly select or unselect all available items in the list with a single action.
SselectedValuesRetrieves or assigns an array containing the currently selected values. This property allows you to access the full list of items that have been selected, or update the selection by providing a new array of values.
SseparatorSpecifies the character or string used to separate multiple selected items within the input field. This delimiter defines how individual selections are visually and programmatically distinguished from one another in the input’s value.
SsortDirectionSpecifies the sorting order to be used when sort is enabled. Set to asc for ascending order or desc for descending order.
SsortedSpecifies whether the items are arranged in alphabetical order. If set to true, the list will be sorted from A to Z based on item names; if false, the original order will be preserved.
TthemeSpecifies the visual theme applied to the element, controlling its overall appearance such as colors, fonts, and styles. Themes allow for consistent and customizable styling across elements within the application.
TtypeSpecifies the type of data that the input field accepts (e.g., text, number, email, password). Setting the input type controls the kind of input users can enter and may also influence the on-screen keyboard and validation behavior in web browsers.
UunfocusableWhen set to true, this property prevents the element from being focused, either by keyboard navigation (such as using the Tab key) or by mouse interaction. As a result, the element is removed from the page's tab order and cannot receive input focus.
UunlockKeyDefines the unlockKey property, which stores the unique key required to unlock and access the product. Use this property to set a new unlock key or retrieve the current unlock key associated with the product.
VvalueRetrieves the current value of the element or assigns a new value to it. This property allows you to programmatically access or update the element's value, depending on whether it is used as a getter or a setter. Commonly used with form elements such as input, textarea, and select to read or change user input.

Events

CchangeThis event is triggered whenever the user modifies the current selection. It occurs whenever the selected item(s) change, allowing you to respond to user interactions such as clicking, typing, or using keyboard navigation to alter the selection state.

Methods

CcloseCloses the dropdown menu, hiding all currently visible options and returning the component to its default collapsed state.
EensureVisibleEnsures that the currently active (selected) item within the list is always scrolled into view, so users can see and interact with their selection even when navigating through long or overflowing content.
OopenDisplays the dropdown menu, making its list of selectable options visible to the user.
SselectSelects the text inside the input field. If the input field is set to readonly, the function does not select the text but instead sets focus to the element. This ensures interactive behavior depending on whether the input can be edited.

Properties

animationSpecifies or retrieves the current animation mode. When the property is set to 'none', all animation effects are disabled, resulting in instant transitions without visual motion. For other values, the property enables different types of animations, which govern how elements transition or change states on the interface."none" | "simple" | "advanced"

Specifies or retrieves the current animation mode. When the property is set to 'none', all animation effects are disabled, resulting in instant transitions without visual motion. For other values, the property enables different types of animations, which govern how elements transition or change states on the interface.

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-check-input animation="none"></smart-check-input>

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

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

Read the current value:

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

autoCompleteDelaySpecifies the amount of time, in milliseconds, to wait before displaying the dropdown menu with autocomplete suggestions after the user begins typing. This delay helps control how quickly the matches appear, improving performance and user experience by preventing the dropdown from opening immediately with every keystroke.number

Specifies the amount of time, in milliseconds, to wait before displaying the dropdown menu with autocomplete suggestions after the user begins typing. This delay helps control how quickly the matches appear, improving performance and user experience by preventing the dropdown from opening immediately with every keystroke.

Default value

100

Examples

Markup and runtime examples for autoCompleteDelay:

HTML:

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

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

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

Read the current value:

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

dataSourceSpecifies the source of data that populates the Input component. The dataSource property accepts one of the following:- 'Array of primitive values': An array consisting of strings or numbers, where each element represents a list item.- 'Array of objects': An array of objects, where each object defines the properties of a list item—typically using keys such as label for display text and value for the underlying value.- 'Callback function': A function that, when called, returns either of the above array formats (strings, numbers, or objects).This flexibility allows you to provide static data inline, transform or fetch data dynamically, and customize which properties represent the list items.any

Specifies the source of data that populates the Input component. The dataSource property accepts one of the following:

- 'Array of primitive values': An array consisting of strings or numbers, where each element represents a list item.
- 'Array of objects': An array of objects, where each object defines the properties of a list item—typically using keys such as label for display text and value for the underlying value.
- 'Callback function': A function that, when called, returns either of the above array formats (strings, numbers, or objects).

This flexibility allows you to provide static data inline, transform or fetch data dynamically, and customize which properties represent the list items.

Try a demo showcasing the dataSource property.

Examples

Markup and runtime examples for dataSource:

HTML:

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

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

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

Read the current value:

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

disabledSpecifies whether the element is interactive and can accept user input. When enabled, the element is fully functional; when disabled, the element is rendered inactive and does not respond to user actions such as clicks, typing, or focus.boolean

Specifies whether the element is interactive and can accept user input. When enabled, the element is fully functional; when disabled, the element is rendered inactive and does not respond to user actions such as clicks, typing, or focus.

Default value

false
Try a demo showcasing the disabled property.

Examples

Markup and runtime examples for disabled:

HTML attribute:

<smart-check-input disabled></smart-check-input>

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

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

Read the current value:

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

dropDownButtonPositionSpecifies the placement of the dropdown button relative to its parent element (e.g., top, bottom, left, or right). This setting controls where the dropdown button will appear in the user interface."none" | "left" | "right" | "top" | "bottom"

Specifies the placement of the dropdown button relative to its parent element (e.g., top, bottom, left, or right). This setting controls where the dropdown button will appear in the user interface.

Allowed Values

  • "none" - The drop down button is hidden and the element acts as a simple input.
  • "left" - A drop down button is displayed on the left side of the element. The element acts as a DropDownList or a ComboBox depending on the readonly property.
  • "right" - A drop down button is displayed on the right side of the element. The element acts as a DropDownList or a ComboBox depending on the readonly property.
  • "top" - A drop down button is displayed on the top side of the element. The element acts as a DropDownList or a ComboBox depending on the readonly property.
  • "bottom" - A drop down button is displayed on the bottom side of the element. The element acts as a DropDownList or a ComboBox depending on the readonly property.

Default value

"right"
Try a demo showcasing the dropDownButtonPosition property.

Examples

Markup and runtime examples for dropDownButtonPosition:

HTML:

<smart-check-input drop-down-button-position="top"></smart-check-input>

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

const el = document.querySelector('smart-check-input');
el.dropDownButtonPosition = "bottom";

Read the current value:

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

dropDownHeightSpecifies the height of the dropdown menu. By default, this property is set to an empty string, which means the dropdown's height is determined by a corresponding CSS variable. You can override the default behavior by explicitly setting a height value, otherwise the component will use the CSS variable to control its height.string | number

Specifies the height of the dropdown menu. By default, this property is set to an empty string, which means the dropdown's height is determined by a corresponding CSS variable. You can override the default behavior by explicitly setting a height value, otherwise the component will use the CSS variable to control its height.

Default value

""

Examples

Markup and runtime examples for dropDownHeight:

HTML:

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

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

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

Read the current value:

const el = document.querySelector('smart-check-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 a corresponding CSS variable. If a value is provided, it will override the CSS variable and explicitly set the width of the dropdown. This allows for flexible customization of the dropdown's appearance through either direct property assignment or external 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 a corresponding CSS variable. If a value is provided, it will override the CSS variable and explicitly set the width of the dropdown. This allows for flexible customization of the dropdown's appearance through either direct property assignment or external styling.

Default value

""

Examples

Markup and runtime examples for dropDownWidth:

HTML:

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

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

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

Read the current value:

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

inputPurposeSpecifies the intended purpose of the input field and determines whether the user’s browser (user agent) is permitted to offer automated autofill suggestions when the input appears within a form. This attribute provides guidance to the browser about the type of information that should be entered, enhancing both user experience and data accuracy by suggesting relevant values. It corresponds to the standard HTML autocomplete attribute, which can accept a variety of predefined values such as 'on' (to enable autofill), 'off' (to disable autofill), 'name' (for personal names), 'organization' (for company names), 'street-address' (for addresses), and many others. By setting this attribute appropriately, developers can improve form usability and help browsers provide more accurate suggestions based on the expected input type.string

Specifies the intended purpose of the input field and determines whether the user’s browser (user agent) is permitted to offer automated autofill suggestions when the input appears within a form. This attribute provides guidance to the browser about the type of information that should be entered, enhancing both user experience and data accuracy by suggesting relevant values. It corresponds to the standard HTML autocomplete attribute, which can accept a variety of predefined values such as 'on' (to enable autofill), 'off' (to disable autofill), 'name' (for personal names), 'organization' (for company names), 'street-address' (for addresses), and many others. By setting this attribute appropriately, developers can improve form usability and help browsers provide more accurate suggestions based on the expected input type.

Default value

"off"

Examples

Markup and runtime examples for inputPurpose:

HTML:

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

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

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

Read the current value:

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

itemsSpecifies the maximum number of matching items to display in the dropdown list when a new autoComplete query is performed. By default, up to 8 items will be shown in the dropdown. If the total number of matched items exceeds this limit, only the first 8 results will be visible to the user. Adjust this value to control how many suggestions are presented at once in the dropdown interface.number

Specifies the maximum number of matching items to display in the dropdown list when a new autoComplete query is performed. By default, up to 8 items will be shown in the dropdown. If the total number of matched items exceeds this limit, only the first 8 results will be visible to the user. Adjust this value to control how many suggestions are presented at once in the dropdown interface.

Default value

8

Examples

Markup and runtime examples for items:

HTML:

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

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

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

Read the current value:

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

localeSpecifies or retrieves the current language setting. This property determines which language-specific messages from the messages property are displayed. Changing the language will update the content shown to the user based on the corresponding localized messages defined in messages.string

Specifies or retrieves the current language setting. This property determines which language-specific messages from the messages property are displayed. Changing the language will update the content shown to the user based on the corresponding localized messages defined in messages.

Default value

"en"

Examples

Markup and runtime examples for locale:

HTML:

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

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

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

Read the current value:

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

localizeFormatFunctionA callback function that allows you to customize the formatting of messages generated by the Localization Module before they are returned to the application. This enables you to modify, translate, or format localization messages according to specific requirements or user preferences.function

A callback function that allows you to customize the formatting of messages generated by the Localization Module before they are returned to the application. This enables you to modify, translate, or format localization messages according to specific requirements or user preferences.

Examples

Markup and runtime examples for localizeFormatFunction:

HTML:

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

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

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

Read the current value:

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

messagesDefines or retrieves an object containing localized string values used within the widget’s user interface, allowing for text elements to be easily translated into different languages. This property works in conjunction with the locale property to enable internationalization by customizing display text based on the selected language or regional setting.object

Defines or retrieves an object containing localized string values used within the widget’s user interface, allowing for text elements to be easily translated into different languages. This property works in conjunction with the locale property to enable internationalization by customizing display text based on the selected language or regional setting.

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}}."

}

Examples

Markup and runtime examples for messages:

HTML:

<smart-check-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-check-input>

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

const el = document.querySelector('smart-check-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-check-input');
const messages = el.messages;

minLengthSpecifies the minimum number of characters a user must type into the input field before the autocomplete feature becomes active. Once this character threshold is reached, the dropdown will appear, displaying a list of items that match the entered text.number

Specifies the minimum number of characters a user must type into the input field before the autocomplete feature becomes active. Once this character threshold is reached, the dropdown will appear, displaying a list of items that match the entered text.

Default value

1

Examples

Markup and runtime examples for minLength:

HTML:

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

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

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

Read the current value:

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

nameSets or retrieves the value of the "name" attribute for the element. The "name" attribute identifies the element within an HTML form, and its value is used as the key when the form data is submitted to the server. This allows data associated with the element to be correctly grouped and processed on the server side.string

Sets or retrieves the value of the "name" attribute for the element. The "name" attribute identifies the element within an HTML form, and its value is used as the key when the form data is submitted to the server. This allows data associated with the element to be correctly grouped and processed on the server side.

Default value

""

Examples

Markup and runtime examples for name:

HTML:

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

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

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

Read the current value:

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

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

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

Default value

false

Examples

Markup and runtime examples for opened:

HTML attribute:

<smart-check-input opened></smart-check-input>

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

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

Read the current value:

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

placeholderSpecifies the placeholder text displayed inside the input field when it is empty, providing guidance or an example to the user about what to enter.string

Specifies the placeholder text displayed inside the input field when it is empty, providing guidance or an example to the user about what to enter.

Default value

""
Try a demo showcasing the placeholder property.

Examples

Markup and runtime examples for placeholder:

HTML:

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

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

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

Read the current value:

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

querySpecifies or retrieves the query string used to filter items in the data source. This query is utilized by the autoComplete functionality to determine which items should be displayed based on user input. If the query is an empty string, no filtering is applied and all items from the data source are shown.string | number

Specifies or retrieves the query string used to filter items in the data source. This query is utilized by the autoComplete functionality to determine which items should be displayed based on user input. If the query is an empty string, no filtering is applied and all items from the data source are shown.

Default value

""

Examples

Markup and runtime examples for query:

HTML:

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

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

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

Read the current value:

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

queryModeSpecifies the autocomplete query mode, which controls how search suggestions are generated and determines the matching algorithm used for the autocomplete operation. This property influences whether autocomplete suggestions are based on prefix matching, fuzzy matching, or other supported algorithms."contains" | "containsIgnoreCase" | "doesNotContain" | "doesNotContainIgnoreCase" | "equals" | "equalsIgnoreCase" | "startsWith" | "startsWithIgnoreCase" | "endsWith" | "endsWithIgnoreCase"

Specifies the autocomplete query mode, which controls how search suggestions are generated and determines the matching algorithm used for the autocomplete operation. This property influences whether autocomplete suggestions are based on prefix matching, fuzzy matching, or other supported algorithms.

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-check-input query-mode="contains"></smart-check-input>

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

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

Read the current value:

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

readonlySpecifies whether the user is allowed to enter text directly into the input field. When the dropDownButtonPosition property is set to either 'left' or 'right', the readonly property controls the behavior of the component if a dataSource is provided: - If readonly is false, the element functions as a ComboBox, allowing text input and selection from the data source. - If readonly is true, it behaves as a DropDownList, restricting input to selection from the provided options only, and preventing manual text entry.boolean



Specifies whether the user is allowed to enter text directly into the input field. When the dropDownButtonPosition property is set to either 'left' or 'right', the readonly property controls the behavior of the component if a dataSource is provided:
- If readonly is false, the element functions as a ComboBox, allowing text input and selection from the data source.
- If readonly is true, it behaves as a DropDownList, restricting input to selection from the provided options only, and preventing manual text entry.

Default value

false
Try a demo showcasing the readonly property.

Examples

Markup and runtime examples for readonly:

HTML attribute:

<smart-check-input readonly></smart-check-input>

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

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

Read the current value:

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

rightToLeftSets or returns a value that determines whether the element’s text direction is set to right-to-left (RTL) alignment, enabling proper display for languages and locales that use RTL scripts, such as Arabic or Hebrew.boolean

Sets or returns a value that determines whether the element’s text direction is set to right-to-left (RTL) alignment, enabling proper display for languages and locales that use RTL scripts, such as Arabic or Hebrew.

Default value

false
Try a demo showcasing the rightToLeft property.

Examples

Markup and runtime examples for rightToLeft:

HTML attribute:

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

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

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

Read the current value:

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

selectAllSpecifies whether an extra option—typically "Select All" or "Deselect All"—is shown at the top of the options list. This option enables users to quickly select or unselect all available items in the list with a single action.boolean

Specifies whether an extra option—typically "Select All" or "Deselect All"—is shown at the top of the options list. This option enables users to quickly select or unselect all available items in the list with a single action.

Default value

false

Examples

Markup and runtime examples for selectAll:

HTML attribute:

<smart-check-input select-all></smart-check-input>

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

const el = document.querySelector('smart-check-input');
el.selectAll = false;

Read the current value:

const el = document.querySelector('smart-check-input');
const selectAll = el.selectAll;

selectedValuesRetrieves or assigns an array containing the currently selected values. This property allows you to access the full list of items that have been selected, or update the selection by providing a new array of values. array

Retrieves or assigns an array containing the currently selected values. This property allows you to access the full list of items that have been selected, or update the selection by providing a new array of values.

separatorSpecifies the character or string used to separate multiple selected items within the input field. This delimiter defines how individual selections are visually and programmatically distinguished from one another in the input’s value.string

Specifies the character or string used to separate multiple selected items within the input field. This delimiter defines how individual selections are visually and programmatically distinguished from one another in the input’s value.

Default value

","

Examples

Markup and runtime examples for separator:

HTML:

<smart-check-input separator="-"></smart-check-input>

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

const el = document.querySelector('smart-check-input');
el.separator = ",";

Read the current value:

const el = document.querySelector('smart-check-input');
const separator = el.separator;

sortDirectionSpecifies the sorting order to be used when sort is enabled. Set to asc for ascending order or desc for descending order.string

Specifies the sorting order to be used when sort is enabled. Set to asc for ascending order or desc for descending order.

Default value

"asc"

Examples

Markup and runtime examples for sortDirection:

HTML:

<smart-check-input sort-direction="desc"></smart-check-input>

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

const el = document.querySelector('smart-check-input');
el.sortDirection = "asc";

Read the current value:

const el = document.querySelector('smart-check-input');
const sortDirection = el.sortDirection;

sortedSpecifies whether the items are arranged in alphabetical order. If set to true, the list will be sorted from A to Z based on item names; if false, the original order will be preserved.boolean

Specifies whether the items are arranged in alphabetical order. If set to true, the list will be sorted from A to Z based on item names; if false, the original order will be preserved.

Default value

false

Examples

Markup and runtime examples for sorted:

HTML attribute:

<smart-check-input sorted></smart-check-input>

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

const el = document.querySelector('smart-check-input');
el.sorted = false;

Read the current value:

const el = document.querySelector('smart-check-input');
const sorted = el.sorted;

themeSpecifies the visual theme applied to the element, controlling its overall appearance such as colors, fonts, and styles. Themes allow for consistent and customizable styling across elements within the application.string

Specifies the visual theme applied to the element, controlling its overall appearance such as colors, fonts, and styles. Themes allow for consistent and customizable styling across elements within the application.

Default value

""

Examples

Markup and runtime examples for theme:

HTML:

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

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

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

Read the current value:

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

typeSpecifies the type of data that the input field accepts (e.g., text, number, email, password). Setting the input type controls the kind of input users can enter and may also influence the on-screen keyboard and validation behavior in web browsers.string

Specifies the type of data that the input field accepts (e.g., text, number, email, password). Setting the input type controls the kind of input users can enter and may also influence the on-screen keyboard and validation behavior in web browsers.

Default value

""

Examples

Markup and runtime examples for type:

HTML:

<smart-check-input type="blue"></smart-check-input>

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

const el = document.querySelector('smart-check-input');
el.type = "red";

Read the current value:

const el = document.querySelector('smart-check-input');
const type = el.type;

unfocusableWhen set to true, this property prevents the element from being focused, either by keyboard navigation (such as using the Tab key) or by mouse interaction. As a result, the element is removed from the page's tab order and cannot receive input focus.boolean

When set to true, this property prevents the element from being focused, either by keyboard navigation (such as using the Tab key) or by mouse interaction. As a result, the element is removed from the page's tab order and cannot receive input focus.

Default value

false

Examples

Markup and runtime examples for unfocusable:

HTML attribute:

<smart-check-input unfocusable></smart-check-input>

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

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

Read the current value:

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

unlockKeyDefines the unlockKey property, which stores the unique key required to unlock and access the product. Use this property to set a new unlock key or retrieve the current unlock key associated with the product.string

Defines the unlockKey property, which stores the unique key required to unlock and access the product. Use this property to set a new unlock key or retrieve the current unlock key associated with the product.

Default value

""

Examples

Markup and runtime examples for unlockKey:

HTML:

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

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

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

Read the current value:

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

valueRetrieves the current value of the element or assigns a new value to it. This property allows you to programmatically access or update the element's value, depending on whether it is used as a getter or a setter. Commonly used with form elements such as input, textarea, and select to read or change user input.string

Retrieves the current value of the element or assigns a new value to it. This property allows you to programmatically access or update the element's value, depending on whether it is used as a getter or a setter. Commonly used with form elements such as input, textarea, and select to read or change user input.

Default value

""
Try a demo showcasing the value property.

Examples

Markup and runtime examples for value:

HTML:

<smart-check-input value="value1"></smart-check-input>

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

const el = document.querySelector('smart-check-input');
el.value = "value2";

Read the current value:

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

Events

changeThis event is triggered whenever the user modifies the current selection. It occurs whenever the selected item(s) change, allowing you to respond to user interactions such as clicking, typing, or using keyboard navigation to alter the selection state.CustomEvent

This event is triggered whenever the user modifies the current selection. It occurs whenever the selected item(s) change, allowing you to respond to user interactions such as clicking, typing, or using keyboard navigation to alter the selection state.

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

Arguments

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

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-check-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-checkinput, if you host multiple widgets):

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

Try a demo showcasing the close method.

ensureVisible(): voidEnsures that the currently active (selected) item within the list is always scrolled into view, so users can see and interact with their selection even when navigating through long or overflowing content.

Ensures that the currently active (selected) item within the list is always scrolled into view, so users can see and interact with their selection even when navigating through long or overflowing content.

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

document.querySelector('smart-check-input')?.ensureVisible();

open(): voidDisplays the dropdown menu, making its list of selectable options visible to the user.

Displays the dropdown menu, making its list of selectable options visible to the user.

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

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

Try a demo showcasing the open method.

select(): voidSelects the text inside the input field. If the input field is set to readonly, the function does not select the text but instead sets focus to the element. This ensures interactive behavior depending on whether the input can be edited.

Selects the text inside the input field. If the input field is set to readonly, the function does not select the text but instead sets focus to the element. This ensures interactive behavior depending on whether the input can be edited.

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

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