ColorInput JAVASCRIPT UI Component API

ColorInput Javascript API

Class

ColorInput

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

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

Allowed Values

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

Default value

"advanced"

Example

Set the animation property.

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

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

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

 colorinput.animation = 'simple';

Get the animation property.

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

 let animation = colorinput.animation;

autoCompleteDelaynumber

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

Default value

100

Example

Set the autoCompleteDelay property.

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

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

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

 colorinput.autoCompleteDelay = 200;

Get the autoCompleteDelay property.

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

 let autoCompleteDelay = colorinput.autoCompleteDelay;

dataSourceany

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

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

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

Example

Set the dataSource property.

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

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

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

 colorinput.dataSource = ["new item 1", "new item 2"];

Get the dataSource property.

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

 let dataSource = colorinput.dataSource;

disabledboolean

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

Default value

false

Try a demo showcasing the disabled property.

Example

Set the disabled property.

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

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

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

 colorinput.disabled = false;

Get the disabled property.

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

 let disabled = colorinput.disabled;

displayMode"default" | "grid"

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

Allowed Values

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

Default value

"default"

Try a demo showcasing the displayMode property.

Example

Set the displayMode property.

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

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

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

 colorinput.displayMode = 'default';

Get the displayMode property.

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

 let displayMode = colorinput.displayMode;

dropDownButtonPosition"left" | "right" | "top" | "bottom"

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

Allowed Values

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

Default value

"none"

Example

Set the dropDownButtonPosition property.

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

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

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

 colorinput.dropDownButtonPosition = 'right';

Get the dropDownButtonPosition property.

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

 let dropDownButtonPosition = colorinput.dropDownButtonPosition;

dropDownHeightstring | number

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

Default value

Example

Set the dropDownHeight property.

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

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

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

 colorinput.dropDownHeight = 500;

Get the dropDownHeight property.

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

 let dropDownHeight = colorinput.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 the value of a corresponding CSS variable rather than an explicit pixel or percentage value. You can override the default behavior by providing a specific width (e.g., "200px", "50%") to directly control the dropdown’s size. If left empty, ensure the relevant CSS variable is defined to maintain consistent styling.

Default value

Example

Set the dropDownWidth property.

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

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

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

 colorinput.dropDownWidth = 500;

Get the dropDownWidth property.

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

 let dropDownWidth = colorinput.dropDownWidth;

inputPurposestring

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

Default value

"off"

Example

Set the inputPurpose property.

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

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

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

 colorinput.inputPurpose = 'country';

Get the inputPurpose property.

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

 let inputPurpose = colorinput.inputPurpose;

itemsnumber

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

Default value

Example

Set the items property.

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

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

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

 colorinput.items = 5;

Get the items property.

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

 let items = colorinput.items;

unlockKeystring

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

Default value

Example

Set the unlockKey property.

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

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

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

 colorinput.unlockKey = '1111-2222-3333-4444-5555';

Get the unlockKey property.

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

 let unlockKey = colorinput.unlockKey;

localestring

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

Default value

"en"

Example

Set the locale property.

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

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

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

 colorinput.locale = 'en';

Get the locale property.

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

 let locale = colorinput.locale;

localizeFormatFunctionfunction

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

Example

Set the localizeFormatFunction property.

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

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

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

 colorinput.localizeFormatFunction = function(defaultMessage, message, messageArguments){return '...'};

Get the localizeFormatFunction property.

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

 let localizeFormatFunction = colorinput.localizeFormatFunction;

messagesobject

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

Default value

"en": {

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

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

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

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

"moduleUndefined": "Module is undefined.",

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

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

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

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

}

Example

Set the messages property.

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

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

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

 colorinput.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 colorinput = document.querySelector('smart-color-input');

 let messages = colorinput.messages;

minLengthnumber

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

Default value

Example

Set the minLength property.

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

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

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

 colorinput.minLength = 0;

Get the minLength property.

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

 let minLength = colorinput.minLength;

namestring

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

Default value

Example

Set the name property.

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

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

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

 colorinput.name = 'dropDown2';

Get the name property.

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

 let name = colorinput.name;

openedboolean

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

Default value

false

Example

Set the opened property.

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

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

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

 colorinput.opened = false;

Get the opened property.

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

 let opened = colorinput.opened;

placeholderstring

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

Default value

Try a demo showcasing the placeholder property.

Example

Set the placeholder property.

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

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

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

 colorinput.placeholder = 'Enter:';

Get the placeholder property.

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

 let placeholder = colorinput.placeholder;

querystring | number

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

Default value

Example

