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
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 | -- |
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<KeyboardEventArgs> | -- |
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`) | String | -- |
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 | -- |
ShowCount | ParameterShow count of characters in the input | Boolean | -- |
Width | ParameterThe width of the input | String | -- |
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, the `large` size is used. Available: `large` `default` `small` | String | AntSizeLDSType.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 | -- |
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 |
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 | -- |
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<KeyboardEventArgs> | -- |
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`) | String | -- |
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 | -- |
ShowCount | ParameterShow count of characters in the input | Boolean | -- |
Width | ParameterThe width of the input | String | -- |
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, the `large` size is used. Available: `large` `default` `small` | String | AntSizeLDSType.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 | -- |
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<KeyboardEventArgs> | -- |
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`) | String | -- |
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 | -- |
ShowCount | ParameterShow count of characters in the input | Boolean | -- |
Width | ParameterThe width of the input | String | -- |
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, the `large` size is used. Available: `large` `default` `small` | String | AntSizeLDSType.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 | String | -- |
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 | -- |
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<KeyboardEventArgs> | -- |
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`) | String | -- |
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 | -- |
ShowCount | ParameterShow count of characters in the input | Boolean | -- |
Width | ParameterThe width of the input | String | -- |
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, the `large` size is used. Available: `large` `default` `small` | String | AntSizeLDSType.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. |