smart-html-elements

TextBox Blazor API

TextBox Properties

Name	Type	Default	Description
AutoFocus	bool	false	Determines whether the text box will be focused on page load or not.
AutoComplete	AutoComplete	AutoComplete.Manual	Determines the autocomplete mode. Auto complete modes filter the items from the dataSource and show only those that match the input.
AutoCompleteDelay	int	100	Determines the delay before the drop down opens to show the matches from the auto complete operation.
DataSource	object	N/A	Determines the data source that will be loaded to the ComboBox. The dataSource can be an array of strings, numbers or objects where the attributes represent the properties of a List Item. For example label, value. It can also be a callback that returns an Array of items as previously described.
Disabled	bool	false	Enables or disables the element.
DisplayLoadingIndicator	bool	false	Determines whether an indicator will appear during filtering and remote item loading.
DisplayMember	string	""	Sets or gets the displayMember. The displayMember specifies the name of a property to display. The name is contained in the collection specified by the 'dataSource' property.
DisplayMode	TextBoxDisplayMode	TextBoxDisplayMode.Default	Determines how the characters are displayed inside the input.
DropDownAppendTo	object	N/A	Determines the drop down parent. The drop down can be removed from the body of the element and continue to work in another container. This is usefull when one of the parents of the element doesn't allow overflowing, by settings this property to 'body' the drop down will be appended to the DOM and the drop down will open/close as usual. dropDownAppendTo can be a string representing the id of an HTML element on the page or a direct reference to that element. Reseting it back to null will take the drop down back to it's original place.
DropDownHeight	object		Sets the height of the drop down. By default it's set to an empty string. In this case the height of the drop down is controlled by a CSS variable.
DropDownMaxHeight	object		Sets the maximum Height of the drop down. By default it's set to an empty string. In this case the maxHeight of the drop down is controlled by a CSS variable.
DropDownMaxWidth	object		Sets the maximum Width of the drop down. By default it's set to an empty string. In this case the maxWidth of the drop down is controlled by a CSS variable.
DropDownMinHeight	object		Sets the minimum Height of the drop down. By default it's set to an empty string. In this case the minHeight of the drop down is controlled by a CSS variable.
DropDownMinWidth	object		Sets the minimum Width of the drop down. By default it's set to an empty string. In this case the minWidth of the drop down is controlled by a CSS variable.
DropDownOpenMode	DropDownOpenMode	DropDownOpenMode.Default	Determines how the drop down is going to open.
DropDownOverlay	bool	false	If this property is enabled, when the element's dropdown is opened, a transparent overlay is positioned between the dropdown and the rest of the document. The purpose of the overlay is to make sure that clicking anywhere outside the drop down will will target the overlay and not the DOM.
DropDownPlaceholder	string	"No Items"	Determines the placeholder for the drop down, displayed when there are no items in it.
DropDownPosition	DropDownPosition	DropDownPosition.Auto	Determines the position of the drop down when opened.
DropDownWidth	object		Sets the width of the drop down. By default it's set to an empty string. In this case the width of the drop down is controlled by a CSS variable.
EscKeyMode	EscKeyMode	EscKeyMode.None	Determines the behavior of the element when Escape key is pressed.
EnterKeyBehavior	EnterKeyBehavior	EnterKeyBehavior.Submit	Specifies the behavior of "Enter" key.
Form	string	""	The form element that the element is associated with (its "form owner"). The value of the attribute must be the ID of a form element in the same document.
Hint	object	N/A	Sets additional helper text below the element. The hint is visible only when the element is focused.
HorizontalScrollBarVisibility	HorizontalScrollBarVisibility	HorizontalScrollBarVisibility.Auto	Determines the visibility of the horizontal Scroll bar thats inside the drop down.
InputMember	string	""	Represents the property name of a List item. Determines the value of the input when a ListItem is selected. Usefull in cases where the user wants to display for example the value of an item instead of it's label. By default the label is displayed in the input.
InputPurpose	string	"off"	Sets the purpose of the input and what, if any, permission the user agent has to provide automated assistance in filling out the element's input when in a form, as well as guidance to the browser as to the type of information expected in the element. This value corresponds to the standard HTML autocomplete attribute and can be set to values such as 'on', 'name', 'organization', 'street-address', etc.
ItemHeight	int?	N/A	Sets the height for all list items. Used only when virtualization is enabled.
ItemMeasureMode	ListItemMeasureMode	ListItemMeasureMode.Auto	Determines the item width measuring algorithm.
Items	IEnumerable<object>		A getter that returns an array of all List items inside the drop down.
ItemTemplate	object	N/A	The itemTemplate property is a string that represents the id of an HTMLTemplateElement in the DOM. It's used to set a customize the content of the list items.
Label	string	""	Sets a little text label above the element.
LoadingIndicatorPlaceholder	string	"Loading..."	Determines the text that will be displayed next to the loading indicator when the loader is visible and it's position is top or bottom.
LoadingIndicatorPosition	VerticalAlignment	VerticalAlignment.Center	Determines the position of the loading indicator.
Locale	string	"en"	Sets or gets the language. Used in conjunction with the property messages.
MaxLength	int	N/A	Sets or gets the maximum number of characters that the user can enter.
MinLength	int	2	Sets or gets the minimum number of characters that the user have to enter to trigger the auto complete functionality.
Messages	object	N/A	Sets or gets an object specifying strings used in the widget that can be localized. Used in conjunction with the property language.
Name	string	""	Sets or gets the name attribute for the element. Name is used when submiting HTML forms.
IsOpened	bool	false	Determines whether the drop down is opened or closed
Placeholder	string	""	Determines the input's placeholder.
Readonly	bool	false	Disables user interaction with the element.
RightToLeft	bool	false	Sets or gets the value indicating whether the element is aligned to support locales using right-to-left fonts.
Required	bool	false	Specifies that the user must fill the input before submitting a form with the element.
RequiredMessage	string	""	Specifies the message that will appear if required is set and no value is provided in the input.
SelectAllOnFocus	bool	false	Determines whether the content of the input will be selected on focus or not.
Theme	string	""	Determines the theme. Theme defines the look of the element
Unfocusable	bool	false	If is set to true, the element cannot be focused.
Value	string	""	Sets or gets the value of the element.
ValueMember	string	""	Determines the value member of an item. Stored as value in the item object. Similar to groupMember, valueMember is especially usefull when using data from a JSON file as a dataSource for the ListBox and there's a specific property that should be used for the value the items.
VerticalScrollBarVisibility	VerticalScrollBarVisibility	VerticalScrollBarVisibility.Auto	Determines the visibility of the vertical scroll bar that's inside the drop down.

