React Component Input

1.8.0 · active · verified Sun Apr 19

rc-input is a foundational, unstyled React input component, designed to be highly customizable and often used as a building block for UI libraries like Ant Design. It provides core input functionalities, including features like clearable input. The current stable version is 1.8.0. It receives regular maintenance updates, though a strict release cadence isn't published. A key differentiator is its low-level nature, focusing purely on input logic without opinionated styling, making it highly adaptable. It provides full TypeScript support and manages common input behaviors such as value synchronization and focus handling. The package has a somewhat convoluted naming history, which developers should be aware of.

Common errors

```
Module not found: Can't resolve '@rc-component/input'
```
cause Attempting to import from `@rc-component/input` when the actively maintained and installed package is `rc-input`.

fix Change your import statements from `import ... from '@rc-component/input'` to `import ... from 'rc-input'`.
```
TypeError: (0, _rc_input.default) is not a function
```
cause Attempting to use `require('rc-input')` directly as a function in CommonJS, when `rc-input` exports its main component as a default export.

fix Access the default export correctly: `const Input = require('rc-input').default;`
```
TypeError: Cannot read properties of undefined (reading 'TextArea')
```
cause Attempting to use `Input.TextArea` without `Input` being correctly imported or when the installed version of `rc-input` does not expose `TextArea` in this manner.

fix Ensure `import Input from 'rc-input';` is correctly placed and that your `rc-input` version supports the `Input.TextArea` static component. If it doesn't, you might need to use a separate `rc-textarea` package or upgrade `rc-input`.

Warnings

breaking The package underwent a confusing naming change attempt. At one point, the project intended to rename from `rc-input` to `@rc-component/input`. While a separate `@rc-component/input` package exists with its own `1.x` release line, the original `rc-input` package has continued independent development and is now at a higher version (e.g., 1.8.0 vs. 1.3.0 for `@rc-component/input`). Developers should strictly use `rc-input` for the actively maintained version.
Fix: Ensure you `npm install rc-input` and update all `import` or `require` statements to reference `rc-input` instead of `@rc-component/input`.
breaking Textarea functionality, previously potentially handled by a separate `rc-textarea` package or distinct component, was merged into `rc-input` (noted in `@rc-component/input@1.3.0`, which should apply to the `rc-input` line as well). This change consolidates input and textarea logic. Users of `rc-textarea` or specific textarea APIs should review the `rc-input` documentation for the new recommended way to implement text areas.
Fix: Migrate usage from `rc-textarea` or old textarea patterns to use `Input.TextArea` or equivalent functionality exposed by `rc-input`.
gotcha The README contains incorrect NPM links pointing to `rc-select` instead of `rc-input` for bundle size and download stats. This is a documentation error and does not affect package functionality, but can be misleading when checking package popularity or size.
Fix: Always verify package details directly on npmjs.com/package/rc-input for accurate information.

Install

npm install rc-input npm
yarn add rc-input yarn
pnpm add rc-input pnpm

Imports

Input
wrong:
```
import { Input } from 'rc-input';
```
correct:
```
import Input from 'rc-input';
```
The primary Input component is exported as a default export.
Input.TextArea
wrong:
```
import { TextArea } from 'rc-input';
```
correct:
```
import Input from 'rc-input';
// ...
<Input.TextArea />
```
Following a refactor, textarea functionality is often accessed via a static property on the default Input component, not as a separate named export.
CommonJS require
wrong:
```
const Input = require('rc-input');
```
correct:
```
const Input = require('rc-input').default;
```
For CommonJS environments, the default export is accessed via the `.default` property.

Quickstart

This example demonstrates basic usage of the Input component, including a clearable input, a textarea, and a readonly input.

import Input from 'rc-input';
import { createRoot } from 'react-dom/client';

const App = () => (
  <div>
    <Input placeholder="Basic input" allowClear />
    <br />
    <Input.TextArea placeholder="Textarea input" rows={4} />
    <br />
    <Input value="Readonly input" readOnly />
  </div>
);

const mountNode = document.getElementById('root');
if (mountNode) {
  const root = createRoot(mountNode);
  root.render(<App />);
} else {
  console.error('Mount node not found!');
}

view raw JSON →