Input OTP

The InputOtp component allows users to enter one-time passcodes. It provides a series of input boxes that automatically handle focus and input.

Installation

$ cbui-cli install inputotp

To get started, please make sure you have installed cbui-cli globally and authenticated your account. This will ensure you can access all the necessary features.

View documents

Import

index.tsx

import { InputOtp } from '@/crossbuildui/inputotp';

The glass variant for the InputOtp component uses expo-blur. Ensure this library is installed and linked if you plan to use this feature.

InputOtp Component

Basic Usage

Specify the length of the OTP.

MyComponent.tsx

<InputOtp length={6} />

Variants

InputOtp supports multiple visual variant options for the input boxes: flat, bordered (default), faded, underlined, and glass.

MyComponent.tsx

<View style={{gap: 16}}>
  <InputOtp length={4} variant="flat" />
  <InputOtp length={4} variant="bordered" /> {/* Default */}
  <InputOtp length={4} variant="faded" />
  <InputOtp length={4} variant="underlined" />
  <InputOtp length={4} variant="glass" />
</View>

Sizes

Adjust input box size with sm, md (default), or lg.

MyComponent.tsx

<View style={{gap: 16, alignItems: 'center'}}>
  <InputOtp length={4} size="sm" />
  <InputOtp length={4} size="md" /> {/* Default */}
  <InputOtp length={4} size="lg" />
</View>

Radius

Control the border radius of input boxes with none, sm, md (default), lg, or full.

MyComponent.tsx

<View style={{gap: 16, alignItems: 'center'}}>
  <InputOtp length={4} radius="none" />
  <InputOtp length={4} radius="sm" />
  <InputOtp length={4} radius="md" /> {/* Default */}
  <InputOtp length={4} radius="lg" />
  <InputOtp length={4} radius="full" />
</View>

Colors

The color prop influences the input box appearance on focus or when invalid. Supported colors include primary, secondary, success, warning, danger, and default.

MyComponent.tsx

<View style={{gap: 16, alignItems: 'center'}}>
  <InputOtp length={4} color="primary" placeholder="P" />
  <InputOtp length={4} color="secondary" placeholder="S" />
  <InputOtp length={4} color="success" placeholder="S" />
  <InputOtp length={4} color="warning" placeholder="W" />
  <InputOtp length={4} color="danger" isInvalid errorMessage="Invalid OTP" />
  <InputOtp length={4} color="default" placeholder="D" />
</View>

Glass Variant

The glass variant applies a frosted glass effect to each OTP input box background using expo-blur. Customize its appearance with glassIntensity (0-100) and glassTint ('light', 'dark', or 'default'). Text and placeholder colors for this variant typically adapt to the theme's foreground color for better contrast. The border color also adapts based on focus, invalid state, and glass tint.

MyComponent.tsx

<View style={{gap: 16}}>
  <InputOtp
    length={4}
    variant="glass"
    glassIntensity={70}
    glassTint="light"
    placeholder="LGT"
  />
  <InputOtp
    length={6}
    variant="glass"
    glassIntensity={40}
    glassTint="dark"
    placeholder="DRK"
  />
</View>

Description and Error Message

Provide helpful context with description or display validation feedback using isInvalid and errorMessage.

MyComponent.tsx

<View style={{gap: 16}}>
  <InputOtp
    length={6}
    description="Enter the 6-digit code sent to your phone."
  />
  <InputOtp
    length={4}
    isInvalid
    errorMessage="The OTP entered is incorrect. Please try again."
    value="123" // Example value to show error state
  />
</View>

Controlled and Uncontrolled

Manage OTP state externally using value and onValueChange for a controlled component, or let it manage its own state (uncontrolled).

MyComponent.tsx

// Controlled InputOtp
function ControlledInputOtpExample() {
  const [otp, setOtp] = React.useState('');

  return (
    <View style={{gap: 8}}>
      <InputOtp
        length={4}
        value={otp}
        onValueChange={setOtp}
        placeholder="C"
      />
      <Text>Current OTP: {otp}</Text>
    </View>
  );
}

// Uncontrolled InputOtp (uses internal state)
// <InputOtp length={4} placeholder="U" />

Disabled State

Disable the OTP input using the disabled prop.

MyComponent.tsx

<InputOtp length={4} disabled value="1234" />

