PinCode

分格验证码 / OTP 输入组件:N 个受控单字符输入格,逐格填入、自动跳格、整串粘贴自动分发,支持数字/混合/RegExp/函数四种字符校验。

设计文档

如何引入

import { PinCode } from '@chenzy-design/svelte';

基础用法

6 位数字验证码,受控值绑定,逐格自动跳格。

当前值:(空)

位数与格式

count 设定位数,format 设定单字符可输入范围。

4 位数字
mixed:数字 + 字母

尺寸

size 控制每格大小(small / default / large)。

校验态与禁用

status 透传各格边框语义,disabled 置灰不可输入。

warning 校验态
error 校验态
禁用

完成回调

填满末格自动 blur 并触发 onComplete。

填满 6 位后自动提交(onComplete)

字符格式

format 四种:number / mixed / RegExp(只大写)/ 函数(只小写)逐字符校验。

number:纯数字
mixed:数字 + 字母
RegExp /[A-Z]/:只大写字母
函数:只小写字母

命令式聚焦

bind:this 拿组件实例,focus(index) / blur(index) 聚焦/失焦指定格。

受控

value 由外部持有,配合 onChange,可编程式随机填入。

当前值:69af41

API 参考

PinCode

Props

属性说明类型默认值
value受控值;整串验证码,配合 onChangestringundefined
defaultValue非受控初始值,仅初始化拆分string''
count验证码位数(格数)number6
format单字符可输入范围;number→inputMode=numeric'number' | 'mixed' | RegExp | ((char: string) => boolean)'number'
size每格尺寸'small' | 'default' | 'large'default
disabled禁用全部格booleanfalse
autoFocus挂载聚焦第一格(对齐 Semi);验证码场景通常立即输入,如需关闭传 autoFocus={false}booleantrue
name表单字段名,透传隐藏聚合 inputstringundefined
id根容器 idstring自动生成
ariaLabel无可视标签时分组辅助名stringi18n 默认
ariaLabelledby外部 label id,优先于 ariaLabelstringundefined
status校验态'default' | 'warning' | 'error'default
className根容器类名stringundefined
style根容器内联样式stringundefined
onChange任一格变化触发,回传整串(value: string) => voidundefined
onComplete填满末格触发一次,同时 blur 末格(value: string) => voidundefined

Events

事件载荷说明
onChange(value: string)任一格值变化即触发(含清空)
onComplete(value: string)最后一格填入完成时触发一次

Methods

属性类型说明
focus聚焦第 index 格(默认 0)
blur移出第 index 格焦点

Accessibility

ARIA rolegroup
APGgroup-of-inputs
键盘交互ArrowLeft/ArrowRightBackspaceDeleteHomeEnd自动跳格
  • root role=group + aria-label(i18n)或 aria-labelledby
  • 每格 aria-label 位次「第 N 位,共 M 位」
  • 每格 autoComplete=one-time-code(OTP 系统级填充,超越 Semi)
  • inputMode 随 format(number→numeric);maxlength=1
  • status=error → 各格 aria-invalid;disabled → aria-disabled + 原生 disabled
  • RTL:←→ 语义镜像;组合态(isComposing)不写入

设计变量

变量默认值用法
--cd-pincode-cell-font-size var(--cd-font-size-header-6)单格字符字号(略大于正文,居中显示单字符)