OtpInput

Component to input OTP or PIN codes with multiple boxes.
Supports custom placeholder, cursor, modes, sizes, and fully customizable behavior.

Usage Playground

Max Length

Mode

box

dash

With Cursor

With Alphanumeric Keyboard

Code Snippet

import { OtpInput } from "@react-native-blossom-ui/components";

    function Usage() {
        return (
            <OtpInput/>
        );
    }

Usage

function OtpInputUsage() {
  return (
    <View>
      <OtpInput secureTextEntry onComplete={(otp) => alert(otp)} />
    </View>
  )
}

Modes

Use the mode prop to switch between default underline or box-style inputs.

function OtpInputModes() {
  return (
    <View>
      <OtpInput mode="box" />
      <OtpInput mode="dash" />
    </View>
  )
}

Placeholder

Use the placeholder prop to show hint characters in each input box.

function OtpInputPlaceholder() {
  return (
    <View>
      <OtpInput placeholder="*" status="success" />
    </View>
  )
}

With Cursor

Enable withCursor prop to display a blinking cursor in the focused input box.

function OtpInputWithCursor() {
  return (
    <View>
      <OtpInput withCursor />
    </View>
  )
}

As Pin Input

Use the secureTextEntry prop to style the OTP input as a PIN code.

function OtpInputAsPin() {
  return (
    <View>
      <OtpInput withCursor secureTextEntry />
    </View>
  )
}

Sizes

function OtpInputSizes() {
  return (
    <View>
      <OtpInput size="small" />
      <OtpInput size="medium" />
      <OtpInput size="large" />
    </View>
  )
}

Custom

function OtpInputCustom() {
  const [isCompleted, setIsCompleted] = React.useState(false)

  return (
    <View>
      <OtpInput
        maxLength={6}
        withAlphanumericKeyboard
        label="Custom OTP Input"
        labelStyle={{color: 'cyan'}}
        caption="Enter your OTP"
        captionStyle={{color: 'green'}}
        error={isCompleted ? 'OTP is required' : ''}
        boxStyle={(isFocused) => ({
          borderRadius: 40,
          backgroundColor: isFocused ? 'blue' : 'gold',
        })}
        inputTextStyle={{
          color: 'black',
          fontWeight: 'bold',
        }}
        onChangeText={(otp) => {
          setIsCompleted(otp.length !== 6)
        }}
      />
    </View>
  )
}

Props

Prop	Data Type	Default Value	Description
Extends	TextInputProps	--	Inherits properties from TextInputProps
maxLength	number	4	Set the otp input length
boxStyle	StyleProp<ViewStyle> | ((isFocused: boolean) => StyleProp<ViewStyle>)	--	Set the style for each box with isFocused prop
mode	"box" | "dash"	box	different view based on the mode
withCursor	boolean	--	Set it to true to enable otp cursor
withAlphanumericKeyboard	boolean	false	Set the alphanumeric keyboardBy default it will use numeric keyboard
onComplete	(otp: string) => void	--	onComplete callback with otp input text