Input

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

Preview in Figma LLMs

Overview

Design

Code

Input and its compounds take the same props as Ant Design's, and the file is yours once it is installed. The kit adds a ref to each type and fills the clear button with your icon pack's close icon. Both are marked antuikit in the API tables below.

Install

npx antuikit@latest init

npx antuikit@latest add input

The first command sets up AntuikitProvider and the theme tokens. The second adds this component.

Import

Import from @/components/ui/input, not from antd. The path points at the file in your project.

import { Input } from "@/components/ui/input"

The axes

The props that take one of a fixed set of values. They match the properties in the Design tab.

variant takes outlined, filled, borderless and underlined, defaulting to outlined. It sets the field's fill and border.
status takes error and warning, and colors the border, prefix and suffix. Inside a Form, Form.Item sets it from validation.
size takes small, medium and large, defaulting to medium. middle is the old spelling and goes away in the next major version.

Set these once per form, not per field. A value that changes from one field to the next looks like a state.

Flags

Each of these turns one behavior on.

disabled takes the field out of the tab order. readOnly keeps the tab stop, and the value can be read, copied and submitted. Use it when the value is worth reading.
allowClear is not only a boolean: it also takes { clearIcon, disabled }. Without a clearIcon, the button uses your icon pack's close icon.
showCount is the shorthand for count.show. Reach for the full count when going over the limit should mark the field invalid instead of stopping the typing, or to count an emoji as one character.
autoFocus on page load moves the reader somewhere they did not ask to go. Use it for a field that appears after something they just did.

<Input /> // no clear button

<Input allowClear /> // your pack's close icon

<Input allowClear={{ clearIcon: <X /> }} /> // your own icon

Slots

The props that take a node.

prefix and suffix render inside the field's border, next to the text: a currency sign, a unit, a small icon.
addonBefore and addonAfter render outside it, in boxes of their own.
Both addon props are deprecated. Join a field with its neighbors in Space.Compact instead.
The suffix is shared. The clear button, the character count and the password eye render there too, so keep your own suffix to one node.

The compound parts

Four fields come with Input.

TextArea for an answer longer than a line, with its own autoSize and its own ref handle.
Password for a hidden value, with an eye button that shows it.
Search for an explicit search, with onSearch, loading and enterButton.
OTP for a short code, one cell per character, with length, mask, formatter and separator.

Each is also a named export, and both spellings are the same component.

import { Input, TextArea, Password, Search, OTP } from "@/components/ui/input"

<Input.TextArea autoSize={{ minRows: 3 }} />

<TextArea autoSize={{ minRows: 3 }} /> // the same component

Input.Group is not included, because it is deprecated. Use Space.Compact instead.

The ref types differ. Input, Password and Search give an InputRef (focus, blur, select, setSelectionRange). TextArea's ref has no select() and adds a resizableTextArea. OTP's has only focus, blur and nativeElement.

Events

Input takes the usual DOM events, like onChange, onFocus and onBlur, plus onPressEnter, which fires on Enter.

Search adds onSearch, which fires on Enter and on the button, with info.source saying which. A clear also fires it.
OTP's onChange fires once the whole code is entered, and onInput on each keystroke with the array of cells. Submit from onChange.