表单 · 2 / 21
Input st-input
单行输入框：outlined / filled 两种类型，前后缀插槽与原生 type。value 是运行时状态，初始值用 default-value；focus 描边与 caret 由 color 语义色控制。
两种 variant
outlined 有完整一圈描边，适合常规表单；filled 用容器底色加底边线，视觉更轻。两者共享同一套高度、内边距与 focus 动画，只切换材质。
LIVE
st-input
outlined
filled + 初始值
前后缀插槽
示例代码
<st-input placeholder="you@example.com">
<iconify-icon slot="prefix" icon="mdi:email-outline"></iconify-icon>
</st-input>
<st-input variant="filled" default-value="已填充的内容"></st-input>尺寸、宽度与圆角
尺寸类默认值都用 em：默认高 2.857em、最小宽 13.571em。只改 font-size 就能整体等比缩放，宽度和圆角直接用原生 CSS 覆写。
LIVE
font-size / width / border-radius
12px
14px（默认）
18px
固定宽度
pill 圆角
示例代码
<st-input style="font-size: 12px;" placeholder="小号"></st-input>
<st-input style="width: 320px;" placeholder="固定宽度"></st-input>
<st-input variant="filled"
style="border-radius: 999px; border: 1px solid var(--md-sys-color-outline);"
placeholder="pill"></st-input>type 与前后缀操作
type 原样转发给内部 input，密码、邮箱、数字等原生行为都可直接用。前后缀既能放图标，也能放可点击操作；密码可见切换由页面数据驱动 type，不经过组件内部状态。
LIVE
type / prefix / suffix
email
number
#
password + 可见切换
{{showPwd ? '🙈' : '👁'}}
示例代码（密码可见切换）
<st-input attr:type="showPwd ? 'text' : 'password'" default-value="senti-ui">
<span slot="suffix" on:click="showPwd = !showPwd">显示 / 隐藏</span>
</st-input>disabled 与 readonly
disabled 降低到 0.38 透明度、阻断聚焦与输入；readonly 仍可聚焦、可选中复制，只是不可修改。布尔属性在 ofa 页面里用 attr: 绑定，静态场景直接写裸属性。
LIVE
disabled / readonly
disabled
disabled + filled
readonly
示例代码
<st-input default-value="不可编辑" disabled></st-input>
<st-input variant="filled" placeholder="禁用填充态" disabled></st-input>
<st-input default-value="只读内容" readonly></st-input>color 语义色与校验态
color 接受 M3 角色名（primary / error / success 等）或 color 工具里的自定义变量名，控制 caret 与 focus 描边。它只表达语义，不会改变未聚焦时的普通边框；校验时把结果写进 data 即可。
LIVE
color / 实时校验
error
success
实时邮箱校验
示例代码（动态校验）
<st-input attr:color="emailColor" on:input="checkEmail"
placeholder="输入邮箱"></st-input>
<span>校验提示</span>
<script>
export default async () => ({
data: { emailColor: "", emailHint: "输入邮箱开始校验" },
proto: {
checkEmail(e) {
const ok = e.target.value.includes("@");
this.emailColor = ok ? "success" : "error";
this.emailHint = ok ? "格式有效" : "邮箱格式不正确";
},
},
});
</script>受控值与 focus() / blur()
页面里用 sync:value 把 data 与运行时值双向绑定；focus() / blur() 是组件方法，清空只需把 data 置空。这样值始终是唯一数据源，不需要直接碰内部原生 input。
LIVE
:value / on:input / methods示例代码（受控 + 方法）
<st-input sync:value="query" placeholder="输入关键字"></st-input>
<st-button on:click="clearQuery">清空</st-button>
<script>
export default async () => ({
data: { query: "" },
proto: {
clearQuery() { this.query = ""; },
},
});
</script>属性
| 属性 | 类型 | 默认 | 说明 |
|---|---|---|---|
variant | "outlined" | "filled" | "outlined" | M3 两种输入框类型 |
default-value | string | 无 | 初始值；attached 时读取一次 |
placeholder | string | 无 | 占位文本，转发内部 input |
type | "text" | "password" | "email" | "number" | … | "text" | 原生 input 类型 |
color | M3 角色名 / 自定义变量名 | 无 | caret 与 focus 描边色 |
disabled | boolean | 无 | 0.38 透明度，阻断聚焦与输入 |
readonly | boolean | 无 | 可聚焦、不可修改 |
插槽 / 事件 / 注意
- 插槽：
prefix/suffix放图标或操作。 - 事件：
input/change；change 已转发为 composed，可直接在宿主监听。 - 方法：
focus()/blur()；焦点在内部透明原生 input 上。 value是运行时 property：ofa 页面用sync:value双向绑定，纯 JS 用el.value读写；setAttribute("value")无效，初始值用default-value。- 默认高度
2.857em、最小宽13.571em；改font-size等比缩放。