Placeholder

Set a placeholder character for empty input boxes and customize its color with placeholderTextColor.

MyComponent.tsx

<View style={{gap: 16}}>
  <InputOtp length={4} placeholder="0" />
  <InputOtp length={4} placeholder="*" placeholderTextColor="blue" />
</View>

Custom TextInput Props

Pass additional props to the underlying TextInput components using textInputProps. This is useful for settings like keyboardType, autoFocus on the first input, etc.

MyComponent.tsx

<InputOtp
  length={6}
  textInputProps={{
    keyboardType: 'default', // Default is 'number-pad'
    // You can pass other TextInput props like autoFocus on the first input, etc.
    // Note: some props like 'value', 'onChangeText', 'maxLength' are controlled by InputOtp
  }}
  description="Uses 'default' keyboard type."
/>

Props Overview

PROP	TYPE	DEFAULT	DESCRIPTION
`length`	`number`	-	Number of OTP input boxes. Required.
`variant`	`InputOtpVariant`	`'bordered'`	Visual style.
`color`	`InputOtpColor`	`'default'`	Thematic color on focus/invalid.
`size`	`InputOtpSize`	`'md'`	Size of input boxes.
`radius`	`InputOtpRadius`	`'md'`	Border radius of boxes.
`value`	`string`	-	Controlled value of the OTP.
`onValueChange`	`(otp: string) => void`	-	Callback when OTP value changes.
`description`	`ReactNode`	-	Helper text below the OTP input.
`errorMessage`	`ReactNode`	-	Error message when `isInvalid`.
`isInvalid`	`boolean`	`false`	Marks input as invalid.
`styles`	`InputOtpSlotsStyles`	-	Custom styles for slots (base, otpInputWrapper, etc.).
`style`	`StyleProp<ViewStyle>`	-	Style for the outermost container (`styles.base` equivalent).
`disabled`	`boolean`	`false`	Disable the input.
`placeholder`	`string`	-	Placeholder character for each box.
`placeholderTextColor`	`ColorValue`	-	Custom color for placeholder text.
`textInputProps`	`Omit<TextInputProps, ...>`	-	Props for underlying TextInput components.
`glassTint`	`'default' \| 'light' \| 'dark'`	Theme-derived	Tint for the 'glass' variant blur effect on each input box.
`glassIntensity`	`number`	30	Intensity (0-100) for the 'glass' variant blur effect.

Styling

Customize the InputOtp appearance using the style prop for the main wrapper or the styles prop for more granular control over internal slots:

style: Applied to the outermost container (View) of the entire component. Equivalent to styles.base.
styles.base: Styles for the outermost container.
styles.otpInputWrapper: Styles for the View that wraps all the individual OTP input boxes.
styles.otpInput: Styles for each individual OTP TextInput box.
styles.description: Styles for the description Text component.
For the glass variant, each otpInput box background is rendered by BlurView from expo-blur, controlled by glassIntensity and glassTint. The styles.otpInput.backgroundColor will be overridden for this variant.
styles.errorMessage: Styles for the error message Text component.

MyComponent.tsx

<InputOtp
  length={4}
  value="STYL"
  style={{ marginVertical: 20, padding: 10, backgroundColor: '#e6e6fa' }} // Styles the outermost 'base' container
  styles={{
    base: { borderWidth: 1, borderColor: 'purple' },
    otpInputWrapper: { columnGap: 20 }, // Increased gap between boxes
    otpInput: {
      backgroundColor: 'lightcyan',
      borderColor: 'teal',
      borderWidth: 2,
      color: 'darkgreen',
      fontWeight: 'bold',
    },
    description: { color: 'navy', fontStyle: 'italic', marginTop: 10 },
    errorMessage: { color: 'darkred', fontWeight: 'bold', marginTop: 10 }
  }}
  description="This OTP input has custom slot styling."
/>

Accessibility

The InputOtp component includes features to aid accessibility:

Each input box has textContentType="oneTimeCode" (iOS) and autoComplete="sms-otp" (Android) / "one-time-code" (web) to help with autofill from SMS.
Keyboard type defaults to "number-pad" for easier numeric input.
Consider providing an overall accessibilityLabel for the component if the context isn't clear from surrounding elements, especially if there's no visible description.

Input Radio