Input OTP

A secure input component for one-time passwords and verification codes.

Installation


pnpm dlx bna-ui add input-otp

Usage

import { InputOTP, InputOTPWithSeparator } from '@/components/ui/input-otp';

<InputOTP
  length={6}
  value={otp}
  onChangeText={setOtp}
  onComplete={(value) => console.log('OTP Complete:', value)}
/>

Examples

Default

Different Lengths

With Separator

Masked Input

Error State

Disabled State

Custom Styling

Without Cursor

API Reference

InputOTP

The main OTP input component for handling one-time passwords and verification codes.

Prop	Type	Default	Description
`length`	`number`	`6`	Number of OTP digits to display.
`value`	`string`	`''`	Current OTP value.
`onChangeText`	`(value: string) => void`	-	Called when OTP value changes.
`onComplete`	`(value: string) => void`	-	Called when OTP is complete (all digits filled).
`error`	`string`	-	Error message to display below the input.
`disabled`	`boolean`	`false`	Whether the input is disabled.
`masked`	`boolean`	`false`	Whether to mask digits with dots for security.
`showCursor`	`boolean`	`true`	Whether to show cursor in the active slot.
`separator`	`ReactNode`	-	Custom separator component between slots.
`containerStyle`	`ViewStyle`	-	Additional styles for the container.
`slotStyle`	`ViewStyle`	-	Additional styles for individual digit slots.
`errorStyle`	`TextStyle`	-	Additional styles for the error message.

InputOTPWithSeparator

A preset variant of InputOTP that includes dash separators between digits.

Prop	Type	Default	Description
All props from InputOTP except `separator`	-	-	Inherits all InputOTP props except separator which is preset to a dash.

InputOTPRef

Reference object that provides programmatic control over the InputOTP component.

Method	Type	Description
`focus`	`() => void`	Focuses the input.
`blur`	`() => void`	Blurs the input.
`clear`	`() => void`	Clears all entered digits.
`getValue`	`() => string`	Returns the current OTP value.

Usage with Ref

import { useRef } from 'react';
import { InputOTP, InputOTPRef } from '@/components/ui/input-otp';
 
export function MyComponent() {
  const otpRef = useRef<InputOTPRef>(null);
 
  const handleClear = () => {
    otpRef.current?.clear();
  };
 
  const handleFocus = () => {
    otpRef.current?.focus();
  };
 
  return (
    <InputOTP
      ref={otpRef}
      length={6}
      onComplete={(value) => {
        console.log('OTP entered:', value);
      }}
    />
  );
}

Accessibility

The InputOTP component is built with accessibility in mind:

Uses a hidden TextInput for proper keyboard handling and screen reader support
Supports dynamic text sizing for better readability
Provides proper focus management between slots
Error messages are announced by screen readers
Maintains proper contrast ratios for all states
Supports keyboard navigation and input

Security Considerations

Use the masked prop when dealing with sensitive verification codes
Always validate OTP values on the server side
Consider implementing rate limiting for OTP attempts
Clear sensitive OTP values from memory when no longer needed

Input Link

On This Page

Installation Usage Examples Default Different Lengths With Separator Masked Input Error State Disabled State Custom Styling Without Cursor API Reference InputOTP InputOTPWithSeparator InputOTPRef Usage with Ref Accessibility Security Considerations