logo

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

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

expand code expand code

There are three sizes of an Input box: large (40px), default (32px) and small (24px).

expand code expand code

Input.Group example Note: You don't need Col to control the width in the compact mode.

expand code expand code

Search loading when onSearch.

expand code expand code

Set AutoSize to true to enable autosizing. When MinRows or MaxRows is specified, AutoSize will be always true.

expand code expand code

Add prefix or suffix icons inside input.

expand code expand code

Input box with the remove icon, click the icon to delete everything.

expand code expand code

Show character counting.

expand code expand code

Focus with additional options

expand code expand code

Basic usage example.

expand code expand code

Using pre & post tabs example.

expand code expand code

For multi-line input.

expand code expand code

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.

expand code expand code

Input type of password.

expand code expand code

Show character counting.

expand code expand code

No border.

expand code expand code

Generic usage example.

expand code expand code

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.
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.
Form InputNumber
文档已更新,请点击 此处 更新。
A new version of this app is available. Click here to update.