Set the query property.

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

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

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

 colorinput.query = 'some query';

Get the query property.

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

 let query = colorinput.query;

queryMode"contains" | "containsIgnoreCase" | "doesNotContain" | "doesNotContainIgnoreCase" | "equals" | "equalsIgnoreCase" | "startsWith" | "startsWithIgnoreCase" | "endsWith" | "endsWithIgnoreCase"

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

Allowed Values

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

Default value

"containsIgnoreCase"

Example

Set the queryMode property.

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

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

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

 colorinput.queryMode = 'endsWith';

Get the queryMode property.

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

 let queryMode = colorinput.queryMode;

readonlyboolean

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

Default value

false

Try a demo showcasing the readonly property.

Example

Set the readonly property.

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

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

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

 colorinput.readonly = false;

Get the readonly property.

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

 let readonly = colorinput.readonly;

rightToLeftboolean

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

Default value

false

Try a demo showcasing the rightToLeft property.

Example

Set the rightToLeft property.

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

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

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

 colorinput.rightToLeft = true;

Get the rightToLeft property.

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

 let rightToLeft = colorinput.rightToLeft;

themestring

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

Default value

Example

Set the theme property.

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

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

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

 colorinput.theme = 'red';

Get the theme property.

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

 let theme = colorinput.theme;

unfocusableboolean

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

Default value

false

Example

Set the unfocusable property.

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

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

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

 colorinput.unfocusable = false;

Get the unfocusable property.

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

 let unfocusable = colorinput.unfocusable;

valuestring

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

Default value

Try a demo showcasing the value property.

Example

Set the value property.

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

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

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

 colorinput.value = '#ffffff';

Get the value property.

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

 let value = colorinput.value;

valueDisplayMode"default" | "colorBox" | "colorCode" | "none"

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

Allowed Values

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

Default value

"default"

Example

Set the valueDisplayMode property.

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

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

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

 colorinput.valueDisplayMode = 'default';

Get the valueDisplayMode property.

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

 let valueDisplayMode = colorinput.valueDisplayMode;

valueFormat"default" | "rgb" | "rgba" | "hex"

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

Allowed Values

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

Default value

"default"

Example

Set the valueFormat property.

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

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

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

 colorinput.valueFormat = 'rgb';

Get the valueFormat property.

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

 let valueFormat = colorinput.valueFormat;

Events

changeCustomEvent

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

Bubbles Yes
Cancelable No
Interface CustomEvent
Event handler property onChange

Arguments

evCustomEvent

ev.detailObject

ev.detail.label - The label of the new selected color.

ev.detail.oldLabel - The label of the color that was previously selected before the event was triggered.

ev.detail.oldValue - The value of the color that was previously selected before the event was triggered.

ev.detail.value - The value of the new selected color.

Methods

isDefaultPrevented

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

Returns

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

preventDefault

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

stopPropagation

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

Example

Set up the event handler of change event.

const colorinput = document.querySelector('smart-color-input');
colorinput.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 colorinput = document.querySelector('smart-color-input');
colorinput.close();

Try a demo showcasing the close method.

open(): void

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

Invoke the open method.

const colorinput = document.querySelector('smart-color-input');
colorinput.open();

Try a demo showcasing the open method.

select(): void

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

Invoke the select method.

const colorinput = document.querySelector('smart-color-input');
colorinput.select();

ColorInput Javascript API

animation"none" | "simple" | "advanced"

Default value

Example

autoCompleteDelaynumber

Default value

Example

dataSourceany

Example

disabledboolean

Default value

Example

displayMode"default" | "grid"

Default value

Example

dropDownButtonPosition"left" | "right" | "top" | "bottom"

Default value

Example

dropDownHeightstring | number

Default value

Example

dropDownWidthstring | number

Default value

Example

inputPurposestring

Default value

Example

itemsnumber

Default value

Example

unlockKeystring

Default value

Example

localestring

Default value

Example

localizeFormatFunctionfunction

Example

messagesobject

Default value

Example

minLengthnumber

Default value

Example

namestring

Default value

Example

openedboolean

Default value

Example

placeholderstring

Default value

Example

querystring | number

Default value

Example

queryMode"contains" | "containsIgnoreCase" | "doesNotContain" | "doesNotContainIgnoreCase" | "equals" | "equalsIgnoreCase" | "startsWith" | "startsWithIgnoreCase" | "endsWith" | "endsWithIgnoreCase"

Default value

Example

readonlyboolean

Default value

Example

rightToLeftboolean

Default value

Example

themestring

Default value

Example

unfocusableboolean