集成输入 UI 组件

一个简单的输入字段组件，提供一致的样式和行为，专为文本输入设计，并注重无障碍兼容性。

安装

你可以通过 Tiptap CLI 添加此基础组件

npx @tiptap/cli@latest add input

用法

import { Input, InputGroup } from '@/components/tiptap-ui-primitive/input'

export default function MyComponent() {
  const [value, setValue] = React.useState('')

  return (
    <div className="space-y-4">
      {/* 基础输入框 */}
      <Input
        type="text"
        value={value}
        onChange={(e) => setValue(e.target.value)}
        placeholder="请输入文本..."
      />

      {/* 带分组的输入框 */}
      <InputGroup>
        <Input type="email" placeholder="请输入邮箱..." />
      </InputGroup>

      {/* 不同类型的输入框 */}
      <Input type="password" placeholder="请输入密码..." />

      {/* 带限制样式的输入框 */}
      <Input
        type="text"
        placeholder="此文本将被限制显示..."
        className="tiptap-input-clamp"
      />
    </div>
  )
}

Previously下拉菜单

Next up标签