| Name | Type | Default | Description |
|---|
| AutoFocus | bool | false | Specifies whether the text box should automatically receive keyboard focus when the page loads, allowing users to start typing immediately without clicking inside the box. |
| AutoComplete | AutoComplete | AutoComplete.Manual | Specifies the autocomplete mode used to filter and display suggestions from the dataSource. The selected autocomplete mode determines how input text is matched against the available items, showing only those entries that meet the criteria—for example, items that start with, contain, or exactly match the user's input. This setting helps control the relevance and behavior of suggestion lists shown to the user while typing. |
| AutoCompleteDelay | int | 100 | Specifies the duration (in milliseconds) to wait after the user stops typing before displaying the dropdown with autocomplete suggestions. This delay helps control how quickly the matching results appear, improving performance and user experience by preventing unnecessary searches while the user is still typing. |
| DataSource | object | N/A | Specifies the data source that populates the ComboBox options. The dataSource property accepts multiple types:
- 'Array of strings or numbers:' Each item will be displayed as both the label and value of a list item.
- 'Array of objects:' Each object should contain properties—such as label (displayed text) and value (item value)—that define the corresponding list item’s display and value.
- 'Callback function:' You can provide a function that returns an array of items in either of the above forms. This allows for dynamic or asynchronous data loading.
This flexible approach lets you easily integrate static lists, complex objects, or data fetched from external sources into the ComboBox. |
| Disabled | bool | false | Determines whether the element is active and interactive (enabled) or inactive and unresponsive to user interactions (disabled). When set to "disabled," the element cannot be focused, clicked, or edited by the user. |
| DisplayLoadingIndicator | bool | false | Specifies whether a visual indicator (such as a loading spinner or progress bar) will be displayed while filtering data or loading items from a remote source. This helps inform users that a background operation is in progress. |
| DisplayMember | string | "" | Sets or retrieves the displayMember property. The displayMember determines which property of each object in the data source collection (defined by the 'dataSource' property) will be used for display purposes in the user interface. By specifying the name of a property here, you control which value from each data source item is shown to users (e.g., displaying a "name" property from a list of user objects). |
| DisplayMode | TextBoxDisplayMode | TextBoxDisplayMode.Default | Specifies the visual presentation of characters within the input field, such as whether the characters are visible as plain text, masked (e.g., as password dots), or formatted in a particular style. This attribute controls how users see the inputted content while typing or reviewing their entries. |
| DropDownAppendTo | object | N/A | Specifies the parent container to which the dropdown menu is appended in the DOM. By default, the dropdown is rendered within its original parent element. However, if an ancestor element has restricted overflow (e.g., 'overflow: hidden' or 'overflow: auto'), the dropdown may be clipped and not display correctly. To resolve this, you can set the dropDownAppendTo property to ''body'', the ID of a specific HTML element, or a direct reference to an HTML element. When set, the dropdown will be moved to the specified container in the DOM, ensuring it displays properly regardless of overflow constraints in its ancestors. To restore the dropdown to its original parent, reset this property to null.
This feature is especially useful for ensuring that dropdowns are visible and functional in complex layouts where parent elements limit visibility due to CSS overflow properties. |
| DropDownHeight | object | | Specifies the height of the dropdown menu. By default, this property is set to an empty string, which means the dropdown's height will be determined by a CSS variable. To customize the dropdown's height directly, you can assign a specific value (e.g., "200px" or "50%") to this property. Otherwise, leaving it empty enables the component to use the height defined by the associated CSS variable. |
| DropDownMaxHeight | object | | Defines the maximum height for the dropdown menu. If no value is set (default is an empty string), the dropdown’s maximum height will be determined by a corresponding CSS variable instead. This allows for dynamic styling via CSS, while still providing the option to specify a fixed maximum height directly through this property. |
| DropDownMaxWidth | object | | Specifies the maximum width of the dropdown menu. By default, this property is set to an empty string, meaning that the dropdown's max-width is determined by a corresponding CSS variable. If a specific value (such as '300px' or '100%') is provided, it will override the CSS variable and directly set the maximum width of the dropdown. |
| DropDownMinHeight | object | | Defines the minimum height of the dropdown menu. By default, this property is set to an empty string (""), which means the minimum height is not explicitly specified in the component and will instead be determined by the value of a related CSS variable. If a specific value (such as "200px" or "2rem") is provided, it will override the CSS variable and set the minimum height of the dropdown directly. |
| DropDownMinWidth | object | | Specifies the minimum width of the dropdown menu. By default, this property is set to an empty string, which means the dropdown's minimum width is determined by a corresponding CSS variable. If you provide a specific value (such as '200px' or '20rem'), it will override the CSS variable and set the dropdown's minimum width accordingly. |
| DropDownOpenMode | DropDownOpenMode | DropDownOpenMode.Default | Specifies the direction or animation style in which the dropdown menu appears when activated (e.g., opens upwards, downwards, or with a fade effect). |
| DropDownOverlay | bool | false | When this property is enabled, opening the element’s dropdown will create a transparent overlay that covers the entire area between the dropdown and the rest of the webpage. This overlay ensures that any clicks outside the dropdown are intercepted by the overlay itself, rather than interacting with underlying DOM elements. As a result, clicking outside the dropdown can be handled consistently—for example, to close the dropdown—without triggering unintended interactions elsewhere on the page. |
| DropDownPlaceholder | string | "No Items" | Specifies the placeholder text that appears in the dropdown menu when there are no available items to display. This text provides guidance or context to users, indicating that the dropdown is currently empty. |
| DropDownPosition | DropDownPosition | DropDownPosition.Auto | Specifies the alignment and placement of the dropdown menu relative to its trigger element when the dropdown is opened, allowing you to control where the menu appears on the screen (e.g., above, below, left, or right of the trigger). |
| DropDownWidth | object | | Specifies the width of the dropdown menu. By default, this property is set to an empty string (""). When left empty, the dropdown's width is determined by a corresponding CSS variable, allowing for flexible styling through external or theme-based CSS. To explicitly set a custom width, provide a valid CSS width value (e.g., "200px", "50%"). |
| EscKeyMode | EscKeyMode | EscKeyMode.None | Specifies how the element responds when the Escape key is pressed, such as closing a dialog, dismissing a modal, or performing a custom action. |
| EnterKeyBehavior | EnterKeyBehavior | EnterKeyBehavior.Submit | Defines how the "Enter" key functions within the application, such as whether it submits a form, inserts a new line, or triggers a specific action, depending on the context. |
| Form | string | "" | Specifies the form element with which this element is associated, known as its "form owner." The value of this attribute must be the ID of a |
| Hint | object | N/A | Provides supplemental helper text displayed beneath the element. This hint appears exclusively when the element is focused, offering contextual guidance to the user during interaction. |
| HorizontalScrollBarVisibility | HorizontalScrollBarVisibility | HorizontalScrollBarVisibility.Auto | Controls whether the horizontal scroll bar within the dropdown menu is visible. This setting allows you to enable or disable horizontal scrolling for dropdown content that extends beyond the visible area. |
| InputMember | string | "" | Represents the property key of a List item's object that specifies which value should be displayed in the input field when a ListItem is selected. This property is useful when you want to show a value other than the default label—such as a unique identifier or another attribute—within the input. By default, the item's label is shown. Use this option to customize the displayed value based on a different property from your data objects. |
| InputPurpose | string | "off" | Defines the purpose of the input field and specifies the type of data expected, providing guidance to browsers and user agents for offering autofill suggestions. This property maps directly to the standard HTML autocomplete attribute, allowing developers to control whether and how a browser can automatically fill in the field based on the user's stored information. Possible values include generic options like 'on' and 'off', as well as more specific data types such as 'name', 'organization', 'email', 'street-address', and others, enabling enhanced user experience and data accuracy in forms. |
| ItemHeight | int? | N/A | Specifies the height (in pixels) for each list item when rendering the list.
This property is only applicable if list virtualization is enabled, as it allows the component to accurately calculate and display only the visible items for improved performance. |
| ItemMeasureMode | ListItemMeasureMode | ListItemMeasureMode.Auto | Specifies the algorithm used to calculate the width of each item, determining how item widths are measured and displayed within the layout. This setting influences whether widths are fixed, dynamic, or adapt based on content or container size. |
| Items | IEnumerable<object> | | A getter that retrieves and returns an array containing all the list item elements (e.g., '' elements) currently present within the dropdown menu. This allows easy access to all items displayed in the dropdown for further manipulation or inspection. |
| ItemTemplate | object | N/A | The itemTemplate property is a string specifying the id of an HTMLTemplateElement present in the DOM. This template is used to define and customize the structure and content of each item rendered within the list. By referencing the id of an HTMLTemplateElement, you can control how individual list items are displayed, allowing for flexible and reusable item layouts. |
| Label | string | "" | Displays a small text label positioned above the element, typically used to provide additional context or information about the element’s purpose. |
| LoadingIndicatorPlaceholder | string | "Loading..." | Specifies the text that appears alongside the loading indicator when the loader is visible and positioned at either the top or bottom of the container. This text provides context or status information to users while the loading process is ongoing. |
| LoadingIndicatorPosition | VerticalAlignment | VerticalAlignment.Center | Specifies the screen location where the loading indicator will be displayed (e.g., top, bottom, center, etc.), allowing developers to control the visual placement of the loading element within the application's interface. |
| UnlockKey | string | "" | Defines or retrieves the unlockKey, a unique code or token used to grant access to the product's features or functionality. |
| Locale | string | "en" | Sets or retrieves the current language for localization purposes. This property is used together with the messages property, which contains language-specific content or translations. Adjusting the language will determine which set of messages is displayed or utilized within the application. |
| MaxLength | int | N/A | Specifies or retrieves the maximum number of characters allowed for user input in a text field. This limits how many characters a user can type or paste into the field. |
| MinLength | int | 2 | Specifies or retrieves the minimum number of characters a user must type before the auto-complete feature is activated and suggestions are displayed. |
| Messages | object | N/A | Defines or retrieves an object containing the set of strings (such as labels, tooltips, button text, and messages) used throughout the widget interface, allowing these strings to be localized for different languages. This property works together with the language property to ensure the widget’s text content is displayed in the appropriate language for users. |
| Name | string | "" | Sets or retrieves the name attribute of the element. The name attribute specifies a key associated with the element's value when submitting HTML forms, enabling server-side identification and processing of submitted data. This is essential for form controls such as inputs, selects, and textareas. |
| IsOpened | bool | false | Indicates whether the dropdown menu is currently expanded (open) and visible to the user, or collapsed (closed) and hidden from view. |
| Placeholder | string | "" | Specifies the placeholder text that appears inside the input field when it is empty, providing guidance or an example of the expected input to the user. |
| Readonly | bool | false | Prevents any user interaction with the element, disabling actions such as clicking, focusing, hovering, or keyboard input. The element will not respond to any user events while this setting is applied. |
| RightToLeft | bool | false | Sets or retrieves a value that specifies whether the element’s content is aligned for right-to-left (RTL) text direction, supporting languages and locales such as Arabic or Hebrew. When enabled, the element’s layout and text flow will be adjusted to display content appropriately for RTL reading order. |
| Required | bool | false | Indicates that the input field is required, meaning the user must provide a value in this field before the form can be submitted successfully. If the input is left empty, the form submission will be blocked and the user will be prompted to complete the required information. |
| RequiredMessage | string | "" | Defines the custom error message displayed to users when the input is marked as required but no value has been entered. If the required field is left empty, this message will be shown to prompt the user to provide the necessary input. |
| SelectAllOnFocus | bool | false | Specifies whether the entire content of the input field should automatically be highlighted (selected) when the input receives focus, allowing users to easily replace or copy the content. |
| Theme | string | "" | Specifies the theme to be applied, which controls the overall appearance and visual style of the element, including colors, fonts, and other stylistic details. |
| Unfocusable | bool | false | If set to true, the element will be excluded from the tab order and cannot receive keyboard or programmatic focus. This means users will not be able to navigate to the element using the Tab key or set focus to it via scripts. |
| Value | string | "" | Sets a new value for the element or retrieves its current value, depending on how the method is used. Useful for reading or updating the content, input, or state of form elements such as text fields, checkboxes, or select menus. |
| ValueMember | string | "" |
Specifies which property of each item object represents its value. The valueMember setting is particularly useful when binding the ListBox to data from a JSON file as its dataSource and you need to designate a specific property in the JSON objects to be used as the item's value. This is similar to how groupMember works, but instead of grouping items, valueMember tells the ListBox which property to use for the underlying value of each list item. For example, if your JSON objects have an "id" property, setting valueMember to "id" will store the value of the "id" property for each item in the ListBox. |
| VerticalScrollBarVisibility | VerticalScrollBarVisibility | VerticalScrollBarVisibility.Auto | Controls whether the vertical scroll bar within the dropdown menu is visible. This property allows you to specify if users can scroll vertically to view additional dropdown options when the content overflows the visible area. |