| Name | Type | Default | Description |
|---|
| DateTimeFormat | TimeFormat | { hour: 'numeric', minute: 'numeric' } | Specifies the format in which the time is displayed within the input field. This option accepts configuration objects compatible with the ECMAScript Internationalization API (Intl.DateTimeFormat), allowing you to customize the presentation of hours, minutes, seconds, and related time components. By default, the time format uses a 'numeric' style for each unit, displaying time values as numbers (e.g., "14:05"). Adjust this property to use other available formatting options, such as '2-digit', or to include additional components as needed. |
| Disabled | bool | false | Controls whether the element is interactive or inactive. When enabled, users can interact with the element; when disabled, the element is non-interactive and typically appears visually distinct (e.g., grayed out) to indicate its disabled state. |
| DropDownButtonPosition | DropDownButtonPosition | DropDownButtonPosition.Right | Specifies the alignment and placement of the dropdown button relative to its parent element, allowing you to control whether the button appears to the left, right, center, top, or bottom of its container. |
| DropDownHeight | object | auto | Specifies the height of the dropdown menu. By default, the height is set to 'auto', allowing the dropdown to adjust automatically based on its content. You can set a specific height (in pixels, ems, etc.) to control the maximum visible area of the dropdown; when the content exceeds this height, a scrollbar will appear. |
| DropDownWidth | object | | Specifies the width of the dropdown menu. By default, this value is an empty string, which means the dropdown’s width will be determined by a CSS variable (e.g., --dropdown-width). You can override the default behavior by explicitly setting a width value (such as '200px', '50%', etc.), which will directly apply that width to the dropdown. If left unset, ensure that the related CSS variable is defined to control the dropdown’s appearance. |
| InputPurpose | string | "off" | Defines the intended purpose of the input field and specifies the level of permission granted to the browser or user agent to automatically assist users in completing the input, particularly within form contexts. This attribute provides guidance to browsers about the type of data expected—for example, whether the field should contain a user's name, address, or other personal information—thus enabling features like autofill. The value of this property aligns with the standard HTML autocomplete attribute and accepts specific keywords such as 'on', 'off', 'name', 'organization', 'street-address', and others, to control the autofill behavior for each input element. |
| UnlockKey | string | "" | Defines or retrieves the unlockKey, a unique identifier required to unlock and access the product's features or content. |
| Locale | string | "en" | Defines or retrieves the current language setting, typically represented as a locale code (e.g., "en", "fr"). This setting determines which set of localized strings from the messages property will be used for display. Use this property to switch or detect the language context within your application. |
| Messages | object | N/A | Specifies or retrieves an object containing the widget’s display strings, allowing for easy customization and localization of text within the widget. This property is typically used together with the locale property to provide translations and adapt text content to different languages and regions. |
| Name | string | "" | Sets or retrieves the value of the element's name attribute. This attribute specifies the name used to identify the element’s data when an HTML form is submitted, allowing its value to be included in the form data sent to the server. |
| IsOpened | bool | false | Indicates whether the dropdown menu is currently open and visible to the user. If set to true, the dropdown will be displayed; if false, it will remain closed. |
| Placeholder | string | "" | Specifies the placeholder text that appears inside the input field when it is empty, providing users with a hint or example of the expected input format or content. |
| Readonly | bool | false | Specifies whether the user can manually enter text into the input field. When dropDownButtonPosition is set to 'left' or 'right' and a dataSource is provided, the readonly property controls the component's behavior:
- If readonly is false, the element functions as a ComboBox, allowing users to type and select suggestions from the data source.
- If readonly is true, the element behaves as a DropDownList, restricting user input to only the options available in the data source and preventing manual text entry. |
| RightToLeft | bool | false | Controls or retrieves whether the element's text direction is set to right-to-left (RTL), enabling proper alignment and display for languages and locales that use right-to-left scripts (such as Arabic or Hebrew). |
| Theme | string | "" | Specifies the visual theme to be applied to the element. Themes control the overall appearance, including colors, fonts, and styling, ensuring a consistent look and feel across the component or application. |
| Unfocusable | bool | false | When set to true, the element will be excluded from the page’s tab order, making it unfocusable using keyboard navigation or script-based focus commands. This prevents users from moving focus to the element using the Tab key or programmatically via JavaScript (e.g., element.focus()). |
| Value | IEnumerable<object> | | Sets a new value for the element or retrieves the current value of the element, depending on how the method is used. This allows you to either update the element's state or access its existing data programmatically. |
| Name | Type | Arguments | Description |
|---|
| Close | void | N/A | Closes the dropdown menu, hiding its list of selectable options and returning the interface to its collapsed state. |
| GetFormattedValue | void | N/A | Returns the value converted into the specified format, ensuring the output matches the required data type or structure as defined by the input parameters. |
| GetIsOpenedAsync() | Task<bool> | 'N/A' | Gets the "IsOpened" property as Task<bool>. |
| GetValue | void | N/A | Returns the current value entered or selected in the input field by the user. This value may be typed text, a number, a selected option, or any other data depending on the input type. |
| GetValueAsync() | Task<IEnumerable<object>> | 'N/A' | Gets the "Value" property as Task<IEnumerable<object>>. |
| Open | void | N/A | Displays the dropdown menu, revealing its available options to the user. |
| 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 is set to <b>readonly</b>, the element will receive focus but the text will not be selected. |
| SetValue | void | IEnumerable<object> value | Defines the current value of the input field. Expects an array containing exactly two numbers: the first representing the hour and the second representing the minutes (e.g., `[13, 45]` for 1:45 PM).Args: IEnumerable<string> value - The value to be set. |
| 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 user changes the current selection, such as highlighting a different portion of text or selecting a new item within a selectable list. It fires each time the selection changes, allowing you to respond to user interactions like selecting, deselecting, or modifying the active selection. | 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 TimeInputChangedEventHandler | This event is triggered whenever the user changes the current selection, such as highlighting a different portion of text or selecting a new item within a selectable list. It fires each time the selection changes, allowing you to respond to user interactions like selecting, deselecting, or modifying the active selection. | TimeInputChangedEventArgs |