Otp

One-time passcode entry fields.

Demo

Usage

import { useState } from 'react'
import { Otp } from 'regen-ui'

export function VerificationCode() {
  const [value, setValue] = useState('')

  return <Otp length={6} onChange={setValue} value={value} />
}

API Reference

Otp.Props

Name	Type	Default	Description
`className`Optional	`string`	None	Additional class names for the slot group.
`disabled`Optional	`boolean`	None	Disable all inputs.
`error`Optional	`string \| boolean`	None	Error message or boolean error state.
`length`Optional	`number`	`6`	Number of digits.
`onChange`Optional	`(value: string) => void`	None	Called with the current value string.
`size`Optional	`'large' \| 'medium' \| 'small'`	`'medium'`	Input size.
`value`Optional	`string`	None	Current value string.

classNameOptional

Typestring

DefaultNone

Additional class names for the slot group.

disabledOptional

Typeboolean

DefaultNone

Disable all inputs.

errorOptional

Typestring | boolean

DefaultNone

Error message or boolean error state.

lengthOptional

Typenumber

Default6

Number of digits.

onChangeOptional

Type(value: string) => void

DefaultNone

Called with the current value string.

sizeOptional

Type'large' | 'medium' | 'small'

Default'medium'

Input size.

valueOptional

Typestring

DefaultNone

Current value string.