| Name | Type | Default | Description |
|---|
| Disabled | bool | false | Specifies whether the element is active and interactive (enabled) or inactive and non-interactive (disabled). When disabled, the element cannot be focused, clicked, or edited 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 further customization of its appearance and styling. |
| DropDownButtonPosition | DropDownButtonPosition | DropDownButtonPosition.None | Specifies the placement of the dropdown button relative to its parent element, such as aligning it to the left, right, top, or bottom. This controls where the dropdown button appears in the user interface. |
| DropDownHeight | object | | Specifies the height of the dropdown component. By default, this value is set to an empty string, which means the dropdown’s height will be determined by a corresponding CSS variable. If a specific value is provided, it will override the CSS variable and explicitly set the dropdown’s height. |
| DropDownWidth | object | | 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 designated CSS variable rather than a fixed value. You can set this property to a specific CSS width value (e.g., "200px" or "50%") to override the default behavior and directly control the dropdown's width. If left empty, ensure the relevant CSS variable is properly defined to maintain consistent styling. |
| Name | string | "" | Specifies or retrieves the value of the element’s name attribute. This attribute uniquely identifies the element within form data, allowing its value to be included when the form is submitted. The name attribute is essential for correctly grouping and processing user input on the server side during form submission. |
| IsOpened | bool | false | Indicates whether the dropdown menu is currently open or closed. This property returns true if the dropdown is visible to the user, and false if it is hidden. |
| OnlyCountries | IEnumerable<object> | [] | Defines or retrieves an array of country codes to override the default list of all countries. Each country code in the array must be a valid ISO 3166-1 alpha-2 code (see: https://en.wikipedia.org/wiki/ISO_3166-1_alpha-2), which consists of a two-letter uppercase abbreviation representing each country (e.g., 'US' for United States, 'FR' for France). Use this property to specify a custom subset of countries as needed. |
| Placeholder | string | "" | Specifies the placeholder text that appears inside the input field when it is empty, providing a hint to the user about the expected input format or content. |
| SelectedCountry | string | "" | Gets or sets the currently selected country for the element. The value should be provided as an ISO 3166-1 alpha-2 country code (for example, "US" for the United States or "FR" for France). For the complete list of valid country codes, refer to the ISO 3166-1 alpha-2 standard: https://en.wikipedia.org/wiki/ISO_3166-1_alpha-2. |
| RightToLeft | bool | false | Gets or sets a value that determines whether the element's alignment supports right-to-left (RTL) locales and text direction, typically used for languages such as Arabic or Hebrew. When enabled, the element's content aligns according to RTL layout standards. |
| Theme | string | "" | Specifies the theme to be applied to the element. The selected theme controls the visual style, including colors, typography, and other design attributes, ensuring consistency with the overall user interface. |
| Unfocusable | bool | false | If set to true, the element will be excluded from keyboard navigation and cannot receive focus via the Tab key or other focus-related interactions. |
| Value | string | "" | Sets a new value for the element or retrieves its current value, depending on whether an argument is provided. Use this to programmatically update or access the content, state, or data associated with the element (such as the value of an input field or the text of a form control). |
| Name | Type | Arguments | Description |
|---|
| Close | void | N/A | Closes the dropdown menu, hiding all currently visible options and returning the component to its inactive state. |
| EnsureVisible | void | N/A | Guarantees that the currently active (selected) item remains within the visible area of its container, automatically scrolling as needed to keep the item in view. |
| GetIsOpenedAsync() | Task<bool> | 'N/A' | Gets the "IsOpened" property as Task<bool>. |
| GetValueAsync() | Task<string> | 'N/A' | Gets the "Value" property as Task<string>. |
| Open | void | N/A | Displays the drop-down menu, allowing users to view and select available options from the list. |
| 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 | Selects the text within the input field. If the input field is set to <b>readonly</b>, it will instead focus the element without selecting the text. |
| StateHasChanged | void | 'N/A' | Refreshes the state and Re-renders the Blazor Component, if necessary. |
| Name | Type | Description | Event Detail |
|---|
| OnChange | EventCallback<Event> | This event is triggered whenever the current selection within the component changes, such as when a user selects a different item or option. It allows you to respond programmatically to selection changes, for example by updating related UI elements or processing the newly selected value. | 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 CountryInputChangedEventHandler | This event is triggered whenever the current selection within the component changes, such as when a user selects a different item or option. It allows you to respond programmatically to selection changes, for example by updating related UI elements or processing the newly selected value. | CountryInputChangedEventArgs |
| OnChanging | EventCallback<Event> | This event is triggered every time a key is released within the Input field, but only if the input’s value has changed since the last event. This allows you to respond specifically to user input modifications rather than all key releases. | dynamic oldValue- The previous value before it was changed., dynamic value- The new value. |
| Changing | event CountryInputChangingEventHandler | This event is triggered every time a key is released within the Input field, but only if the input’s value has changed since the last event. This allows you to respond specifically to user input modifications rather than all key releases. | CountryInputChangingEventArgs |
| OnItemClick | EventCallback<Event> | This event is triggered whenever a user selects an item by clicking on it within the popup list. It allows you to respond to user interactions by executing custom logic—such as updating the UI or retrieving additional data—immediately after an item is chosen from the displayed list of options. | 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 CountryInputItemClickedEventHandler | This event is triggered whenever a user selects an item by clicking on it within the popup list. It allows you to respond to user interactions by executing custom logic—such as updating the UI or retrieving additional data—immediately after an item is chosen from the displayed list of options. | CountryInputItemClickedEventArgs |