Appearance
Input 输入框
一套清晰、亲切的手绘风输入框，适用于表单、搜索、筛选与轻量录入场景。
录入提示先选择输入语义，再组合尺寸、状态与附加内容，避免在同一字段上堆叠过多操作。
类型
输入类型尽量沿用浏览器原生语义；文本域通过 multiline 开启，图标和标签由 Slot 提供。
html
<super-input type="search" placeholder="搜索关键词">
<search-icon slot="suffix"></search-icon>
</super-input>
<super-input type="password" revealable></super-input>
<super-input multiline rows="3"></super-input>尺寸
大、中、小三档尺寸会同步调整输入区、字号和附加元素。外部宽度通过 --super-input-width 控制。
大⌕ ♙ 搜索 ⌕ ♙ 搜索 ⌕ ♙ 搜索
中
小
状态
悬停和聚焦列使用固定演示样式；页面中的普通输入框可以直接交互体验真实状态。
默认悬停聚焦禁用只读基础输入⌕ ⌕ ⌕ ⌕ ⌕
搜索框
密码框
校验状态
validation 只表达校验结果，提示文字由 helper-text 提供；错误状态会自动把内部控件标记为 aria-invalid="true"。
附加元素
附加内容不绑定任何图标库。prefix、suffix 和 action Slot 可以接收文本、SVG、图标组件或 super-button。
常用组合
API
Attributes / Properties
| 名称 | 类型 | 默认值 | 说明 |
|---|---|---|---|
value | string | 空字符串 | 当前输入值；用户输入时同步到组件属性 |
type | text | search | password | number | email | tel | url | date | text | 内部原生输入类型 |
size | large | medium | small | medium | 输入框尺寸 |
validation | none | success | warning | error | info | none | 校验视觉与辅助语义 |
placeholder | string | 空字符串 | 占位提示 |
helper-text | string | 空字符串 | 输入框下方的帮助或错误信息 |
disabled | boolean | false | 禁止输入和附加操作 |
readonly | boolean | false | 内容只读，仍可聚焦和选择 |
required | boolean | false | 转发必填语义并显示必填标记 |
clearable | boolean | false | 有值时显示清空按钮 |
revealable | boolean | false | 密码类型显示可见性按钮 |
multiline | boolean | false | 使用内部 textarea |
rows | number | 3 | 文本域初始行数 |
maxlength / minlength | number | 未设置 | 字符长度约束 |
show-count | boolean | false | 配合 maxlength 显示字数统计 |
min / max / step | string | 空字符串 | 数字等原生类型约束 |
inputmode / autocomplete | string | 空字符串 | 转发原生输入提示 |
aria-label | string | 空字符串 | 转发给内部输入控件的可访问名称 |
clear-label | string | 清空输入 | 清空按钮的可访问名称，可用于本地化 |
decrement-label / increment-label | string | 减少数值 / 增加数值 | 数字步进按钮的可访问名称 |
password-show-label / password-hide-label | string | 显示密码 / 隐藏密码 | 密码可见性按钮在两种状态下的可访问名称 |
value 是运行时状态，用户输入后不会反射回 HTML attribute。组件当前没有声明原生表单关联能力，不应把内部字段的 required 或 name 当作表单提交契约。
内置操作默认提供中文可访问名称。非中文产品应通过对应的 *-label 属性覆盖，例如：
html
<super-input
type="password"
revealable
clearable
clear-label="Clear value"
password-show-label="Show password"
password-hide-label="Hide password"
></super-input>Events
| 名称 | detail | 说明 |
|---|---|---|
super-input | { value, originalEvent } | 每次输入后触发，支持冒泡并穿过 Shadow DOM |
super-change | { value, originalEvent } | 原生 change 时触发 |
super-clear | { previousValue } | 点击清空按钮后触发 |
super-password-visibility | { visible } | 密码可见性变化后触发 |
内部原生 input 与 change 事件也会按浏览器规则传播；跨框架状态同步优先监听 super-input。
Methods
| 名称 | 说明 |
|---|---|
focus(options?) | 聚焦内部输入控件 |
blur() | 移除内部输入焦点 |
select() | 选择内部输入文本 |
Slots
| 名称 | 说明 |
|---|---|
prefix | 左侧标签、图标或金额符号 |
suffix | 右侧图标、域名或单位 |
action | 与输入框组合的操作按钮 |
CSS Parts
| 名称 | 说明 |
|---|---|
control | 手绘边框容器 |
input | 内部原生 input 或 textarea |
prefix / suffix / action | 三个附加区域 |
clear-button / password-toggle / step-button | 内置操作按钮 |
validation-icon / required-mark | 校验与必填标识 |
meta / helper / count | 底部辅助信息与字数统计 |
CSS Custom Properties
css
super-input {
--super-input-width: 260px;
--super-input-background: #fffef9;
--super-input-color: #292524;
--super-input-border-color: #34445f;
--super-input-hover-color: #4cae72;
--super-input-focus-color: #356df3;
--super-input-rotation: -0.12deg;
}