OTPInput 验证码输入

具有自动对焦和粘贴支持的一次性密码输入。

导入

import { OTPInput } from 'asterui'

示例

基础验证码输入

简单的 6 位数字验证码输入。

</>

import { OTPInput } from 'asterui'
import { useState } from 'react'

function App() {
  const [value, setValue] = useState('')
  
  return (
      <OTPInput
        value={value}
        onChange={setValue}
        onComplete={(otp) => console.log('Complete:', otp)}
      />
    )
}

export default App

四位数字

自定义长度的验证码输入。

</>

import { OTPInput } from 'asterui'
import { useState } from 'react'

function App() {
  const [value, setValue] = useState('')
  
  return (
      <OTPInput
        length={4}
        value={value}
        onChange={setValue}
      />
    )
}

export default App

尺寸

不同的尺寸变体。

</>

import { OTPInput, Space } from 'asterui'

function App() {
  return (
      <Space direction="vertical" size="lg">
        <OTPInput length={4} size="xs" />
        <OTPInput length={4} size="sm" />
        <OTPInput length={4} size="md" />
        <OTPInput length={4} size="lg" />
      </Space>
    )
}

export default App

遮罩输入

用点隐藏输入的值。

</>

import { OTPInput } from 'asterui'
import { useState } from 'react'

function App() {
  const [value, setValue] = useState('')
  
  return (
      <OTPInput
        value={value}
        onChange={setValue}
        mask
      />
    )
}

export default App

字母数字

接受字母和数字。

</>

import { OTPInput } from 'asterui'
import { useState } from 'react'

function App() {
  const [value, setValue] = useState('')
  
  return (
      <OTPInput
        value={value}
        onChange={setValue}
        type="text"
        length={5}
      />
    )
}

export default App

错误状态

显示无效输入的错误样式。

</>

import { OTPInput } from 'asterui'
import { useState } from 'react'

function App() {
  const [value, setValue] = useState('123')
  
  return (
      <OTPInput
        value={value}
        onChange={setValue}
        error
        length={4}
      />
    )
}

export default App

禁用状态

非交互式禁用输入。

</>

import { OTPInput } from 'asterui'

function App() {
  return (
      <OTPInput
        value="123456"
        disabled
      />
    )
}

export default App

API

OTPInput

属性	描述	类型	默认值
length	输入框数量	number	6
value	当前值	string	-
onChange	值更改时的回调	(value: string) => void	-
onComplete	所有字段填充完成时的回调	(value: string) => void	-
size	输入尺寸	'xs' | 'sm' | 'md' | 'lg' | 'xl'	'md'
type	输入类型 - 仅数字或字母数字	'number' | 'text'	'number'
mask	遮罩输入(显示点而不是字符)	boolean	false
disabled	禁用状态	boolean	false
error	错误状态	boolean	false
autoFocus	挂载时自动对焦第一个输入	boolean	false
placeholder	占位符字符	string	-
className	额外的 CSS 类	string	-

Ref 方法

属性	描述	类型	默认值
focus	对焦第一个输入	() => void	-
clear	清除所有输入并对焦第一个	() => void	-

可访问性

• 每个输入都有一个 aria-label 指示其位置
• 支持使用箭头键进行键盘导航
• Backspace 将焦点移至上一个输入
• 支持粘贴完整的验证码