OTPInput

Stable

One-time password input with configurable digit count, variants, sizes, and theme colors.

Installation

npm install @xaui/native

Import

import { OTPInput } from '@xaui/native/input'

Basic Usage

Minimal example showing the component with its default configuration.

import { OTPInput } from '@xaui/native/input'

export function Example() {
  return <OTPInput />
}

Controlled State

Controlled pattern using external React state.

import { useState } from 'react'
import { OTPInput } from '@xaui/native/input'

export function ControlledExample() {
  const [value, setValue] = useState(undefined)

  return <OTPInput value={value} onValueChange={setValue} />
}

Disabled State

Use case where the component should be non-interactive.

import { OTPInput } from '@xaui/native/input'

export function DisabledExample() {
  return <OTPInput isDisabled />
}