Properties
Name | Type | Default | Description |
---|---|---|---|
Data | |||
Text |
string |
null | The text to be displayed. |
Value |
T |
null | The value of this input element. |
Validation | |||
Counter |
int? |
null | If set, will display the counter, value 0 will display current count but no stop count. |
Error |
bool |
False | If true, the label will be displayed in an error state. |
ErrorId |
string |
null | The ErrorId that will be used by aria-describedby if Error true |
ErrorText |
string |
null | The ErrorText that will be displayed if Error true. |
For |
Expression<Func<T>> |
null | Specify an expression which returns the model's field for which validation messages should be displayed. |
MaxLength |
int |
524288 | Maximum number of characters that the input will accept |
Pattern |
string |
null | The pattern attribute, when specified, is a regular expression which the input's value must match in order for the value to pass constraint validation. It must be a valid JavaScript regular expression Not Supported in multline input |
Required |
bool |
False | If true, this form input is required to be filled out. |
RequiredError |
string |
"Required" | The error text that will be displayed if the input is not filled out but required. |
Validation |
object |
null | A validation func or a validation attribute. Supported types are: Func<T, bool> ... will output the standard error message "Invalid" if false Func<T, string> ... outputs the result as error message, no error if null Func<T, IEnumerable< string >> ... outputs all the returned error messages, no error if empty Func<object, string, IEnumerable< string >> input Form.Model, Full Path of Member ... outputs all the returned error messages, no error if empty Func<T, Task< bool >> ... will output the standard error message "Invalid" if false Func<T, Task< string >> ... outputs the result as error message, no error if null Func<T, Task<IEnumerable< string >>> ... outputs all the returned error messages, no error if empty Func<object, string, Task<IEnumerable< string >>> input Form.Model, Full Path of Member ... outputs all the returned error messages, no error if empty System.ComponentModel.DataAnnotations.ValidationAttribute instances |
Behavior | |||
Adornment |
Adornment |
Adornment.End | The Adornment if used. By default, it is set to None. |
AdornmentIcon |
string |
null | Icon that will be used if Adornment is set to Start or End. |
AdornmentText |
string |
null | Text that will be used if Adornment is set to Start or End, the Text overrides Icon. |
AutoFocus |
bool |
False | If true the input will focus automatically. |
Clearable |
bool |
False | Show clear button. |
CoerceText |
bool |
True | On drop-down close override Text with selected Value. This makes it clear to the user which list value is currently selected and disallows incomplete values in Text. |
CoerceValue |
bool |
False | If user input is not found by the search func and CoerceValue is set to true the user input will be applied to the Value which allows to validate it and display an error message. |
Converter |
Converter<T, string> |
The generic converter of the component. | |
Culture |
CultureInfo |
The culture of the component. | |
DebounceInterval |
int |
100 | Debounce interval in milliseconds. |
Disabled |
bool |
False | If true, the input element will be disabled. |
Format |
string |
null | Conversion format parameter for ToString(), can be used for formatting primitive types, DateTimes and TimeSpans |
HelperText |
string |
null | The HelperText will be displayed below the text field. |
HelperTextOnFocus |
bool |
False | If true, the helper text will only be visible on focus. |
Immediate |
bool |
False | If true, the input will update the Value immediately on typing. If false, the Value is updated only on Enter. |
InputMode |
InputMode |
InputMode.text | Hints at the type of data that might be entered by the user while editing the input |
KeyDownPreventDefault |
bool |
False | Prevent the default action for the KeyDown event. |
KeyUpPreventDefault |
bool |
False | Prevent the default action for the KeyUp event. |
Label |
string |
null | If string has value the label text will be displayed in the input, and scaled down at the top if the input has value. |
Lines |
int |
1 | A multiline input (textarea) will be shown, if set to more than one line. |
MinCharacters |
int |
0 | Minimum characters to initiate a search |
OnlyValidateIfDirty |
bool |
False | The validation is only triggered if the user has changed the input value at least once. By default, it is false |
Placeholder |
string |
null | The short hint displayed in the input before the user enters a value. |
ReadOnly |
bool |
False | If true, the input will be read-only. |
ResetValueOnEmptyText |
bool |
False | Reset value if user deletes the text |
SelectOnClick |
bool |
True | If true, clicking the text field will select (highlight) its contents. |
ShowProgressIndicator |
bool |
False | Whether to show the progress indicator. |
Strict |
bool |
True | If false, clicking on the Autocomplete after selecting an option will query the Search method again with an empty string. This makes it easier to view and select other options without resetting the Value. T must either be a record or override GetHashCode and Equals. |
TextUpdateSuppression |
bool |
True | When TextUpdateSuppression is true (which is default) the text can not be updated by bindings while the component is focused in BSS (not WASM). This solves issue #1012: Textfield swallowing chars when typing rapidly If you need to update the input's text while it is focused you can set this parameter to false. Note: on WASM text update suppression is not active, so this parameter has no effect. |
Appearance | |||
AdornmentAriaLabel |
string |
The aria-label of the adornment. | |
AdornmentColor |
Color |
Color.Default | The color of the adornment if used. It supports the theme colors. |
CloseIcon |
string |
The Close Autocomplete Icon | |
DisableUnderLine |
bool |
False | If true, the input will not have an underline. |
FullWidth |
bool |
False | If true, the input will take up the full width of its container. |
IconSize |
Size |
Size.Medium | The Icon Size. |
Margin |
Margin |
Margin.None | Will adjust vertical spacing. |
OpenIcon |
string |
The Open Autocomplete Icon | |
ProgressIndicatorColor |
Color |
Color.Default | The color of the progress indicator. |
ShrinkLabel |
bool |
False | ShrinkLabel prevents the label from moving down into the field when the field is empty. |
Variant |
Variant |
Variant.Text | Variant to use. |
List behavior | |||
AfterItemsTemplate |
RenderFragment |
null | Optional presentation template that is shown at the bottom of the list. If no items are present, the fragment is hidden. |
BeforeItemsTemplate |
RenderFragment |
null | Optional presentation template that is shown at the top of the list. If no items are present, the fragment is hidden. |
ItemDisabledFunc |
Func<T, bool> |
null | Function to be invoked when checking whether an item should be disabled or not |
ItemDisabledTemplate |
RenderFragment<T> |
null | Optional presentation template for disabled item |
ItemSelectedTemplate |
RenderFragment<T> |
null | Optional presentation template for the selected item |
ItemTemplate |
RenderFragment<T> |
null | Optional presentation template for unselected items |
MaxItems |
int? |
10 | Maximum items to display, defaults to 10. A null value will display all items. |
MoreItemsTemplate |
RenderFragment |
null | Optional presentation template for when more items were returned from the Search function than the MaxItems limit |
NoItemsTemplate |
RenderFragment |
null | Optional presentation template for when no items were returned from the Search function |
ProgressIndicatorInPopoverTemplate |
RenderFragment |
null | Optional template for showing progress indicator inside the popover |
ProgressIndicatorTemplate |
RenderFragment |
null | Optional template for progress indicator |
SearchFunc |
Func<string, CancellationToken, Task<IEnumerable<T>>> |
null | Func that returns a list of items matching the typed text. Provides a cancellation token that is marked as cancelled when the user changes the search text or selects a value from the list. This can be used to cancel expensive asynchronous work occuring within the SearchFunc itself. |
SelectValueOnTab |
bool |
False | If true, the currently selected item from the drop-down (if it is open) is selected. |
ToStringFunc |
Func<T, string> |
null | Defines how values are displayed in the drop-down list |
List appearance | |||
AnchorOrigin |
Origin |
Origin.BottomCenter | Set the anchor origin point to determen where the popover will open from. |
Dense |
bool |
False | If true, compact vertical padding will be applied to all Autocomplete items. |
ListClass |
string |
null | User class names for the internal list, separated by space |
ListItemClass |
string |
null | User class names for the internal list item, separated by space. |
MaxHeight |
int |
300 | The maximum height of the Autocomplete when it is open. |
PopoverClass |
string |
null | User class names for the popover, separated by space |
TransformOrigin |
Origin |
Origin.TopCenter | Sets the transform origin point for the popover. |
Common | |||
Class |
string |
null | User class names, separated by space. |
Style |
string |
null | User styles, applied on top of the component's own classes and styles. |
Tag |
object |
null | Use Tag to attach any user data object to the component for your convenience. |
UserAttributes |
Dictionary<string, object> |
UserAttributes carries all attributes you add to the component that don't match any of its parameters. They will be splatted onto the underlying HTML tag. | |
EventCallbacks
Name | Type | Description |
---|---|---|
IsOpenChanged |
EventCallback<bool> | An event triggered when the state of IsOpen has changed |
OnAdornmentClick |
EventCallback<MouseEventArgs> | Button click event if set and Adornment used. |
OnBlur |
EventCallback<FocusEventArgs> | Fired when the element loses focus. |
OnClearButtonClick |
EventCallback<MouseEventArgs> | Button click event for clear button. Called after text and value has been cleared. |
OnInternalInputChanged |
EventCallback<ChangeEventArgs> | Fired when the element changes internally its text value. |
OnKeyDown |
EventCallback<KeyboardEventArgs> | Fired on the KeyDown event. |
OnKeyUp |
EventCallback<KeyboardEventArgs> | Fired on the KeyUp event. |
ReturnedItemsCountChanged |
EventCallback<int> | An event triggered when the number of items returned by the search query has changed. If the number is 0, MudAutocomplete.NoItemsTemplate will be shown. If the number is beyond MudAutocomplete.MaxItems, MudAutocomplete.MoreItemsTemplate will be shown. |
TextChanged |
EventCallback<string> | Fired when the text value changes. |
ValueChanged |
EventCallback<T> | Fired when the Value property changes. |
Methods
Name | Parameters | Return | Description |
---|---|---|---|
ValueTask BlurAsync() |
ValueTask |
Blur from the input in the Autocomplete component. | |
Task Clear() |
Task |
Clears the autocomplete's text | |
ValueTask FocusAsync() |
ValueTask |
Focus the input in the Autocomplete component. | |
ForceRender(bool forceTextUpdate) |
bool forceTextUpdate |
||
Task ForceUpdate() |
Task |
Sync the value, values and text, calls validation manually. Useful to call after user changes value or text programmatically. | |
string GetErrorText() |
string : Error text/message |
Return the validation error text or the conversion error message. | |
Task ResetAsync() |
Task |
Reset the value and the validation. | |
ResetValidation() |
Reset the validation. | ||
ValueTask ScrollToListItem(int index) |
int index : the index to scroll to |
ValueTask |
Scroll to a specific item index in the Autocomplete list of items. |
ValueTask SelectAsync() |
ValueTask |
Select all text within the Autocomplete input. | |
Task SelectOption(T value) |
T value |
Task |
|
ValueTask SelectRangeAsync(int pos1, int pos2) |
int pos1 int pos2 |
ValueTask |
Select all text within the Autocomplete input and aligns its start and end points to the text content of the current input. |
Task ToggleMenu() |
Task |
Toggle the menu (if not disabled or not readonly, and is opened). | |
Task Validate() |
Task |
Cause this component to validate its value. |