TextBox Methods

Name	Type	Arguments	Description
Close	void	N/A	Closes the drop down. "The drop down is used only when auto complete is enabled."
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>.
GetValueAsync()	Task<string>	'N/A'	Gets the "Value" property as Task<string>.
Open	void	N/A	Opens the drop down. "The drop down is used only when auto complete is enabled."
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.
Reset	void	N/A	The method is used to reset the input back to it's initial value.
StateHasChanged	void	'N/A'	Refreshes the state and Re-renders the Blazor Component, if necessary.

TextBox Events

Name	Type	Description	Event Detail
OnChange	EventCallback<Event>	This event is triggered when the value of the Text Box is changed. This happens on blur and if 'Enter' is pressed.	dynamic oldValue- The previous value before it was changed., dynamic value- The new value., dynamic type- The type of the event.
Changed	event TextBoxChangedEventHandler	This event is triggered when the value of the Text Box is changed. This happens on blur and if 'Enter' is pressed.	TextBoxChangedEventArgs
OnChanging	EventCallback<Event>	This event is triggered on each key up event of the TextBox, if the value is changed.	dynamic oldValue- The previous value before it was changed., dynamic value- The new value.
Changing	event TextBoxChangingEventHandler	This event is triggered on each key up event of the TextBox, if the value is changed.	TextBoxChangingEventArgs