输入框

单行文本输入，支持前后缀、清除和字数统计。需要标签、帮助或错误信息时，用「表单项」包裹。

交互预览

调整参数，体验与业务项目一致的输入框组件。

参数

placeholder: 占位文字，默认「请输入」; string
slim: 紧凑尺寸，高度 28px（默认 32px）; boolean
borderless: 无边框，使用填充底色; boolean
invalid: 错误态，红色边框和浅红底; boolean
disabled: 禁用; boolean
readOnly: 只读，去掉边框并使用灰底; boolean
clearButton: 有内容时显示清除按钮，点击清空并触发 onChange 与 onClear; boolean
showCount: 在右侧显示字数，配合 maxLength 显示上限; boolean
maxLength: 最大长度，超出部分在输入法上屏后截断; number
prefix: 前缀内容，输入框左侧内边距自动适配宽度; ReactNode
suffix: 后缀内容，输入框右侧内边距自动适配宽度; ReactNode
filter: 示例：只保留数字; 输入时先经过此函数过滤，再做 maxLength 截断并触发 onChange; (value: string) => string
onEnter: —; 按回车时触发，参数为当前输入值；中文输入法选词时的回车不会触发; (value: string) => void
onClear: —; 点击清除按钮后触发（onChange 也会收到空字符串）; () => void
className: —; 作用在外层容器上，不是 <input>；与 wrapperClassName 等价; string
wrapperClassName: —; 外层容器的类名，常用来控制宽度，如 w-full max-w-xs; string
inputClassName: —; <input> 元素本身的类名; string
unstyled: —; 去掉边框、背景等默认样式，只保留文字样式; boolean

常用状态

默认

已填写

错误

只读

禁用

无边框

扩展能力

SearchInput

showCount + maxLength

7/20

suffix

USD

slim

使用说明

基础用法

Demo.tsx

import { Input } from '@apeiron/ui';
import { useState } from 'react';

export function Demo() {
  const [value, setValue] = useState('');

  return <Input value={value} placeholder="请输入名称" onChange={(event) => setValue(event.target.value)} />;
}

清除、字数统计与回车

Demo.tsx

<Input
  clearButton
  showCount
  maxLength={20}
  onEnter={(value) => console.log('提交', value)}
/>

前缀与后缀

Demo.tsx

import { AtSign } from 'lucide-react';

<Input prefix={<AtSign size={16} />} placeholder="用户名" />
<Input defaultValue="100" suffix="USD" />

搜索框

SearchInput 自带搜索图标和清除按钮，也可以写作 Input.Search。

Demo.tsx

import { SearchInput } from '@apeiron/ui';

<SearchInput placeholder="搜索" wrapperClassName="w-full max-w-xs" />

状态

Demo.tsx

<Input invalid defaultValue="hello@" />
<Input readOnly defaultValue="只读内容" />
<Input disabled />

按钮

表单项