Forms

OTP Input

Keyboard-optimized verification code input with auto-focus and paste support.

2FA Verification Flow

A complete real-world simulation of a two-factor authentication flow. Includes automatic block separators, loading states, and success/error feedback.

Secure Verification

Enter the 6-digit code sent to your mobile device.
Tip: Try "123456"

'use client'

import { OTPInput, Stack, Text, Button } from 'biibaos'
import { useState } from 'react'

export default function VerificationFlow() {
  const [status, setStatus] = useState<'idle' | 'success' | 'error'>('idle')
  const [loading, setLoading] = useState(false)

  const handleComplete = (code: string) => {
    setLoading(true)
    setStatus('idle')
    
    // Simulate API verification
    setTimeout(() => {
      setLoading(false)
      if (code === '123456') {
        setStatus('success')
      } else {
        setStatus('error')
      }
    }, 1500)
  }

  return (
    <Stack direction="column" gap={20} align="center">
      <Text variant="h3" weight="bold">Secure Verification</Text>
      <Text color="muted" align="center">
        Enter the 6-digit code sent to your mobile device.
      </Text>
      
      <OTPInput 
        length={6}
        separator="-"
        separatorIndex={3}
        loading={loading}
        status={status}
        onComplete={handleComplete}
      />

      {status === 'error' && (
        <Button variant="ghost" size="sm" onClick={() => setStatus('idle')}>
          Try again
        </Button>
      )}
    </Stack>
  )
}

Custom Formatting

Configure lengths, separators, and input masking (text, number, or password).

•

'use client'

import React from 'react'
import { OTPInput, Stack } from 'biibaos'

export default function CustomFormatting() {
  return (
    <Stack direction="column" gap={32} align="center">
      <OTPInput length={4} type="password" />
      <OTPInput length={6} separator="•" separatorIndex={3} />
      <OTPInput length={8} separator="/" separatorIndex={4} type="number" />
    </Stack>
  )
}

Properties

Prop	Type	Default	Description
`length`	`number`	4	Total amount of character input boxes in the sequence
`value`	`string`	—	Raw data string or URL to encode into the QR grid
`onChange`	`(value: string) => void`	—	Callback function triggered when the value changes
`onComplete`	`(value: string) => void`	—	Callback triggered when all fields are successfully entered
`disabled`	`boolean`	false	If true, disables all user interaction and applies faded opacity
`type`	`'text' \| 'number' \| 'password'`	'text'	Semantic HTML input type classification (text, password, email, etc.)
`separator`	`React.ReactNode`	—	Custom separator character or element between breadcrumb links
`separatorIndex`	`number`	2	Configures the separatorIndex option
`status`	`'success' \| 'error' \| 'idle'`	'idle'	Configures the status option
`loading`	`boolean`	false	If true, displays an animated loading spinner and disables interactions

Upload

Rich Text