# antuikit / Input

> Input, with `text` and `bare` variants and the clear icon drawn from your icon pack.

Docs: https://antuikit.com/docs/components/input

## Install

npx antuikit@latest init
npx antuikit@latest add input

## Import

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

## Demos

- [Basic](https://ui.antuikit.com/embed/input/basic.md): A single-line text field for short values like a name, with a `placeholder` that hints at what to type.
- [Sizes](https://ui.antuikit.com/embed/input/sizes.md): Set `size` to `large` or `small` to change the field's height, with `medium` as the default in between.
- [Variants](https://ui.antuikit.com/embed/input/variants.md): Set `variant` to `outlined`, `filled`, `text`, `underlined`, `borderless` or `bare` to match the other fields in your form. `text` fills on hover and while focused, and `bare` draws nothing at all.
- [Status](https://ui.antuikit.com/embed/input/status.md): Set `status` to `warning` or `error` to color the border, and a `prefix` icon along with it.
- [Disabled](https://ui.antuikit.com/embed/input/disabled.md): Set `disabled` to show a value that cannot be edited or focused, like a workspace name only an admin can change.
- [Clear button](https://ui.antuikit.com/embed/input/allow-clear.md): Set `allowClear` on an `Input` or `Input.TextArea` to show a button that empties the field once it has a value.
- [Prefix and suffix](https://ui.antuikit.com/embed/input/prefix-suffix.md): Pass `prefix` and `suffix` to place an icon, text or a tooltip inside the field, like a search glyph or a $ sign.
- [Character count](https://ui.antuikit.com/embed/input/show-count.md): Set `showCount` with `maxLength` to show the character count against its limit, on an `Input` or an `Input.TextArea`.
- [Custom count](https://ui.antuikit.com/embed/input/count-strategy.md): Pass `count.strategy` to count characters your own way, like counting each emoji as one character.
- [Password](https://ui.antuikit.com/embed/input/password.md): `Input.Password` hides what is typed and adds an eye button that shows it.
- [Controlled visibility](https://ui.antuikit.com/embed/input/password-visibility.md): Pass `visibilityToggle` an object with `visible` and `onVisibleChange` to show the password from your own state, like a checkbox.
- [Search](https://ui.antuikit.com/embed/input/search.md): `Input.Search` adds a search button: set `enterButton` to make it primary or give it a label, and `loading` while results load.
- [Text area](https://ui.antuikit.com/embed/input/textarea.md): `Input.TextArea` takes several lines of text, with `rows` setting how tall it starts.
- [Auto size](https://ui.antuikit.com/embed/input/autosize.md): Set `autoSize` on `Input.TextArea` to grow it with its content, between `minRows` and `maxRows` when you set them.
- [One-time code](https://ui.antuikit.com/embed/input/otp.md): `Input.OTP` gives each character of a one-time code its own cell, set by `length`, and moves to the next cell as you type.
- [Masked code](https://ui.antuikit.com/embed/input/otp-mask.md): Set `mask` on `Input.OTP` to hide each character as it is typed, like the digits of a PIN.
- [Formatted code](https://ui.antuikit.com/embed/input/otp-format.md): Pass `formatter` to change what is typed and `separator` to draw a mark between cells, like uppercase letters split by a dash.
- [Compact group](https://ui.antuikit.com/embed/input/compact.md): Wrap an `Input` in `Space.Compact` to join it with a button or a `Select` into one control.
- [In a form](https://ui.antuikit.com/embed/input/in-form.md): Put an `Input` in a `Form.Item` with `rules` to validate it, with help text in `extra` and the error shown below the field.
- [Password strength](https://ui.antuikit.com/embed/input/password-strength.md): An `Input.Password` with a `Progress` bar and a checklist that fill in as the password meets each rule.
- [API key field](https://ui.antuikit.com/embed/input/api-key-field.md): An API key card with a masked, read-only `Input`, show and copy buttons in its `suffix`, and a confirm before regenerating.

## Rules

- antuikit components are COPIED into a project from a registry. There is no
  `antuikit` package to import components from at runtime.
- Import from `@/components/ui/input`, never from `antd`. antd stays for
  `theme`, `App`, the `message` / `notification` statics and type-only imports.
- Do not nest a bare `<ConfigProvider theme>` to re-theme a region. Use
  `<ThemeScope theme={...}>`, which also carries the cssVar key class that
  non-antd descendants inherit their tokens from.
- Colors, radii and spacing come from the token contract, not from hardcoded
  values: write `rounded-lg`, `px-xxs`, `bg-warning`, not the raw `var(--ant-*)`.
- `Input` takes every Ant Design v6 prop of the same component. The
  wrapper never narrows that surface, so anything antd documents also works here.