OTPInput

Saisie de mot de passe à usage unique avec auto-focus et support de collage.

Import

import { OTPInput } from 'asterui'

Exemples

Saisie OTP de base

Saisie OTP simple à 6 chiffres.

</>

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

Quatre chiffres

Saisie OTP de longueur personnalisée.

</>

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

Tailles

Différentes variantes de taille.

</>

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

Saisie masquée

Masquer les valeurs saisies avec des points.

</>

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

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

export default App

Alphanumérique

Accepter à la fois les lettres et les chiffres.

</>

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

État d'erreur

Afficher le style d'erreur pour une saisie invalide.

</>

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

État désactivé

Saisie désactivée non interactive.

</>

import { OTPInput } from 'asterui'

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

export default App

API

OTPInput

Propriété	Description	Type	Défaut
length	Nombre de champs de saisie	number	6
value	Valeur actuelle	string	-
onChange	Rappel lorsque la valeur change	(value: string) => void	-
onComplete	Rappel lorsque tous les champs sont remplis	(value: string) => void	-
size	Taille de la saisie	'xs' | 'sm' | 'md' | 'lg' | 'xl'	'md'
type	Type de saisie - chiffres uniquement ou alphanumérique	'number' | 'text'	'number'
mask	Masquer la saisie (afficher des points au lieu de caractères)	boolean	false
disabled	État désactivé	boolean	false
error	État d’erreur	boolean	false
autoFocus	Auto-focus sur la première saisie au montage	boolean	false
placeholder	Caractère de placeholder	string	-
className	Classes CSS supplémentaires	string	-

Méthodes de Ref

Propriété	Description	Type	Défaut
focus	Focus sur la première saisie	() => void	-
clear	Effacer toutes les saisies et focus sur la première	() => void	-

Accessibilité

• Chaque saisie a un aria-label indiquant sa position
• Prend en charge la navigation au clavier avec les touches fléchées
• Retour arrière déplace le focus vers la saisie précédente
• Prend en charge le collage de codes OTP complets