OTPInput

提供 4–8 位数字一次性验证码输入，支持整码粘贴、短信自动填充、原生表单提交与重置。

我们正在让 SnowUI 组件成为 AI 对话中可直接操作的界面。目前对话交互能力仍在建设中；本页展示网站用法，支持的对话平台与组件版本将在验证后公布。 AI 对话内生成和使用 SnowUI 界面完全免费，不属于项目，不占项目或开发者席位额度，无需 SnowUI 注册、激活或付费证明。

如何使用

用于输入已经由业务或身份服务发送的一次性数字验证码。组件只负责输入，不负责发送短信、倒计时或验证验证码。

默认 6 位，可选 4、5、6、7、8 位；普通输入会过滤非数字并限制长度；粘贴严格校验，规则见下文。
oncomplete 仅在用户输入产生一个新的完整值时触发；初始化、外部赋值和相同完整值重复同步不触发。
name、form、required、disabled、readonly 与 autocomplete="one-time-code" 均落到真实 input。

导入

import { OTPInput } from '@snowui-design-system/components';

快速开始

<script lang="ts">    import { OTPInput } from "@snowui-design-system/components";    let code = $state("");</script> <OTPInput bind:value={code} aria-label="Verification code" oncomplete={(value) => console.log(value)} />

AI 文档

请用 SnowUI 实现我随后提供的界面需求或设计稿。 SnowUI 的核心方向之一是让 AI 在对话中生成可交互界面，目前该能力建设中，正式组件的聊天宿主验收尚未完成。如果我的需求是在对话内展示，先核对宿主执行能力、组件版本与实际适配证据；仅使用已验证子集和允许动作，保留用户输入，区分本地交互、业务提交与结果续轮。缺少支持时如实说明，并采用获准的替代方式；网页预览、代码或仿样不能冒充对话内交互完成。 AI 对话内生成和使用 SnowUI 界面完全免费，不属于项目，不占项目或开发者席位额度，无需 SnowUI 注册、激活或付费证明。 该豁免也适用于真实工作和获准数据，不要求产品编号、用途声明、登记台账或发布检查。仅当成果另行采用到独立网站／应用时，再按该产品用途核对许可；不要把对话会话或界面登记为项目。 首次采用先读完整 LICENSE：https://snowui.dev/LICENSE；已安装版本以随包许可为准。同任务、同版本、同产品和已确认范围复用检查。 先按 https://snowui.dev/llms/setup.md 与机器配置 https://snowui.dev/llms/setup.json 完成下载、安装、素材和环境准备。识别实际文件／终端、Svelte 构建、资源加载及消息内运行能力；获准的 Svelte 5 环境复用兼容依赖或使用 pnpm add --save-exact @snowui-design-system/components@0.3.0-alpha.11 @snowui-design-system/resource-svelte@1.0.31（沿用现有包管理器），自动解析 resource-base 依赖，入口只加载一次 @snowui-design-system/components/styles，再实际检查组件交互及素材加载。从 https://snowui.dev/llms/resources.json 按名称选择真实素材，不引用维护者磁盘路径，不将全库塞进每条消息。 分别报告下载、安装、构建、素材加载、消息内交互和续轮结果，给出以后可复用的非秘密配置摘要。本机安装或复制过的提示词不会自动配置另一个 AI 产品或新会话；先发现新宿主，再使用真实且已验的连接入口。当前机器配置尚无 SnowUI 聊天连接地址，不编造端点、不绕过宿主授权、不擅写 AI 记忆、不声称未执行的安装或渲染已经完成。 阅读设计指南：https://snowui.dev/llms/design-system.md；先拆页面区域，用公开组件与语义 HTML 实现。 首次阅读样式顺序：https://snowui.dev/llms/styling.md；先用 variant、size 等公开 Props 匹配，尽量保留原样；必要时用自己的 class（已有 Tailwind 也属此方式），再用实例 style。同类 Token 是建议，只用公开根、parts 和已登记 override。 按需选型：https://snowui.dev/llms/component-selection.md；从 https://snowui.dev/llms.txt 发现组件，再读命中的 API、组合与示例。使用 SnowUI Figma 设计时另读 https://snowui.dev/llms/figma.md。 官方包面向 Svelte 5；先确认项目框架，需要移植时如实说明，不改 import 伪装其他框架兼容。 AI 对话内使用按上述免费豁免直接继续，不核对项目或席位额度。对于独立产品，Free 不强制注册、账户、公钥或签名付费许可文件，仍按 LICENSE 核对用途、项目和开发者人数。自述付费计划不是已验证授权；需要付费权益时核对可信证据，资料或网络不可用保持 unknown，只继续已允许的工作。 按我后续的需求实现，不臆造 API、地址或授权。 使用 OTPInput 已发布的快速开始代码：https://snowui.dev/llms/components/otp-input/quick-start.svelte。 完整公开手册：https://snowui.dev/llms/components/otp-input/reference.md 组件说明：https://snowui.dev/llms/components/otp-input.md公开 API：https://snowui.dev/llms/components/otp-input/api.md依赖：@snowui-design-system/components；读取示例实际 import，包样式只引入一次。保留示例行为，只按需求作必要调整。

