设计
设计指南
设计原则
样式指南
设计资源
Klein - Figma
Klein Font
官方图标库
开发
开发文档
React
Vue Web
敬请期待
开发资源
GitHub 代码仓库
生态产品
生态产品
Orion Fonts
敬请期待
Orio Market
敬请期待
Klein Pro
敬请期待
Klein Editor
敬请期待
输入框 Input
用户通过鼠标或键盘输入字符、需要用户输入表单域内容时。
基本用法
三种尺寸
5种内置宽度尺寸
复合型输入框
前缀和后缀
展示字数统计
一键清空
文本域
搜索框
输入框组合
Input Props
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| placeholder | 输入框占位文本 | string | - |
| defaultValue | 输入框默认内容 | any | - |
| value | 输入框内容 | any | - |
| disabled | 禁用状态控制 | boolean | false |
| type | text，textarea 和其他原生input的type值 | string | text |
| showCount | 显示输入字数 | boolean | - |
| maxLength | 最大输入长度 | number | - |
| chineseCalc | 是否开启中文字符数按比例计算 | boolean | false |
| proportion | 控制一个中文所占字符数 | number | 2 |
| prefix | 输入框前缀元素 | ReactNode | - |
| suffix | 输入框后缀元素 | ReactNode | - |
| addonBefore | 输入框前置复合元素 | ReactNode | - |
| addonAfter | 输入框后置复合元素 | ReactNode | - |
| wSize | 内置5种输入框宽度（分别对应96，200，304，408，512） | "xs" | - |
| size | 输入框大小 | "large" | - |
| className | 自定义className | string | - |
| bordered | 显示边框 | boolean | true |
| style | 自定义style | CSSProperties | - |
| onChange | 输入框内容变化时的回调 | ((e: ChangeEvent<HTMLInputElement>, len: number) => void) | - |
| onPressEnter | 按下回车时的回调 | ((event: KeyboardEvent<HTMLInputElement>) => void) | - |
Textarea Props
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| placeholder | 输入框占位文本 | string | - |
| defaultValue | 输入框默认内容 | string | - |
| chineseCalc | 是否开启中文字符数按比例计算 | boolean | - |
| proportion | 控制一个中文所占字符数 | number | 2 |
| value | 输入框内容 | any | - |
| disabled | 禁用状态控制 | boolean | false |
| showCount | 显示输入字数 | boolean | - |
| maxLength | 最大输入长度 | number | - |
| className | 自定义className | string | - |
| size | 内置三种宽度的textarea | "small" | - |
| style | 自定义style | CSSProperties | - |
| textareaStyle | 自定义textarea style | CSSProperties | - |
| onChange | 输入框内容变化时的回调 | ((e: ChangeEvent<HTMLTextAreaElement>, len: number) => void) | - |
| onPressEnter | 按下回车的回调 | ((event: KeyboardEvent<HTMLTextAreaElement>) => void) | - |
Search Props
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| loading | 搜索中 | boolean | - |
| enterButton | 自定义搜索按钮 | ReactNode | - |
| onSearch | 输入框内容变化时的回调 | ((value: string, event?: MouseEvent<HTMLElement, MouseEvent> | - |
| placeholder | 输入框占位文本 | string | - |
| defaultValue | 输入框默认内容 | any | - |
| value | 输入框内容 | any | - |
| disabled | 禁用状态控制 | boolean | - |
| type | text，textarea 和其他原生input的type值 | string | - |
| showCount | 显示输入字数 | boolean | - |
| maxLength | 最大输入长度 | number | - |
| prefix | 输入框前缀元素 | ReactNode | - |
| suffix | 输入框后缀元素 | ReactNode | - |
| addonBefore | 输入框前置复合元素 | ReactNode | - |
| addonAfter | 输入框后置复合元素 | ReactNode | - |
| wSize | 内置5种输入框宽度（分别对应96，200，304，408，512） | "xs" | - |
| size | 输入框大小 | "large" | - |
| className | 自定义className | string | - |
| bordered | 显示边框 | boolean | - |
| style | 自定义style | CSSProperties | - |
| onChange | 输入框内容变化时的回调 | ((event: ChangeEvent<HTMLInputElement>) => void) | - |
| onPressEnter | 按下回车时的回调 | ((event: KeyboardEvent<HTMLInputElement>) => void) | - |
Group Props
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| compact | 是否用紧凑模式 | boolean | false |
| size | Input.Group 中所有的 Input 的大小 | "large" | default |
| className | 自定义className | string | - |
| style | 自定义style | CSSProperties | - |
贡献者
