Go to AntUIKit homepage

Input

A field for one line of text, with text area, password, search and one-time code fields alongside it.

Preview in FigmaLLMs

Usage

When to reach for Input, what each of its axes is for, and the decisions it leaves to you.

When to use

Input is one line of free text: a name, a subject, a URL, a coupon code. When the possible answers are known in advance, a narrower control says more and validates for you.
  • A number goes in InputNumber. It has steppers, a min and max, and keeps the value a number instead of a string.
  • A value from a known set goes in Select, or AutoComplete when the list is long and the reader may still type something new.
  • A mention goes in Mentions. Typing @ or # in a plain Input opens no list.
  • More than a line goes in Input.TextArea. A single-line field scrolls sideways, so the reader cannot see the first sentence while writing the third.
Make the field about as wide as the answer it expects. A two-letter country code in a full-width field looks like a question you got wrong.

Variant

variant takes outlined (the default), filled, borderless or underlined.
  • outlined suits most forms. The border shows where to type before the reader focuses anything.
  • filled suits a field on a surface that already has a border, like a card or a table cell. Check it there: a filled field on a filled card can disappear into it.
  • borderless only where the layout draws the edge, like an inline edit of a value that also shows as text. It is the hardest of the four to find.
  • underlined suits dense forms where a box per field would outweigh the labels. Use it for a whole form, not one field.
Use one variant per form. Mixed variants look like different states, which is what status and disabled are for.

Size

size takes small, medium (the default) or large. middle is the old spelling of medium and goes away in the next major version, so write medium.
  • small in toolbars, table filter rows and next to other small controls.
  • medium for forms.
  • large when the field is the main thing on the screen, like a search box on an empty page or the only field in a sign-in card.
Set the size once, on the form or on ConfigProvider, so no field ends up one step bigger than its neighbors by accident.

Prefix, suffix and joined fields

prefix and suffix go inside the field's border, next to the text. Use them for things the reader sees as part of the value: a currency sign, a unit, a search icon.
  • For a separate control or label beside the field (a protocol select, a .com, a button), wrap the pieces in Space.Compact.
  • addonBefore and addonAfter still work but are deprecated. Use Space.Compact in new code.
  • Keep the suffix uncrowded. allowClear, the character count and the password eye all render there too, and three icons in one corner are hard to hit.

Clearing the value

allowClear adds a button in the suffix that empties the field. It only shows when there is a value, and not on a disabled or read-only field.
  • Use it on fields that get retyped often, like a search box or a filter. On a field filled in once, it is one more way to lose an answer.
  • The button uses your icon pack's close icon. Pass allowClear={{ clearIcon }} to use your own.
  • Clearing cannot be undone. Where the value took effort to enter, leave it out.

Counting and limiting

There are two ways to limit a field, and they differ when the reader goes past the limit.
  • maxLength stops typing at the limit and cuts a paste short without saying so. Use it for a hard technical limit.
  • count.max lets the value run over and marks the field as invalid. Use it for “keep it under 120 characters”, so the reader can see what to cut.
  • count.strategy decides what counts as a character. By default an emoji counts as two. Pass a function built on Intl.Segmenter to count it as one.
  • showCount is the short form of count.show, which also takes a function to format the count. Style it through the count key of classNames.
Show a count only where the limit is close enough to matter. A counter on every field teaches the reader to ignore counters.

Status

status takes error or warning and colors the border and the prefix and suffix. It says something about the value, where variant is about the look.
  • Inside a Form, do not set it yourself. Form.Item sets it from validation.
  • Outside a Form, show a message beside it. A red border says something is wrong, and only words say what.
  • Set it once the reader has finished answering, not while they type.
  • warning is for an answer you accept but that is probably a mistake. If it blocks submission, it is an error.

TextArea, Password, Search and OTP

Input.TextArea, Input.Password, Input.Search and Input.OTP come with Input. Each is also a named export.
  • Password hides the value and adds an eye button in the suffix. visibilityToggle={false} removes the button, and action="hover" shows the password on hover instead of on click.
  • Search adds onSearch, which fires on Enter and on the button, and loading for the wait. Use it when searching is a separate step. A field that filters as you type needs no button.
  • enterButton with text replaces the icon. enterButton alone shows a primary button with the search icon. Given a label, the button shows only the label.
  • OTP gives each character of a short code its own cell. length sets how many, mask takes true or a character to show, formatter runs on each keystroke, and separator is a node or a function of the cell index.
  • Submit an OTP from onChange. onChange fires once the whole code is entered. onInput fires on every keystroke with the array of cells.
  • The refs differ. Input, Password and Search give an InputRef (focus, blur, select, setSelectionRange). TextArea's ref has no select() and adds resizableTextArea. OTP's has only focus, blur and nativeElement.
  • The Search spinner is Ant Design's. To use your pack's, pass enterButton a Button imported from antd with loading={{ icon }}, and set its color and variant again. The kit's Button ends up nested in a second button there.

Placeholder and label

A placeholder disappears as soon as the reader types. Anything they need after that belongs in a label or in help text.
  • The label says what the field is. It stays visible, outside the field, for when the reader comes back to check an answer.
  • The placeholder shows a sample answer, like jane@example.com under an Email label, not “Email” or “Enter your email”.
  • Rules and formats go under the field, in Form.Item's extra, where they stay while the reader types.
  • Leave the placeholder out instead of repeating the label in it.
ImageInputNumber
© 2026 AntUIKit . All rights reserved.