Input Properties
| Name | Type | Default | Description |
|---|---|---|---|
| AutoCompleteDelay | int | 100 | Specifies the amount of time, in milliseconds, to wait before displaying the dropdown list of matching suggestions after the user interacts with the autocomplete input. This delay helps control how quickly the dropdown appears, improving user experience by preventing it from opening too rapidly as users type. |
| DataSource | object | N/A | Specifies the data source that will be used to populate the Input component. The dataSource property accepts multiple formats:- 'Array of Primitives:' An array of strings or numbers, where each element represents a single list item. - 'Array of Objects:' An array of objects, where each object defines the properties of a list item. The recognized fields for each item object include: - label (string): The display text for the item. - value (string | number): The underlying value associated with the item. - selected (boolean): Indicates whether the item is initially selected. - prefix (string): HTML content to display before the label. - suffix (string): HTML content to display after the label. - title (string): Additional descriptive text, typically used for tooltips. - 'Callback Function:' A function that returns an array of items in either of the formats described above, allowing for dynamic or asynchronous data loading. The prefix and suffix fields can contain HTML, which is rendered respectively before and after the item's label. This allows for additional icons, badges, or formatting as needed to enhance the list item's visual presentation. |
| Disabled | bool | false | Controls whether the element is active and interactive (enabled) or inactive and unresponsive to user interactions (disabled). When disabled, the element cannot be interacted with or triggered by the user. |
| DropDownClassList | IEnumerable<object> | N/A | Allows you to specify extra CSS class names that will be applied to the Input dropdown element, enabling custom styling or theming beyond the default classes. |
| DropDownButtonPosition | DropDownButtonPosition | DropDownButtonPosition.None | Specifies the placement of the dropdown button relative to its container or trigger element, such as positioning it above, below, to the left, or to the right. This affects where the dropdown appears on the user interface when activated. |
| DropDownOpenPosition | DropDownOpenPosition | DropDownOpenPosition.Auto | Specifies the placement of the dropdown menu relative to its trigger element when opened, such as above, below, left, or right. |
| 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 the corresponding CSS variable. To override the default behavior and set a custom height, assign a specific value (such as "200px" or "50%") to this property. If left unset, the component relies on the CSS variable to control its height. | |
| DropDownWidth | object | Defines 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 you to control its sizing through your stylesheet. To specify a fixed width, provide a valid CSS width value (e.g., "200px", "100%"). If not specified, the component will fallback to the CSS variable for its width. | |
| InputPurpose | string | "off" | Specifies the purpose of the input field and instructs the browser on both the type of data expected and the level of permission granted to automatically assist the user in filling out the form element. This property directly maps to the standard HTML autocomplete attribute, which helps improve user experience by enabling browsers to suggest or autofill relevant data, such as a user’s name, organization, street address, and more. Common values include 'on' (enables autocomplete), 'off' (disables autocomplete), as well as context-specific tokens like 'name', 'email', 'organization', and 'street-address', among others. Using the appropriate value enhances form usability, accuracy, and accessibility. |
| Items | int | 8 | Specifies the maximum number of matching items that will be displayed in the dropdown menu after a new auto-complete query is performed. By default, the dropdown will show up to 8 items. If the number of matched items exceeds this limit, only the first 8 results will be visible, and additional matches will not be shown unless this value is increased. |
| UnlockKey | string | "" | Retrieves or assigns the unlockKey value used to grant access to the product. The unlockKey serves as a security credential required to unlock and enable product functionality. |
| Locale | string | "en" | Specifies or retrieves the current language setting, which determines the localization to be used for displaying content. This property works together with the messages property to select and present language-specific messages or text strings. Setting this property updates the language used throughout the interface, while getting the property returns the currently active language code (e.g., "en", "fr", "es"). |
| Messages | object | N/A | Defines or retrieves an object containing customizable text strings displayed by the widget, enabling localization for different languages and regions. This property works together with the locale property to allow the widget’s user interface labels, messages, and prompts to be easily translated and adapted for international audiences. |
| MinLength | int | 1 | 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 will open and display a list of matching items based on the user's input. |
| Name | string | "" | Sets or retrieves the value of the element’s name attribute. The name attribute uniquely identifies form elements when submitting data through an HTML form. It is used as the key for the form data sent to the server, allowing server-side scripts to access the corresponding value. |
| IsOpened | bool | false | Indicates whether the dropdown menu is currently open (true) or closed (false). |
| Placeholder | string | "" | Specifies the placeholder text displayed inside the input field when it is empty, providing guidance or an example to the user about the expected input format or content. |
| Query | object | Defines or retrieves the filter query used to determine which items are displayed. This query is utilized by the autoComplete operation to match and return relevant items from the data source. If the query is set to an empty string, no filtering is applied, and all available items from the data source are shown. | |
| QueryMode | InputQueryMode | InputQueryMode.ContainsIgnoreCase | Specifies the autocomplete query mode, which defines how search suggestions are generated. This property controls the matching algorithm used during autocomplete operations, such as whether suggestions are based on prefix, infix, or exact matches within the input text. Adjusting this property allows you to tailor the autocomplete behavior to best suit your application's search experience. |
| Readonly | bool | false | Specifies whether the user can enter text directly into the input field. When dropDownButtonPosition is set to 'left' or 'right', the readonly property controls the behavior of the input when a dataSource is provided:
|
| RightToLeft | bool | false | Specifies or retrieves whether the element's text alignment and layout are configured for right-to-left (RTL) languages, such as Arabic or Hebrew. When enabled, the element's content will display in a direction suitable for RTL locales, ensuring proper reading order and alignment for users of these languages. |
| Sorted | bool | false | Specifies whether the items should be arranged in alphabetical order. If enabled, the items will be sorted from A to Z based on their names; if disabled, the original order will be preserved. |
| SortDirection | string | "asc" | Specifies the sorting order to use when sort is enabled. Accepts either asc for ascending order or desc for descending order. |
| SelectedIndex | int | -1 | Specifies the index of the currently selected item within a list or array. This value indicates which item is active or highlighted, typically starting from zero for the first item. |
| SelectedValue | object | Specifies the currently selected value from the available options. This property indicates which option is active or chosen by the user within the component. | |
| Theme | string | "" | Specifies the visual theme applied to the element. The selected theme controls the element’s overall appearance, including colors, fonts, and styling, to ensure consistency with the application's design guidelines. |
| Type | string | "" | Specifies the type of input expected by the field. Setting the input type controls the kind of data users can enter (e.g., text, number, email, password), impacts the on-screen keyboard on mobile devices, and enables input validation based on the chosen type. |
| Unfocusable | bool | false | When set to true, this property ensures that the element is not focusable and cannot receive keyboard or programmatic focus. |
| Value | string | "" | Sets a new value for the element or retrieves its current value, depending on how the function is used. |
Input Methods
| Name | Type | Arguments | Description |
|---|---|---|---|
| Close | void | N/A | Closes the currently open dropdown menu, hiding its options from view and reverting the interface to its default state. |
| EnsureVisible | void | N/A | Ensures that the currently selected item remains visible within the viewport by automatically scrolling the container as needed. This guarantees that users can always see the active item, even when navigating through a list with limited onscreen space. |
| GetDataSourceAsync() | Task<IEnumerable<object>> | 'N/A' | Gets the "DataSource" property as Task<IEnumerable<object>>. |
| GetIsOpenedAsync() | Task<bool> | 'N/A' | Gets the "IsOpened" property as Task<bool>. |
| GetItem | object | object value | Retrieves an item from the data source by matching its value. For example, if your data source is an array of strings like ['Item 1', 'Item 2', 'Item 3'], you can retrieve an item by passing its exact string value, such as 'Item 1'. If your data source is an array of objects with properties such as { label: 'Item 1', value: 'item1' }, you should pass the specific value (e.g., 'item1') when calling selectItem. The method will return the corresponding item whose value matches the argument you provide.Args: string value - The item's value when the item is an object or string when the item is a string item. |
| GetItem | object | string value | Retrieves an item from the data source by matching its value. For example, if your data source is an array of strings like ['Item 1', 'Item 2', 'Item 3'], you can retrieve an item by passing its exact string value, such as 'Item 1'. If your data source is an array of objects with properties such as { label: 'Item 1', value: 'item1' }, you should pass the specific value (e.g., 'item1') when calling selectItem. The method will return the corresponding item whose value matches the argument you provide.Args: string value - The item's value when the item is an object or string when the item is a string item. |
| GetItem | object | int value | Retrieves an item from the data source by matching its value. For example, if your data source is an array of strings like ['Item 1', 'Item 2', 'Item 3'], you can retrieve an item by passing its exact string value, such as 'Item 1'. If your data source is an array of objects with properties such as { label: 'Item 1', value: 'item1' }, you should pass the specific value (e.g., 'item1') when calling selectItem. The method will return the corresponding item whose value matches the argument you provide.Args: int value - The item's value when the item is an object or string when the item is a string item. |
| GetSelectedIndexAsync() | Task<int> | 'N/A' | Gets the "SelectedIndex" property as Task<int>. |
| GetSelectedItem | object | object value | Retrieves the currently selected item from the data source. <br/>- If your data source is a simple array of strings—such as `['Item 1', 'Item 2', 'Item 3']`—and the user selects the second item, this method will return `'Item 2'`.<br/>- If your data source is an array of objects with properties like `{ label, value }`, the method returns the `value` property of the selected object. For example, with a data source of `[ { label: 'First', value: 1 }, { label: 'Second', value: 2 } ]` and the user selects "Second", the method returns `2`.<br/><br/>This ensures the method always returns the relevant value associated with the selected option, based on the structure of the data source.Args: string value - The item's value when the item is an object or string when the item is a string item. |
| GetSelectedItem | object | string value | Retrieves the currently selected item from the data source. <br/>- If your data source is a simple array of strings—such as `['Item 1', 'Item 2', 'Item 3']`—and the user selects the second item, this method will return `'Item 2'`.<br/>- If your data source is an array of objects with properties like `{ label, value }`, the method returns the `value` property of the selected object. For example, with a data source of `[ { label: 'First', value: 1 }, { label: 'Second', value: 2 } ]` and the user selects "Second", the method returns `2`.<br/><br/>This ensures the method always returns the relevant value associated with the selected option, based on the structure of the data source.Args: string value - The item's value when the item is an object or string when the item is a string item. |
| GetSelectedItem | object | int value | Retrieves the currently selected item from the data source. <br/>- If your data source is a simple array of strings—such as `['Item 1', 'Item 2', 'Item 3']`—and the user selects the second item, this method will return `'Item 2'`.<br/>- If your data source is an array of objects with properties like `{ label, value }`, the method returns the `value` property of the selected object. For example, with a data source of `[ { label: 'First', value: 1 }, { label: 'Second', value: 2 } ]` and the user selects "Second", the method returns `2`.<br/><br/>This ensures the method always returns the relevant value associated with the selected option, based on the structure of the data source.Args: int value - The item's value when the item is an object or string when the item is a string item. |
| GetValueAsync() | Task<string> | 'N/A' | Gets the "Value" property as Task<string>. |
| Open | void | N/A | Expands the dropdown menu to display all available options for user selection. |
| Refresh | void | 'N/A' | Refreshes the Blazor Component. Performs a layout of the HTML Elements and recalculates the measurements. |
| Render | void | 'N/A' | Re-renders the Blazor Component. This method will make a full re-render. |
| Select | void | N/A | Enhances user interaction by automatically focusing the input element and selecting its text. If the input is set to <b>readonly</b>, the element receives focus but its text is not selected, ensuring consistent behavior based on the input's state. |
| SelectItem | void | object value | Selects an item from a data source based on its value. <br/><br/>If your data source is a simple array of strings (e.g., `['Item 1', 'Item 2', 'Item 3']`), you can select an item by passing the exact string value, such as `'Item 1'`. <br/><br/>If your data source is an array of objects with `label` and `value` properties (e.g., `[{ label: 'First', value: 1 }, { label: 'Second', value: 2 }]`), you should pass the corresponding `value` property (e.g., `1` for the first item) when calling `selectItem`. <br/><br/>This method automatically locates and selects the item whose value matches the argument you provide, whether the values are strings or object properties.Args: string value - The item's value when the item is an object or string when the item is a string item. |
| SelectItem | void | string value | Selects an item from a data source based on its value. <br/><br/>If your data source is a simple array of strings (e.g., `['Item 1', 'Item 2', 'Item 3']`), you can select an item by passing the exact string value, such as `'Item 1'`. <br/><br/>If your data source is an array of objects with `label` and `value` properties (e.g., `[{ label: 'First', value: 1 }, { label: 'Second', value: 2 }]`), you should pass the corresponding `value` property (e.g., `1` for the first item) when calling `selectItem`. <br/><br/>This method automatically locates and selects the item whose value matches the argument you provide, whether the values are strings or object properties.Args: string value - The item's value when the item is an object or string when the item is a string item. |
| SelectItem | void | int value | Selects an item from a data source based on its value. <br/><br/>If your data source is a simple array of strings (e.g., `['Item 1', 'Item 2', 'Item 3']`), you can select an item by passing the exact string value, such as `'Item 1'`. <br/><br/>If your data source is an array of objects with `label` and `value` properties (e.g., `[{ label: 'First', value: 1 }, { label: 'Second', value: 2 }]`), you should pass the corresponding `value` property (e.g., `1` for the first item) when calling `selectItem`. <br/><br/>This method automatically locates and selects the item whose value matches the argument you provide, whether the values are strings or object properties.Args: int value - The item's value when the item is an object or string when the item is a string item. |
| StateHasChanged | void | 'N/A' | Refreshes the state and Re-renders the Blazor Component, if necessary. |
Input Events
| Name | Type | Description | Event Detail |
|---|---|---|---|
| OnChange | EventCallback<Event> | This event is triggered whenever the user changes the current selection, such as selecting different text, items, or options within the interface. It provides an opportunity to respond dynamically to user interactions involving selection changes. | string label- The label of the new selected item., dynamic oldLabel- The label of the item that was previously selected before the event was triggered., dynamic oldValue- The value of the item that was previously selected before the event was triggered., dynamic value- The value of the new selected item. |
| Changed | event InputChangedEventHandler | This event is triggered whenever the user changes the current selection, such as selecting different text, items, or options within the interface. It provides an opportunity to respond dynamically to user interactions involving selection changes. | InputChangedEventArgs |
| OnChanging | EventCallback<Event> | This event is triggered whenever the user releases a key (keyup) while typing in the Input field, but only if the input’s value has actually changed since the last event. | dynamic oldValue- The previous value before it was changed., dynamic value- The new value. |
| Changing | event InputChangingEventHandler | This event is triggered whenever the user releases a key (keyup) while typing in the Input field, but only if the input’s value has actually changed since the last event. | InputChangingEventArgs |
| OnOpen | EventCallback<Event> | This event is triggered immediately when the popup component becomes visible to the user, signaling that the popup has been successfully opened and rendered in the DOM. It can be used to execute custom logic or initialize content whenever the popup appears. | N/A |
| Opened | event InputOpenedEventHandler | This event is triggered immediately when the popup component becomes visible to the user, signaling that the popup has been successfully opened and rendered in the DOM. It can be used to execute custom logic or initialize content whenever the popup appears. | InputOpenedEventArgs |
| OnClose | EventCallback<Event> | This event is triggered immediately when the popup window is closed, either by user action (such as clicking the close button) or programmatically via code. It provides an opportunity to execute cleanup tasks, update application state, or respond to the closure of the popup. | N/A |
| Closed | event InputClosedEventHandler | This event is triggered immediately when the popup window is closed, either by user action (such as clicking the close button) or programmatically via code. It provides an opportunity to execute cleanup tasks, update application state, or respond to the closure of the popup. | InputClosedEventArgs |
| OnItemClick | EventCallback<Event> | This event is triggered whenever a user selects (clicks on) an item within the popup list. It allows you to respond to user interactions by executing specific logic or actions when a particular popup list item is chosen. | dynamic item- The item that was clicked., string label- The label of the item that was clicked., dynamic value- The value of the item that was clicked. |
| ItemClicked | event InputItemClickedEventHandler | This event is triggered whenever a user selects (clicks on) an item within the popup list. It allows you to respond to user interactions by executing specific logic or actions when a particular popup list item is chosen. | InputItemClickedEventArgs |
Enums
DropDownButtonPosition
| DropDownButtonPosition.None |
| DropDownButtonPosition.Left |
| DropDownButtonPosition.Right |
DropDownOpenPosition
| DropDownOpenPosition.Auto |
| DropDownOpenPosition.Top |
| DropDownOpenPosition.Bottom |
InputQueryMode
| InputQueryMode.Contains |
| InputQueryMode.ContainsIgnoreCase |
| InputQueryMode.DoesNotContain |
| InputQueryMode.DoesNotContainIgnoreCase |
| InputQueryMode.Equals |
| InputQueryMode.EqualsIgnoreCase |
| InputQueryMode.StartsWith |
| InputQueryMode.StartsWithIgnoreCase |
| InputQueryMode.EndsWith |
| InputQueryMode.EndsWithIgnoreCase |