@rc-component/input
+
Part of the Ant Design ecosystem.
📦 ⌨️ Low-level React input primitives for building polished text fields and textareas.
+ +
+ 
+ 
+ 
+ 
+ 
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 -[](https://npmjs.org/package/@rc-component/input) +```bash +npm install @rc-component/input +``` ## Usage -```js +```tsx | pure import Input from '@rc-component/input'; -import { render } from 'react-dom'; -render(, mountNode); +export default () => ; ``` -```js +```tsx | pure import { TextArea } from '@rc-component/input'; -import { render } from 'react-dom'; -render(, mountNode); +export default () => ; ``` -## API +## Examples -| Property | Type | Default | Description | -| --------------------- | ------------------------------------------------------------------------------------------------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -| prefixCls | string | rc-input | | -| className | string | '' | additional class name of input | -| style | React.CSSProperties | | style properties of input | -| affixWrapperClassName | string | - | className with '@rc-component/input-affix-wrapper' | -| groupClassName | string | - | className with '@rc-component/input-group-wrapper' | -| wrapperClassName | string | - | className with '@rc-component/input-wrapper' | -| addonAfter | ReactNode | - | The label text displayed after (on the right side of) the input field | -| addonBefore | ReactNode | - | The label text displayed before (on the left side of) the input field | -| allowClear | boolean | { clearIcon: ReactNode } | false | If allow to remove input content with clear icon | -| bordered | boolean | true | Whether has border style | -| defaultValue | string | - | The initial input content | -| disabled | boolean | false | Whether the input is disabled | -| id | string | - | The ID for input | -| maxLength | number | - | The max length | -| showCount | boolean | { formatter: ({ value: string, count: number, maxLength?: number }) => ReactNode } | false | Whether show text count | -| prefix | ReactNode | - | The prefix icon for the Input | -| suffix | ReactNode | - | The suffix icon for the Input | -| type | string | `text` | The type of input, see: [MDN](https://developer.mozilla.org/docs/Web/HTML/Element/input#Form_%3Cinput%3E_types) (use the named `TextArea` export instead of `type="textarea"`) | -| value | string | - | The input content value | -| onChange | function(e) | - | Callback when user input | -| onPressEnter | function(e) | - | The callback function that is triggered when Enter key is pressed | - -## TextArea - -`rc-textarea` has been migrated into `@rc-component/input`. Use the named `TextArea` export for all textarea-related features. - -```js -import { TextArea } from '@rc-component/input'; +Run the local dumi site: -; -; +```bash +npm install +npm start ``` -| Property | Type | Default | Description | -| ------------ | --------------------------- | ----------- | ---------------------------------------------------------------------------------------------- | -| prefixCls | string | rc-textarea | | -| className | string | '' | additional class name of textarea | -| style | React.CSSProperties | - | style properties of textarea | -| autoSize | boolean \| object | - | Height autosize feature, can be set to `true\|false` or an object `{ minRows: 2, maxRows: 6 }` | -| allowClear | boolean \| { clearIcon } | false | If allow to remove textarea content with clear icon | -| showCount | boolean \| { formatter } | false | Whether show text count | -| count | CountConfig | - | Custom count strategy / max / exceed formatter | -| onPressEnter | function(e) | - | The callback function that is triggered when Enter key is pressed | -| onResize | function({ width, height }) | - | The callback function that is triggered when resize | - -## inputRef - -```tsx | pure -const inputRef = useRef(null); - -useEffect(() => { - inputRef.current.focus(); // the input will get focus - inputRef.current.blur(); // the input will lose focus - console.log(inputRef.current.input); // The origin input element -}, []); -// .... -; -``` +Then open `http://localhost:8000`. -| Property | Type | Description | -| -------- | --------------------------------------- | --------------------------------- | -| focus | `(options?: InputFocusOptions) => void` | The input get focus when called | -| blur | `() => void` | The input loses focus when called | -| input | `HTMLInputElement \| null` | The origin input element | +## API -## textareaRef +### Input + +| Property | Type | Default | Description | +| ------------ | ---------------------------------------------------------- | ---------- | --------------------------------------------------------------- | +| addonAfter | `ReactNode` | - | Element displayed after the input. | +| addonBefore | `ReactNode` | - | Element displayed before the input. | +| allowClear | `boolean \| { disabled?: boolean; clearIcon?: ReactNode }` | `false` | Show a clear button for the current value. | +| 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 Ant Design 生态的一部分。
📦 ⌨️ React 输入框基础组件，支持前后缀、清除按钮、计数和组合输入。
+ +
+
+
+
+
+
English | 简体中文
+ +## 特性 + +- 提供可组合的 `Input`、`TextArea` 和 `BaseInput` 基础组件。 +- 支持前后缀、附加内容、清除图标和字符计数。 +- `TextArea` 支持自适应高度、尺寸变化回调和命令式 ref。 +- 提供 TypeScript 类型定义和语义化 `classNames` / `styles` 插槽。 +- 被 Ant Design 用作共享的 input 基础能力。 + +## 安装 + +```bash +npm install @rc-component/input +``` + +## 使用 + +```tsx | pure +import Input from '@rc-component/input'; + +export default () => ; +``` + +```tsx | pure +import { TextArea } from '@rc-component/input'; + +export default () => ; +``` + +## 示例 + +运行本地 dumi 站点： + +```bash +npm install +npm start +``` + +然后打开 `http://localhost:8000`。 + +## API + +### Input + +| 参数 | 类型 | 默认值 | 说明 | +| ------------ | ---------------------------------------------------------- | ---------- | ---------------------------------------------------- | +| addonAfter | `ReactNode` | - | 输入后显示的元素。 | +| addonBefore | `ReactNode` | - | 输入之前显示的元素。 | +| allowClear | `boolean \| { disabled?: boolean; clearIcon?: ReactNode }` | `false` | 显示当前值的清除按钮。 | +| className | `string` | - | 输入元素的 className。 | +| classNames | `InputProps['classNames']` | - | 输入槽的语义 className。 | +| count | `CountConfig` | - | 自定义计数策略、限制、可见性和超出格式化程序。 | +| defaultValue | `string \| number \| readonly string[] \| bigint` | - | 初始输入值。 | +| disabled | `boolean` | `false` | 禁用输入。 | +| htmlSize | `number` | - | 原生 input `size` 属性。 | +| maxLength | `number` | - | 原生 input `maxLength` 属性。 | +| prefix | `ReactNode` | - | 输入包装器内的前缀内容。 | +| prefixCls | `string` | `rc-input` | className 前缀。 | +| showCount | `boolean \| { formatter: ShowCountFormatter }` | `false` | 显示字符数。新代码首选 `count.show`。 | +| styles | `InputProps['styles']` | - | 输入槽的语义样式。 | +| suffix | `ReactNode` | - | 输入包装器内的后缀内容。 | +| type | `InputProps['type']` | `text` | 原生 input 类型。需要文本域行为时请使用 `TextArea`。 | +| value | `string \| number \| readonly string[] \| bigint` | - | 受控输入值。 | +| onChange | `React.ChangeEventHandler