输入框 — 状态变体
共 10 个变体，覆盖搜索框和文本输入框的常见状态。
搜索框
搜索文章、标签...
空（Placeholder）
未输入内容，显示占位提示
Vue3
✕
已输入
有内容，右侧显示清除按钮
Vue3
聚焦（Focus）
ring-2 外框 + 光标闪烁
Vue3
Vue3 组合式 API 最佳实践
Vue3 响应式原理解析
有搜索结果
下拉展示匹配的搜索结果
xyz123abc
🔍
没有找到匹配 "xyz123abc" 的结果
试试其他关键词
无搜索结果
空态提示 + 建议
评论/表单输入框
昵称
空
带标签，placeholder 提示
昵称
已填写
有值，正常显示
昵称
聚焦
边框加粗 + 标签高亮
邮箱
请输入有效的邮箱地址
错误
红色边框 + 错误提示文案
昵称
禁用
灰底灰字，不可编辑
网址（选填）
🔗
带前缀图标
左侧图标 + 缩进输入区
文本域（留言/评论）
留言内容
支持 Markdown 格式
0 / 500
空
留言内容
博客设计得很好看，特别喜欢宠物小窝的功能！希望两位作者越来越好~
支持 Markdown 格式
42 / 500
已输入
留言内容
这是一段非常非常长的留言内容，已经超出了五百字的限制，需要截断或者提示用户减少字数...
已超出字数限制
520 / 500
超出限制
设计 Tokens
Token
值
说明
默认边框
#d4d4d4
border 1px
Focus 边框
border-2 #171717 + ring-2
加粗 + 外发光
Error 边框
border-2 red-400
红色加粗
Disabled 背景
#fafafa
文字 #a3a3a3
Placeholder
#a3a3a3
占位提示文字
圆角
rounded-lg（8px）
输入框统一圆角