CheckInput JAVASCRIPT UI Component API

CheckInput Javascript API

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

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.
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.
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.
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.
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.
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.
SsortDirectionSpecifies the sorting order to be used when sort is enabled. Set to asc for ascending order or desc for descending order.
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.
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

animation"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"

Example

Set the animation property. 

 <smart-check-input animation='none'></smart-check-input>

Set the animation property by using the HTML Element's instance. 

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

Get the animation property. 

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

autoCompleteDelaynumber

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

Example

Set the autoCompleteDelay property. 

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

Set the autoCompleteDelay property by using the HTML Element's instance. 

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

Get the autoCompleteDelay property. 

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

dataSourceany

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.

Example

Set the dataSource property. 

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

Set the dataSource property by using the HTML Element's instance. 

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

Get the dataSource property. 

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

disabledboolean

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.

Example

Set the disabled property. 

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

Set the disabled property by using the HTML Element's instance. 

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

Get the disabled property. 

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

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

Example

Set the dropDownButtonPosition property. 

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

Set the dropDownButtonPosition property by using the HTML Element's instance. 

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

Get the dropDownButtonPosition property. 

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

dropDownHeightstring | 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

""

Example

Set the dropDownHeight property. 

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

Set the dropDownHeight property by using the HTML Element's instance. 

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

Get the dropDownHeight property. 

 const checkinput = document.querySelector('smart-check-input');
 let dropDownHeight = checkinput.dropDownHeight;

dropDownWidthstring | 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

""

Example

Set the dropDownWidth property. 

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

Set the dropDownWidth property by using the HTML Element's instance. 

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

Get the dropDownWidth property. 

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

inputPurposestring

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"

Example

Set the inputPurpose property. 

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

Set the inputPurpose property by using the HTML Element's instance. 

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

Get the inputPurpose property. 

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

itemsnumber

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

Example

Set the items property. 

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

Set the items property by using the HTML Element's instance. 

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

Get the items property. 

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

unlockKeystring

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

""

Example

Set the unlockKey property. 

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

Set the unlockKey property by using the HTML Element's instance. 

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

Get the unlockKey property. 

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

localestring

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"

Example

Set the locale property. 

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

Set the locale property by using the HTML Element's instance. 

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

Get the locale property. 

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

localizeFormatFunctionfunction

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.

Example

Set the localizeFormatFunction property. 

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

Set the localizeFormatFunction property by using the HTML Element's instance. 

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

Get the localizeFormatFunction property. 

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

messagesobject

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

}

Example

Set the messages property. 

 <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>

Set the messages property by using the HTML Element's instance. 

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

Get the messages property. 

 const checkinput = document.querySelector('smart-check-input');
 let messages = checkinput.messages;

minLengthnumber

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

Example

Set the minLength property. 

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

Set the minLength property by using the HTML Element's instance. 

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

Get the minLength property. 

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

namestring

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

""

Example

Set the name property. 

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

Set the name property by using the HTML Element's instance. 

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

Get the name property. 

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

openedboolean

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

Default value

false

Example

Set the opened property. 

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

Set the opened property by using the HTML Element's instance. 

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

Get the opened property. 

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

placeholderstring

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.

Example

Set the placeholder property. 

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

Set the placeholder property by using the HTML Element's instance. 

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

Get the placeholder property. 

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

querystring | 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

""

Example

Set the query property. 

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

Set the query property by using the HTML Element's instance. 

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

Get the query property. 

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

queryMode"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"

Example

Set the queryMode property. 

 <smart-check-input query-mode='contains'></smart-check-input>

Set the queryMode property by using the HTML Element's instance. 

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

Get the queryMode property. 

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

readonlyboolean



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.

Example

Set the readonly property. 

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

Set the readonly property by using the HTML Element's instance. 

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

Get the readonly property. 

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

rightToLeftboolean

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.

Example

Set the rightToLeft property. 

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

Set the rightToLeft property by using the HTML Element's instance. 

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

Get the rightToLeft property. 

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

separatorstring

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

","

Example

Set the separator property. 

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

Set the separator property by using the HTML Element's instance. 

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

Get the separator property. 

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

selectAllboolean

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

Example

Set the selectAll property. 

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

Set the selectAll property by using the HTML Element's instance. 

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

Get the selectAll property. 

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

selectedValuesarray

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.

sortedboolean

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

Example

Set the sorted property. 

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

Set the sorted property by using the HTML Element's instance. 

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

Get the sorted property. 

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

sortDirectionstring

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"

Example

Set the sortDirection property. 

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

Set the sortDirection property by using the HTML Element's instance. 

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

Get the sortDirection property. 

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

themestring

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

""

Example

Set the theme property. 

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

Set the theme property by using the HTML Element's instance. 

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

Get the theme property. 

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

typestring

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

""

Example

Set the type property. 

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

Set the type property by using the HTML Element's instance. 

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

Get the type property. 

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

unfocusableboolean

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

Example

Set the unfocusable property. 

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

Set the unfocusable property by using the HTML Element's instance. 

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

Get the unfocusable property. 

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

valuestring

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.

Example

Set the value property. 

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

Set the value property by using the HTML Element's instance. 

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

Get the value property. 

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

Events

changeCustomEvent

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.

Example

Set up the event handler of change event. 

const checkinput = document.querySelector('smart-check-input');
checkinput.addEventListener('change', function (event) {
    const detail = event.detail,
        label = detail.label,
        oldLabel = detail.oldLabel,
        oldValue = detail.oldValue,
        value = detail.value;

	// event handling code goes here.
})

Methods

close(): void

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


Invoke the close method.

const checkinput = document.querySelector('smart-check-input');
checkinput.close();

Try a demo showcasing the close method.

ensureVisible(): void

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.


Invoke the ensureVisible method.

const checkinput = document.querySelector('smart-check-input');
checkinput.ensureVisible();

open(): void

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


Invoke the open method.

const checkinput = document.querySelector('smart-check-input');
checkinput.open();

Try a demo showcasing the open method.

select(): void

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.


Invoke the select method.

const checkinput = document.querySelector('smart-check-input');
checkinput.select();