组件分类 · 输入
输入框与表单组件
搜索框、AI 对话输入框、表单字段、文件上传和验证码输入。每个都处理好了聚焦、键盘和状态反馈。
共 12 个 · 更新于
适合用在哪里
搜索框、AI 对话输入框、表单字段、文件上传和验证码等用户输入的地方。
怎么用
- 打开任意一个组件，看实时预览，切换深色 / 浅色背景。
- 点「复制提示词」，粘贴到 Claude Code、Cursor、Codex 或 Trae；模型会读你的项目，把组件改写成你的框架，并把颜色、字体接到你的设计变量。
- 或者在终端用 8pt CLI 装进项目，也可以在已接入 8pt MCP 的编辑器里直接说需求。
npm i -g @8pt-dev/cli 8pt login 8pt search "输入框与表单" 8pt add search-suggest-panel
全部 12 个输入框与表单组件
- Search Suggest Panel 搜索联想面板
白色圆角站内搜索面板：输入框带清除按钮，下方热门词胶囊一键填入，结果列表按关键字实时过滤并高亮命中文字，支持上下方向键选择，没有结果时给出提示。
- Split Enquiry Form 分栏需求表单
左右分栏的合作询问区：左侧等宽小标签加一段粗体宣言与几颗缓慢浮动的渲染球，右侧浅灰底的姓名、邮箱、留言三个输入框和通栏提交按钮；聚焦时出现细描边，悬停按钮变荧光黄，提交后就地给出示意回执。
- Inline Shortcut Typer 行内短语展开
邮件编辑器里的快捷短语演示：输入分号加短语名，弹出替换提示并自动展开成完整段落；顶部可切换谢谢、签名、会议三个短语，打字光标循环播放，也可点选手动触发。
- Idea Search Marquee 点子搜索跑马灯
胶囊搜索框配一组快捷词标签，下方是两端渐隐的应用卡片跑马灯，悬停暂停；点击标签会填入搜索框，并高亮同类卡片、淡化其余卡片。适合工具站首页的“先试一下”区块。
- Project Brief Form 项目需求表单
深色面板里的项目询价表单：需求类型与预算用单选胶囊切换，称呼、邮箱和描述输入框聚焦时亮起暖色描边；发送后表单清空，顶部滑出收到提示。不会真的提交。
- AI Prompt Composer AI 创作输入框
AI 生成平台首屏的创作输入框：视频 / 图片 / 智能体三种模式，滑块跟着切换；提示词像打字一样轮播，首帧尾帧槽位、模型和参数胶囊随模式变化，输入内容后发送键亮起；下方快捷标签一点就填好提示词。
- AI Prompt Input AI 指令输入框
自动增高的指令输入框，带模型切换、附件按钮和发送态。占位文字循环示意可做的事。
- Glowing Search Bar 流光搜索框
旋转的锥形渐变只露出 1.5 像素描边，聚焦时外发光增强，带 ⌘K 快捷键。
- Command Palette 命令面板
内联命令面板：输入即过滤，方向键移动高亮条，回车执行。高亮条用 transform 平移，不重排列表。
- File Dropzone 文件拖放区
拖入或点击选择文件，拖拽悬停时边框高亮放大；每个文件有独立进度条，完成后打勾。附示例文件按钮。
- OTP Input 验证码输入
六格验证码：输入自动跳格、退格回退、整段粘贴自动分配。填满后校验，错误抖动，正确变绿。
- Date Range Pill 日期范围选择
胶囊显示所选区间，下方迷你月历点选起止日，区间高亮连成一条，悬停预览，天数自动计算。
常见问题
8pt 的输入框与表单组件能用在 React、Vue 或 Next.js 项目里吗？
能。组件源码是原生 HTML、CSS 和少量 JS；复制提示词交给模型后，它会按你项目的技术栈改写成 React、Vue、Svelte 等写法，并把颜色、字体接到你已有的设计变量上。
怎么把输入框与表单组件装进项目？
三种方式：在组件页复制提示词交给模型；用 8pt CLI 运行 8pt add <组件 slug>；或者接入 8pt MCP 后在对话里直接说需求。复制提示词、CLI 和 MCP 需要 Builder 方案（Builder 方案 ¥45/月、¥128/季或 ¥379/年；另有创始终身版 ¥899，一次付款，限 100 席）。
表单怎样减少用户出错？
标签始终可见、错误提示写在字段旁边并说明怎么改、能自动填的就自动填；验证码和上传这类输入要给出明确的状态反馈。
可以用在商业项目里吗？
可以。你可以在自己的项目（含商业项目）中使用复制或安装的代码，但不能把 8pt 的内容整体转售或搭建同类素材库。