Pin Input 验证码输入

无障碍的一次性验证码输入（shadcn InputOTP 外观）。一个隐藏的文本框接收输入与粘贴；各个格子显示字符与闪烁的光标。

基础用法

@Local code: string = '';

SPinInput({ value: this.code!!, onComplete: (v: string) => this.completed = v })
Text(`value = ${this.code}`)

网页近似预览，真机效果以 HarmonyOS 渲染为准。

分组、掩码与字符规则

空间不足时格子缩小（36 → 28vp）。

SPinInput({ length: 6, groups: [3, 3] })
SPinInput({ length: 4, masked: true })
SPinInput({ length: 6, pattern: 'alphanumeric', invalid: true })
SPinInput({ length: 4, defaultValue: '12', disabled: true })

网页近似预览，真机效果以 HarmonyOS 渲染为准。

API

从组件库源码中的 @Param / @Event / @BuilderParam 声明自动提取。

SPinInput

shadcn 的 InputOTP 外观（shadcn-vue 的 PinInput）：相连的 h-9 w-9 格子，共享边框；当前格子带有 border-ring ring-ring/50 ring-[3px] 以及闪烁的光标。

一个透明的 TextInput 覆盖在格子上方，负责接收输入 / 粘贴 / 退格（点击任意位置即可弹出键盘）；格子只负责显示字符。当组件自身宽度不够时，格子会从 36vp 缩小到 28vp。

属性	类型	默认值	说明
length	number	6
value!!	string | undefined	undefined	受控值（配合 !! 使用）。留空则为非受控。
defaultValue	string	''
masked	boolean	false	显示 • 代替字符（对应 shadcn-vue 的 mask；已重命名：mask 是通用属性）。
pattern	PinPattern PinPattern = 'digits' | 'alphanumeric'	'digits'
groups	number[] | undefined	undefined	以短横线分隔的格子分组，例如 [3, 3]；各组之和必须等于 length。
disabled	boolean	false
invalid	boolean	false
label	ResourceStr	$r('app.string.spark_one_time_code')	无障碍名称。

事件	类型	默认值	说明
onValueChange	(v: string) => void	() => { }
onComplete	(v: string) => void	() => { }	所有格子都填满时触发。