react-component/input

README

@rc-component/input

_{Part of the Ant Design ecosystem.}

📦 ⌨️ Low-level React input primitives for building polished text fields and textareas.

Highlights

Composable Input, TextArea, and BaseInput primitives.
Affix, addon, clear icon, prefix, suffix, and character count support.
Autosizing textarea with resize callbacks and imperative refs.
TypeScript definitions and semantic classNames / styles slots.
Used by Ant Design as the shared input foundation.

Install

npm install @rc-component/input

Usage

import Input from '@rc-component/input';

export default () => <Input allowClear placeholder="Type something" />;

import { TextArea } from '@rc-component/input';

export default () => <TextArea autoSize showCount maxLength={100} />;

Examples

Run the local dumi site:

npm install
npm start

Then open http://localhost:8000.

API

Input

Property	Type	Default	Description
addonAfter	`ReactNode`	-	Element displayed after the input.
addonBefore	`ReactNode`	-	Element displayed before the input.
allowClear	`boolean \| AllowClearConfig`	`false`	Show a clear button for the current value. Set `tabIndex: -1` to skip it during Tab navigation.
className	`string`	-	Class name for the input element.
classNames	`InputProps['classNames']`	-	Semantic class names for input slots.
count	`CountConfig`	-	Custom count strategy, limit, visibility, and exceed formatter.
defaultValue	`string \| number \| readonly string[] \| bigint`	-	Initial input value.
disabled	`boolean`	`false`	Disable the input.
htmlSize	`number`	-	Native input `size` attribute.
maxLength	`number`	-	Native input `maxLength` attribute.
prefix	`ReactNode`	-	Prefix content inside the input wrapper.
prefixCls	`string`	`rc-input`	Class name prefix.
showCount	`boolean \| { formatter: ShowCountFormatter }`	`false`	Show character count. Prefer `count.show` for new code.
styles	`InputProps['styles']`	-	Semantic styles for input slots.
suffix	`ReactNode`	-	Suffix content inside the input wrapper.
type	`InputProps['type']`	`text`	Native input type. Use `TextArea` for textarea behavior.
value	`string \| number \| readonly string[] \| bigint`	-	Controlled input value.
onChange	`React.ChangeEventHandler<HTMLInputElement>`	-	Triggered when the value changes.
onClear	`() => void`	-	Triggered when the clear button is clicked.
onPressEnter	`React.KeyboardEventHandler<HTMLInputElement>`	-	Triggered when Enter is pressed.

TextArea

Property	Type	Default	Description
allowClear	`boolean \| AllowClearConfig`	`false`	Show a clear button for the current value. Set `tabIndex: -1` to skip it during Tab navigation.
autoSize	`boolean \| { minRows?: number; maxRows?: number }`	`false`	Auto resize height by content.
className	`string`	-	Class name for the textarea.
classNames	`TextAreaProps['classNames']`	-	Semantic class names for textarea slots.
count	`CountConfig`	-	Custom count strategy, limit, visibility, and exceed formatter.
defaultValue	`string \| number \| readonly string[] \| bigint`	-	Initial textarea value.
maxLength	`number`	-	Native textarea `maxLength` attribute.
prefixCls	`string`	`rc-textarea`	Class name prefix.
showCount	`boolean \| { formatter: ShowCountFormatter }`	`false`	Show character count. Prefer `count.show` for new code.
style	`React.CSSProperties`	-	Inline styles for the textarea.
styles	`TextAreaProps['styles']`	-	Semantic styles for textarea slots.
suffix	`ReactNode`	-	Suffix content inside the textarea wrapper.
value	`string \| number \| readonly string[] \| bigint`	-	Controlled textarea value.
onChange	`React.ChangeEventHandler<HTMLTextAreaElement>`	-	Triggered when the value changes.
onClear	`() => void`	-	Triggered when the clear button is clicked.
onPressEnter	`React.KeyboardEventHandler<HTMLTextAreaElement>`	-	Triggered when Enter is pressed.
onResize	`(size: { width: number; height: number }) => void`	-	Triggered when textarea size changes.

Refs

import type { InputRef, TextAreaRef } from '@rc-component/input';

function focusInput(inputRef: InputRef | null) {
  inputRef?.focus();
}

function blurTextArea(textareaRef: TextAreaRef | null) {
  textareaRef?.blur();
}

Ref	Methods
`InputRef`	`focus(options)`, `blur()`, `select()`, `setSelectionRange()`, `input`, `nativeElement`
`TextAreaRef`	`focus()`, `blur()`, `resizableTextArea`, `nativeElement`

Development

npm install
npm start
npm test
npm run tsc
npm run compile
npm run build

The dumi site runs at http://localhost:8000 by default.

Release

npm run prepublishOnly

The release flow is handled by @rc-component/np through the rc-np command after the package build.

License

@rc-component/input is released under the MIT license.

Clear configuration

allowClear accepts a boolean or an AllowClearConfig object from @rc-component/util:

interface AllowClearConfig {
  clearIcon?: React.ReactNode;
  disabled?: boolean;
  tabIndex?: number;
  label?: string;
}

All fields are optional. disabled: true behaves like allowClear={false}: the clear button and space reserved solely for it are removed; the input remains editable. Existing suffixes and other content are preserved. This changes the previous hidden-button spacing behavior where applicable.

tabIndex affects only the clear button; -1 removes it from Tab navigation while retaining mouse activation. label supplies its accessible name through aria-label. Defaults, clear values, callbacks, and component state restrictions are unchanged.

When no other affix keeps the wrapper mounted, dynamically disabling clearing can recreate the input DOM node and lose focus or selection, just like switching to allowClear={false}. The value is preserved. With an existing suffix, the wrapper, focus, and selection remain stable.