Ant Design Blazor
Input
A basic widget for getting the user input is a text field. Keyboard and mouse can be used for providing or changing data.
When To Use
- A user input in a form field is needed.
- A search input is required.
Examples
Basic usage example.
There are three sizes of an Input box: large (40px), default (32px) and small (24px).
Input.Group example Note: You don't need Col to control the width in the compact mode.
Search loading when onSearch.
Use the OnPressEnter event to implement the send shortcut key.
The PreventLineBreak() method can be used to choose whether to prevent line breaks after pressing the Enter key.
You can use the Input in conjunction with Tooltip component to create a Numeric Input, which can provide a good experience for extra-long content display.
Input type of password.
Show character counting.
No border.
Generic usage example.
Starting from 0.13.0, the input box value binding event defaults to 'onchange'. If you need to bind at input time, set 'BindOnInput'.
Note: When using input changes on the Server Side, there are binding delays and text rollback issues, you can try to address them by increasing the values of
DebounceMilliseconds. #579
Using pre & post tabs example.
Example of creating a search box by grouping a standard input with a search button.
For multi-line input.
Set AutoSize to true to enable autosizing. When MinRows or MaxRows is specified, AutoSize will be always true.
Add prefix or suffix icons inside input.
Input box with the remove icon, click the icon to delete everything. ShowClear can be used to override when the icon is shown.
Show character counting.
Focus with additional options
Input API#
| Property | Description | Type | Default Value |
|---|---|---|---|
| AddOnBefore | ParameterThe label text displayed before (on the left side of) the input field. | RenderFragment | -- |
| AddOnAfter | ParameterThe label text displayed after (on the right side of) the input field. | RenderFragment | -- |
| AllowClear | ParameterAllow to remove input content with clear icon | Boolean | -- |
| ShowClear | ParameterOverrides whether the clear icon is shown. When |
Boolean? | -- |
| OnClear | ParameterCallback when the content is cleared by clicking the "ClearIcon" | EventCallback | -- |
| AutoComplete | ParameterControls the autocomplete attribute of the input HTML element. Default = true | Boolean | -- |
| AutoFocus | ParameterAutofocus on the input or not | Boolean | false |
| Bordered | ParameterWhether has border style | Boolean | -- |
| BindOnInput | ParameterWhether to change value on input | Boolean | -- |
| DebounceMilliseconds | ParameterDelays the processing of the KeyUp event until the user has stopped typing for a predetermined amount of time. Default is 250 ms. | Int32 | -- |
| DefaultValue | ParameterThe initial input content | TValue | -- |
| Disabled | ParameterWhether the input is disabled. | Boolean | -- |
| InputElementSuffixClass | ParameterCss class that will be added to input element class as the last class entry. | String | -- |
| MaxLength | ParameterMax length | Int32 | -- |
| OnBlur | ParameterCallback when input looses focus | EventCallback<FocusEventArgs> | -- |
| OnChange | ParameterCallback when the content changes | EventCallback<TValue> | -- |
| OnFocus | ParameterCallback when input receives focus | EventCallback<FocusEventArgs> | -- |
| OnInput | ParameterCallback when value is inputed | EventCallback<ChangeEventArgs> | -- |
| OnKeyDown | ParameterCallback when a key is pressed | EventCallback<KeyboardEventArgs> | -- |
| OnKeyUp | ParameterCallback when a key is released | EventCallback<KeyboardEventArgs> | -- |
| OnMouseUp | ParameterCallback when a mouse button is released | EventCallback<MouseEventArgs> | -- |
| OnPressEnter | ParameterThe callback function that is triggered when Enter key is pressed | EventCallback<PressEnterEventArgs> | -- |
| Placeholder | ParameterProvide prompt information that describes the expected value of the input field | String | -- |
| Prefix | ParameterThe prefix icon for the Input. | RenderFragment | -- |
| ReadOnly | ParameterWhen present, it specifies that an input field is read-only. | Boolean | -- |
| StopPropagation | ParameterControls onclick and blur event propagation. | Boolean | -- |
| Suffix | ParameterThe suffix icon for the Input. | RenderFragment | -- |
| Type | ParameterThe type of input, see: MDN(use `Input.TextArea` instead of type=`textarea`) | InputType | -- |
| WrapperStyle | ParameterSet CSS style of wrapper. Is used when component has visible: Prefix/Suffix or has paramter set AntDesign.Input`1.AllowClear or for components: InputPassword and Search. In these cases, html span elements is used to wrap the html input element. AntDesign.Input`1.WrapperStyle is used on the span element. |
String | -- |
| WrapperClass | ParameterSet Class of wrapper. Is used when component has visible: Prefix/Suffix or has paramter set AntDesign.Input`1.AllowClear or for components: InputPassword and Search. In these cases, html span elements is used to wrap the html input element. AntDesign.Input`1.WrapperClass is used on the span element. |
String | -- |
| ShowCount | ParameterShow count of characters in the input | Boolean | -- |
| Width | ParameterThe width of the input | String | -- |
| DefaultToEmptyString | ParameterWhen true, value will be set to empty string. When false, value will be set to null when content is empty or whitespace. |
Boolean | false |
| ValidationMessages | Validation messages for the FormItem | String[] | -- |
| AdditionalAttributes | ParameterGets or sets a collection of additional attributes that will be applied to the created element. | IReadOnlyDictionary<String, Object> | -- |
| Value | ParameterGets or sets the value of the input. This should be used with two-way binding. | TValue | -- |
| ValueChanged | ParameterCallback that updates the bound value. | EventCallback<TValue> | -- |
| ValueExpression | ParameterAn expression that identifies the bound value. | Expression<Func<TValue>> | -- |
| ValuesExpression | ParameterAn expression that identifies the enumerable of bound values. | Expression<Func<IEnumerable<TValue>>> | -- |
| Size | ParameterThe size of the input box. Note: in the context of a form, `InputSize.Large` is used. Available: `InputSize.Large` `InputSize.Default` `InputSize.Small` | InputSize | InputSize.Default |
| CultureInfo | ParameterWhat Culture will be used when converting string to value and value to string Useful for InputNumber component. | CultureInfo | CultureInfo.CurrentCulture |
| Id | ParameterID for the component's HTML | String | Uniquely Generated ID |
| Class | ParameterSpecifies one or more class names for an DOM element. | String | -- |
| Style | ParameterSpecifies an inline style for a DOM element. | String | -- |
| RefBack | ParameterA ForwardRef instance. You can get a reference to the internal DOM by using AntDesign.ForwardRef.Current. |
ForwardRef | -- |
| Method Signature | Return Type | Description |
|---|---|---|
| Focus(FocusBehavior behavior, Boolean preventScroll) | Task | Focus behavior for input component with optional behaviors. |
| Blur() | Task | Removes focus from input element. |
TextArea API#
| Property | Description | Type | Default Value |
|---|---|---|---|
| AutoSize | ParameterWill adjust (grow or shrink) the TextArea according to content. Can work in connection with AntDesign.TextArea.MaxRows and AntDesign.TextArea.MinRows. Sets resize attribute of the textarea HTML element to: none. |
Boolean | -- |
| MaxRows | ParameterAllow growing, but stop when visible rows = MaxRows (will not grow further). | UInt32 | uint.MaxValue |
| MinRows | ParameterAllow shrinking, but stop when visible rows = MinRows (will not shrink further). | UInt32 | 1 |
| Rows | ParameterSets the height of the TextArea expressed in number of rows. | UInt32 | 3 |
| OnResize | ParameterCallback executed when the size changes | EventCallback<OnResizeEventArgs> | -- |
| Value | ParameterGets or sets the value of the TextArea. | String | -- |
| AddOnBefore | ParameterThe label text displayed before (on the left side of) the input field. | RenderFragment | -- |
| AddOnAfter | ParameterThe label text displayed after (on the right side of) the input field. | RenderFragment | -- |
| AllowClear | ParameterAllow to remove input content with clear icon | Boolean | -- |
| ShowClear | ParameterOverrides whether the clear icon is shown. When |
Boolean? | -- |
| OnClear | ParameterCallback when the content is cleared by clicking the "ClearIcon" | EventCallback | -- |
| AutoComplete | ParameterControls the autocomplete attribute of the input HTML element. Default = true | Boolean | -- |
| AutoFocus | ParameterAutofocus on the input or not | Boolean | false |
| Bordered | ParameterWhether has border style | Boolean | -- |
| BindOnInput | ParameterWhether to change value on input | Boolean | -- |
| DebounceMilliseconds | ParameterDelays the processing of the KeyUp event until the user has stopped typing for a predetermined amount of time. Default is 250 ms. | Int32 | -- |
| DefaultValue | ParameterThe initial input content | String | -- |
| Disabled | ParameterWhether the input is disabled. | Boolean | -- |
| InputElementSuffixClass | ParameterCss class that will be added to input element class as the last class entry. | String | -- |
| MaxLength | ParameterMax length | Int32 | -- |
| OnBlur | ParameterCallback when input looses focus | EventCallback<FocusEventArgs> | -- |
| OnChange | ParameterCallback when the content changes | EventCallback<String> | -- |
| OnFocus | ParameterCallback when input receives focus | EventCallback<FocusEventArgs> | -- |
| OnInput | ParameterCallback when value is inputed | EventCallback<ChangeEventArgs> | -- |
| OnKeyDown | ParameterCallback when a key is pressed | EventCallback<KeyboardEventArgs> | -- |
| OnKeyUp | ParameterCallback when a key is released | EventCallback<KeyboardEventArgs> | -- |
| OnMouseUp | ParameterCallback when a mouse button is released | EventCallback<MouseEventArgs> | -- |
| OnPressEnter | ParameterThe callback function that is triggered when Enter key is pressed | EventCallback<PressEnterEventArgs> | -- |
| Placeholder | ParameterProvide prompt information that describes the expected value of the input field | String | -- |
| Prefix | ParameterThe prefix icon for the Input. | RenderFragment | -- |
| ReadOnly | ParameterWhen present, it specifies that an input field is read-only. | Boolean | -- |
| StopPropagation | ParameterControls onclick and blur event propagation. | Boolean | -- |
| Suffix | ParameterThe suffix icon for the Input. | RenderFragment | -- |
| Type | ParameterThe type of input, see: MDN(use `Input.TextArea` instead of type=`textarea`) | InputType | -- |
| WrapperStyle | ParameterSet CSS style of wrapper. Is used when component has visible: Prefix/Suffix or has paramter set AntDesign.Input`1.AllowClear or for components: InputPassword and Search. In these cases, html span elements is used to wrap the html input element. AntDesign.Input`1.WrapperStyle is used on the span element. |
String | -- |
| WrapperClass | ParameterSet Class of wrapper. Is used when component has visible: Prefix/Suffix or has paramter set AntDesign.Input`1.AllowClear or for components: InputPassword and Search. In these cases, html span elements is used to wrap the html input element. AntDesign.Input`1.WrapperClass is used on the span element. |
String | -- |
| ShowCount | ParameterShow count of characters in the input | Boolean | -- |
| Width | ParameterThe width of the input | String | -- |
| DefaultToEmptyString | ParameterWhen true, value will be set to empty string. When false, value will be set to null when content is empty or whitespace. |
Boolean | false |
| ValidationMessages | Validation messages for the FormItem | String[] | -- |
| AdditionalAttributes | ParameterGets or sets a collection of additional attributes that will be applied to the created element. | IReadOnlyDictionary<String, Object> | -- |
| ValueChanged | ParameterCallback that updates the bound value. | EventCallback<String> | -- |
| ValueExpression | ParameterAn expression that identifies the bound value. | Expression<Func<String>> | -- |
| ValuesExpression | ParameterAn expression that identifies the enumerable of bound values. | Expression<Func<IEnumerable<String>>> | -- |
| Size | ParameterThe size of the input box. Note: in the context of a form, `InputSize.Large` is used. Available: `InputSize.Large` `InputSize.Default` `InputSize.Small` | InputSize | InputSize.Default |
| CultureInfo | ParameterWhat Culture will be used when converting string to value and value to string Useful for InputNumber component. | CultureInfo | CultureInfo.CurrentCulture |
| Id | ParameterID for the component's HTML | String | Uniquely Generated ID |
| Class | ParameterSpecifies one or more class names for an DOM element. | String | -- |
| Style | ParameterSpecifies an inline style for a DOM element. | String | -- |
| RefBack | ParameterA ForwardRef instance. You can get a reference to the internal DOM by using AntDesign.ForwardRef.Current. |
ForwardRef | -- |
| Method Signature | Return Type | Description |
|---|---|---|
| ChangeSizeAsyncJs(Single width, Single height) | void | |
| Focus(FocusBehavior behavior, Boolean preventScroll) | Task | Focus behavior for input component with optional behaviors. |
| Blur() | Task | Removes focus from input element. |
Search API#
| Property | Description | Type | Default Value |
|---|---|---|---|
| ClassicSearchIcon | ParameterSearch input is rendered with suffix search icon, not as a button. Will be ignored when AntDesign.Search.EnterButton != false |
Boolean | -- |
| EnterButton | ParameterWhether to show an enter button after input. This property conflicts with the AntDesign.Input`1.AddOnAfter |
OneOf<Boolean, String> | -- |
| Loading | ParameterSearch box with loading | Boolean | -- |
| OnSearch | ParameterCallback executed when you click on the search-icon, the clear-icon or press the Enter key | EventCallback<String> | -- |
| AddOnBefore | ParameterThe label text displayed before (on the left side of) the input field. | RenderFragment | -- |
| AddOnAfter | ParameterThe label text displayed after (on the right side of) the input field. | RenderFragment | -- |
| AllowClear | ParameterAllow to remove input content with clear icon | Boolean | -- |
| ShowClear | ParameterOverrides whether the clear icon is shown. When |
Boolean? | -- |
| OnClear | ParameterCallback when the content is cleared by clicking the "ClearIcon" | EventCallback | -- |
| AutoComplete | ParameterControls the autocomplete attribute of the input HTML element. Default = true | Boolean | -- |
| AutoFocus | ParameterAutofocus on the input or not | Boolean | false |
| Bordered | ParameterWhether has border style | Boolean | -- |
| BindOnInput | ParameterWhether to change value on input | Boolean | -- |
| DebounceMilliseconds | ParameterDelays the processing of the KeyUp event until the user has stopped typing for a predetermined amount of time. Default is 250 ms. | Int32 | -- |
| DefaultValue | ParameterThe initial input content | String | -- |
| Disabled | ParameterWhether the input is disabled. | Boolean | -- |
| InputElementSuffixClass | ParameterCss class that will be added to input element class as the last class entry. | String | -- |
| MaxLength | ParameterMax length | Int32 | -- |
| OnBlur | ParameterCallback when input looses focus | EventCallback<FocusEventArgs> | -- |
| OnChange | ParameterCallback when the content changes | EventCallback<String> | -- |
| OnFocus | ParameterCallback when input receives focus | EventCallback<FocusEventArgs> | -- |
| OnInput | ParameterCallback when value is inputed | EventCallback<ChangeEventArgs> | -- |
| OnKeyDown | ParameterCallback when a key is pressed | EventCallback<KeyboardEventArgs> | -- |
| OnKeyUp | ParameterCallback when a key is released | EventCallback<KeyboardEventArgs> | -- |
| OnMouseUp | ParameterCallback when a mouse button is released | EventCallback<MouseEventArgs> | -- |
| OnPressEnter | ParameterThe callback function that is triggered when Enter key is pressed | EventCallback<PressEnterEventArgs> | -- |
| Placeholder | ParameterProvide prompt information that describes the expected value of the input field | String | -- |
| Prefix | ParameterThe prefix icon for the Input. | RenderFragment | -- |
| ReadOnly | ParameterWhen present, it specifies that an input field is read-only. | Boolean | -- |
| StopPropagation | ParameterControls onclick and blur event propagation. | Boolean | -- |
| Suffix | ParameterThe suffix icon for the Input. | RenderFragment | -- |
| Type | ParameterThe type of input, see: MDN(use `Input.TextArea` instead of type=`textarea`) | InputType | -- |
| WrapperStyle | ParameterSet CSS style of wrapper. Is used when component has visible: Prefix/Suffix or has paramter set AntDesign.Input`1.AllowClear or for components: InputPassword and Search. In these cases, html span elements is used to wrap the html input element. AntDesign.Input`1.WrapperStyle is used on the span element. |
String | -- |
| WrapperClass | ParameterSet Class of wrapper. Is used when component has visible: Prefix/Suffix or has paramter set AntDesign.Input`1.AllowClear or for components: InputPassword and Search. In these cases, html span elements is used to wrap the html input element. AntDesign.Input`1.WrapperClass is used on the span element. |
String | -- |
| ShowCount | ParameterShow count of characters in the input | Boolean | -- |
| Width | ParameterThe width of the input | String | -- |
| DefaultToEmptyString | ParameterWhen true, value will be set to empty string. When false, value will be set to null when content is empty or whitespace. |
Boolean | false |
| ValidationMessages | Validation messages for the FormItem | String[] | -- |
| AdditionalAttributes | ParameterGets or sets a collection of additional attributes that will be applied to the created element. | IReadOnlyDictionary<String, Object> | -- |
| Value | ParameterGets or sets the value of the input. This should be used with two-way binding. | String | -- |
| ValueChanged | ParameterCallback that updates the bound value. | EventCallback<String> | -- |
| ValueExpression | ParameterAn expression that identifies the bound value. | Expression<Func<String>> | -- |
| ValuesExpression | ParameterAn expression that identifies the enumerable of bound values. | Expression<Func<IEnumerable<String>>> | -- |
| Size | ParameterThe size of the input box. Note: in the context of a form, `InputSize.Large` is used. Available: `InputSize.Large` `InputSize.Default` `InputSize.Small` | InputSize | InputSize.Default |
| CultureInfo | ParameterWhat Culture will be used when converting string to value and value to string Useful for InputNumber component. | CultureInfo | CultureInfo.CurrentCulture |
| Id | ParameterID for the component's HTML | String | Uniquely Generated ID |
| Class | ParameterSpecifies one or more class names for an DOM element. | String | -- |
| Style | ParameterSpecifies an inline style for a DOM element. | String | -- |
| RefBack | ParameterA ForwardRef instance. You can get a reference to the internal DOM by using AntDesign.ForwardRef.Current. |
ForwardRef | -- |
| Method Signature | Return Type | Description |
|---|---|---|
| Focus(FocusBehavior behavior, Boolean preventScroll) | Task | Focus behavior for input component with optional behaviors. |
| Blur() | Task | Removes focus from input element. |
InputGroup API#
| Property | Description | Type | Default Value |
|---|---|---|---|
| ChildContent | ParameterContent wrapped by InputGroup. | RenderFragment | -- |
| Compact | ParameterWhether to use compact style or not | Boolean | false |
| Size | ParameterThe size of InputGroup specifies the size of the included Input fields. Available: large default small | InputSize | -- |
| Id | ParameterID for the component's HTML | String | Uniquely Generated ID |
| Class | ParameterSpecifies one or more class names for an DOM element. | String | -- |
| Style | ParameterSpecifies an inline style for a DOM element. | String | -- |
| RefBack | ParameterA ForwardRef instance. You can get a reference to the internal DOM by using AntDesign.ForwardRef.Current. |
ForwardRef | -- |
InputPassword API#
| Property | Description | Type | Default Value |
|---|---|---|---|
| IconRender | ParameterCustom icon render | RenderFragment | -- |
| ShowPassword | ParameterWhether to show password or not | Boolean | false |
| VisibilityToggle | ParameterWhether to show password visibility toggle button or not | Boolean | true |
| AddOnBefore | ParameterThe label text displayed before (on the left side of) the input field. | RenderFragment | -- |
| AddOnAfter | ParameterThe label text displayed after (on the right side of) the input field. | RenderFragment | -- |
| AllowClear | ParameterAllow to remove input content with clear icon | Boolean | -- |
| ShowClear | ParameterOverrides whether the clear icon is shown. When |
Boolean? | -- |
| OnClear | ParameterCallback when the content is cleared by clicking the "ClearIcon" | EventCallback | -- |
| AutoComplete | ParameterControls the autocomplete attribute of the input HTML element. Default = true | Boolean | -- |
| AutoFocus | ParameterAutofocus on the input or not | Boolean | false |
| Bordered | ParameterWhether has border style | Boolean | -- |
| BindOnInput | ParameterWhether to change value on input | Boolean | -- |
| DebounceMilliseconds | ParameterDelays the processing of the KeyUp event until the user has stopped typing for a predetermined amount of time. Default is 250 ms. | Int32 | -- |
| DefaultValue | ParameterThe initial input content | String | -- |
| Disabled | ParameterWhether the input is disabled. | Boolean | -- |
| InputElementSuffixClass | ParameterCss class that will be added to input element class as the last class entry. | String | -- |
| MaxLength | ParameterMax length | Int32 | -- |
| OnBlur | ParameterCallback when input looses focus | EventCallback<FocusEventArgs> | -- |
| OnChange | ParameterCallback when the content changes | EventCallback<String> | -- |
| OnFocus | ParameterCallback when input receives focus | EventCallback<FocusEventArgs> | -- |
| OnInput | ParameterCallback when value is inputed | EventCallback<ChangeEventArgs> | -- |
| OnKeyDown | ParameterCallback when a key is pressed | EventCallback<KeyboardEventArgs> | -- |
| OnKeyUp | ParameterCallback when a key is released | EventCallback<KeyboardEventArgs> | -- |
| OnMouseUp | ParameterCallback when a mouse button is released | EventCallback<MouseEventArgs> | -- |
| OnPressEnter | ParameterThe callback function that is triggered when Enter key is pressed | EventCallback<PressEnterEventArgs> | -- |
| Placeholder | ParameterProvide prompt information that describes the expected value of the input field | String | -- |
| Prefix | ParameterThe prefix icon for the Input. | RenderFragment | -- |
| ReadOnly | ParameterWhen present, it specifies that an input field is read-only. | Boolean | -- |
| StopPropagation | ParameterControls onclick and blur event propagation. | Boolean | -- |
| Suffix | ParameterThe suffix icon for the Input. | RenderFragment | -- |
| Type | ParameterThe type of input, see: MDN(use `Input.TextArea` instead of type=`textarea`) | InputType | -- |
| WrapperStyle | ParameterSet CSS style of wrapper. Is used when component has visible: Prefix/Suffix or has paramter set AntDesign.Input`1.AllowClear or for components: InputPassword and Search. In these cases, html span elements is used to wrap the html input element. AntDesign.Input`1.WrapperStyle is used on the span element. |
String | -- |
| WrapperClass | ParameterSet Class of wrapper. Is used when component has visible: Prefix/Suffix or has paramter set AntDesign.Input`1.AllowClear or for components: InputPassword and Search. In these cases, html span elements is used to wrap the html input element. AntDesign.Input`1.WrapperClass is used on the span element. |
String | -- |
| ShowCount | ParameterShow count of characters in the input | Boolean | -- |
| Width | ParameterThe width of the input | String | -- |
| DefaultToEmptyString | ParameterWhen true, value will be set to empty string. When false, value will be set to null when content is empty or whitespace. |
Boolean | false |
| ValidationMessages | Validation messages for the FormItem | String[] | -- |
| AdditionalAttributes | ParameterGets or sets a collection of additional attributes that will be applied to the created element. | IReadOnlyDictionary<String, Object> | -- |
| Value | ParameterGets or sets the value of the input. This should be used with two-way binding. | String | -- |
| ValueChanged | ParameterCallback that updates the bound value. | EventCallback<String> | -- |
| ValueExpression | ParameterAn expression that identifies the bound value. | Expression<Func<String>> | -- |
| ValuesExpression | ParameterAn expression that identifies the enumerable of bound values. | Expression<Func<IEnumerable<String>>> | -- |
| Size | ParameterThe size of the input box. Note: in the context of a form, `InputSize.Large` is used. Available: `InputSize.Large` `InputSize.Default` `InputSize.Small` | InputSize | InputSize.Default |
| CultureInfo | ParameterWhat Culture will be used when converting string to value and value to string Useful for InputNumber component. | CultureInfo | CultureInfo.CurrentCulture |
| Id | ParameterID for the component's HTML | String | Uniquely Generated ID |
| Class | ParameterSpecifies one or more class names for an DOM element. | String | -- |
| Style | ParameterSpecifies an inline style for a DOM element. | String | -- |
| RefBack | ParameterA ForwardRef instance. You can get a reference to the internal DOM by using AntDesign.ForwardRef.Current. |
ForwardRef | -- |
| Method Signature | Return Type | Description |
|---|---|---|
| Focus(FocusBehavior behavior, Boolean preventScroll) | Task | Focus behavior for InputPassword component with optional behaviors. Special behavior required for wasm. |
| Blur() | Task | Removes focus from input element. |