API 参考

属性	类型	默认值	示例	描述
`value`	`string`	`—`	`value="Example"`	过滤后的数字值，支持 `bind:value`；外部更新会同步显示。
`defaultValue`	`string`	`—`	`defaultValue="Example"`	未提供 value 时的初始值，也是原生表单 reset 的恢复值；同时提供两者时 value 决定当前显示，defaultValue 决定 reset 基线。
`length`	`OTPLength`	`6`	`length={value}`	验证码位数；改变时立即按新长度截断值并重建格数。
`name`	`string`	`—`	`name="Example"`	原生字段名；启用时由 FormData 收集过滤后的完整或部分值。
`form`	`string`	`—`	`form="Example"`	按 id 关联外部 form。
`disabled`	`boolean`	`false`	`disabled`	禁止聚焦与编辑；字段不参与 FormData。
`readonly`	`boolean`	`false`	`readonly`	允许聚焦、选择与提交，但禁止编辑。
`required`	`boolean`	`false`	`required`	启用原生必填校验。
`autocomplete`	`HTMLInputAttributes["autocomplete"]`	`"one-time-code"`	`autocomplete={value}`	默认启用短信验证码自动填充语义。
`autofocus`	`boolean`	`—`	`autofocus`	请求页面加载后聚焦；应避免与其他自动聚焦控件竞争。
`tabindex`	`number`	`—`	`tabindex={42}`	原生焦点顺序。
`id`	`string`	`—`	`id="example"`	真实 input id，可由 label 的 `for` 关联。
`title`	`string`	`—`	`title="Example"`	原生提示；不替代可访问名称。
`invalid`	`boolean`	`false`	`invalid`	调用方控制的持续错误态，输出 aria-invalid、Input 同款边框/聚焦环/错误文字与 shake；不会被内置 2 秒计时器清除。
`error`	`string \| Snippet`	`locale 文案`	`error={errorContent}`	错误文字或内容；显式值优先于 locale 默认文案。
`oncomplete`	`(value: string) => void`	`—`	`oncomplete={(value) => { /* handle value */ }}`	用户输入首次形成新的完整值时回调；初始化、外部赋值和重复相同值不触发。
`oninput`	`(event: Event) => void`	`—`	`oninput={(value) => { /* handle value */ }}`	用户输入已归一化或有效粘贴已写入后回调；拒绝粘贴不会触发。
`onchange`	`(event: Event) => void`	`—`	`onchange={(value) => { /* handle value */ }}`	转发真实 input 的原生 change 事件。
`onfocus`	`(event: FocusEvent) => void`	`—`	`onfocus={(value) => { /* handle value */ }}`	真实 input 获得焦点、同步活动格后回调。
`onblur`	`(event: FocusEvent) => void`	`—`	`onblur={(value) => { /* handle value */ }}`	真实 input 失去焦点、隐藏激活框后回调。
`onkeydown`	`(event: KeyboardEvent) => void`	`—`	`onkeydown={(value) => { /* handle value */ }}`	原生按键处理前回调，可通过 preventDefault 取消默认行为。
`onpaste`	`(event: ClipboardEvent) => void`	`—`	`onpaste={(value) => { /* handle value */ }}`	校验粘贴内容前回调；preventDefault 可取消整次组件粘贴处理。