验证码输入框 InputOtp

用于输入验证码的专用输入框，支持多种格式和交互方式。

何时使用

• 需要用户输入短信验证码、邮箱验证码等场景
• 需要格式化显示验证码（如 123-456 格式）
• 需要在移动端弹出数字键盘
• 需要验证完成后自动触发回调

示例

基础用法

最简单的用法，默认为6位数字验证码。

不同格式

支持多种验证码格式，可以自定义分隔符。

不同尺寸

支持默认和小尺寸两种规格。

正方形样式

可以设置为正方形样式，使每个输入位呈现为正方形。

输入类型

支持数字和文本两种输入类型，数字类型在移动端会弹出数字键盘。

不同状态

展示输入框的不同状态：空状态、部分填充、完全填充、禁用等。

状态反馈

支持成功和错误状态的视觉反馈。

交互示例

展示完整的交互流程，包括值变化和输入完成回调。

验证流程

模拟完整的验证码验证流程。

API

InputOtp

参数	说明	类型	默认值
format	格式：* 表示输入位，其他字符直接渲染，如 "" 或 "-"	string	'******'
size	尺寸	'default' | 'small'	'default'
square	是否为正方形（以宽为准）	boolean	false
type	输入类型，影响移动端键盘	'number' | 'text'	'number'
value	当前值（受控模式）	string	-
defaultValue	默认值	string	''
status	状态：success 显示成功样式，error 显示错误样式	'default' | 'success' | 'error'	'default'
onChange	值改变时的回调	(value: string) => void	-
onFinish	输入完成时的回调（满足长度时自动触发）	(value: string) => void	-
onComplete	输入完成时的回调（同 onFinish）	(value: string) => void	-
onStatusReset	error 状态下按退格键重置时的回调	() => void	-
disabled	是否禁用	boolean	false
autoFocus	是否自动聚焦	boolean	false
className	自定义类名	string	-