@rc-component/input

@rc-component/input

_{Part of the Ant Design ecosystem.}

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

English | 简体中文

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.

Similar packages

Other packages similar to @rc-component/input

react-number-format

Provides React input components for formatted numeric values, such as currency and percentages. It is more specialized in number formatting, while @rc-component/input is a general-purpose input building block.

react-input-mask

Adds input masks for formats such as phone numbers and dates. It focuses on constraining input patterns rather than providing a broad set of input adornments and variants.

@mui/material

A full React component library whose TextField and Input components offer input controls with labels, validation states, and theming. It is a much broader, styled UI system; @rc-component/input is a more focused, lower-level input package.

react-textarea-autosize

Provides a textarea that grows automatically with its content. It focuses on autosizing multiline input, whereas @rc-component/input covers several input types and supporting controls.