Hire Us Get CoreUI PRO all-access →

React One Time Password (OTP) Input Component

One Time Password Input

Markdown ChatGPT Claude
CoreUI PRO
This component is part of CoreUI PRO – a powerful UI library with over 250 components and 25+ templates, designed to help you build modern, responsive apps faster. Fully compatible with Angular, Bootstrap, React.js, and Vue.js.
Get CoreUI PRO

Create secure and user-friendly React.js one-time password input fields with automatic navigation, paste support, validation, and customizable options for modern authentication flows.

Available in Other JavaScript Frameworks

CoreUI React One Time Password (OTP) Input Component is also available for Angular, Bootstrap, and Vue. Explore framework-specific implementations below:

On this page

Example

The <COneTimePassword /> and <COneTimePasswordInput /> components create secure React OTP input fields with automatic character navigation and validation. Perfect for two-factor authentication, SMS verification codes, and secure login flows.

import React, { useState } from 'react'
import { CForm } from '@coreui/react'
import { COneTimePassword, COneTimePasswordInput } from '@coreui/react-pro'

export const OneTimePasswordExample = () => {
  const [value, setValue] = useState('')

  return (
    <CForm>
      <div className="mb-3">
        <COneTimePassword label="Enter OTP Code" id="basicOTP" name="otp" onChange={setValue}>
          <COneTimePasswordInput />
          <COneTimePasswordInput />
          <COneTimePasswordInput />
          <COneTimePasswordInput />
          <COneTimePasswordInput />
          <COneTimePasswordInput />
        </COneTimePassword>
      </div>
      {value && <div className="text-body-secondary small">Current value: {value}</div>}
    </CForm>
  )
}
import React, { useState } from 'react'
import { CForm } from '@coreui/react'
import { COneTimePassword, COneTimePasswordInput } from '@coreui/react-pro'

export const OneTimePasswordExample = () => {
  const [value, setValue] = useState('')

  return (
    <CForm>
      <div className="mb-3">
        <COneTimePassword label="Enter OTP Code" id="basicOTP" name="otp" onChange={setValue}>
          <COneTimePasswordInput />
          <COneTimePasswordInput />
          <COneTimePasswordInput />
          <COneTimePasswordInput />
          <COneTimePasswordInput />
          <COneTimePasswordInput />
        </COneTimePassword>
      </div>
      {value && <div className="text-body-secondary small">Current value: {value}</div>}
    </CForm>
  )
}

One-time password types

The one-time password input supports different input types for various use cases.

import React from 'react'
import { COneTimePassword, COneTimePasswordInput } from '@coreui/react-pro'

export const OneTimePasswordTypesExample = () => {
  return (
    <>
      <div className="mb-3">
        <COneTimePassword label="Numeric OTP (default)" type="number">
          <COneTimePasswordInput />
          <COneTimePasswordInput />
          <COneTimePasswordInput />
          <COneTimePasswordInput />
          <COneTimePasswordInput />
          <COneTimePasswordInput />
        </COneTimePassword>
      </div>
      <div className="mb-3">
        <COneTimePassword label="Text OTP" type="text">
          <COneTimePasswordInput />
          <COneTimePasswordInput />
          <COneTimePasswordInput />
          <COneTimePasswordInput />
          <COneTimePasswordInput />
          <COneTimePasswordInput />
        </COneTimePassword>
      </div>
      <div>
        <COneTimePassword label="Masked OTP (hidden characters)" masked>
          <COneTimePasswordInput />
          <COneTimePasswordInput />
          <COneTimePasswordInput />
          <COneTimePasswordInput />
          <COneTimePasswordInput />
          <COneTimePasswordInput />
        </COneTimePassword>
      </div>
    </>
  )
}
import React from 'react'
import { COneTimePassword, COneTimePasswordInput } from '@coreui/react-pro'

export const OneTimePasswordTypesExample = () => {
  return (
    <>
      <div className="mb-3">
        <COneTimePassword label="Numeric OTP (default)" type="number">
          <COneTimePasswordInput />
          <COneTimePasswordInput />
          <COneTimePasswordInput />
          <COneTimePasswordInput />
          <COneTimePasswordInput />
          <COneTimePasswordInput />
        </COneTimePassword>
      </div>
      <div className="mb-3">
        <COneTimePassword label="Text OTP" type="text">
          <COneTimePasswordInput />
          <COneTimePasswordInput />
          <COneTimePasswordInput />
          <COneTimePasswordInput />
          <COneTimePasswordInput />
          <COneTimePasswordInput />
        </COneTimePassword>
      </div>
      <div>
        <COneTimePassword label="Masked OTP (hidden characters)" masked>
          <COneTimePasswordInput />
          <COneTimePasswordInput />
          <COneTimePasswordInput />
          <COneTimePasswordInput />
          <COneTimePasswordInput />
          <COneTimePasswordInput />
        </COneTimePassword>
      </div>
    </>
  )
}

Placeholders

Provide visual hints to users by setting placeholder text for OTP input fields. You can use a single character for all fields or specify different placeholders for each field.

import React from 'react'
import { COneTimePassword, COneTimePasswordInput } from '@coreui/react-pro'

export const OneTimePasswordPlaceholdersExample = () => {
  return (
    <>
      <div className="mb-3">
        <COneTimePassword label="Single character placeholder" placeholder="0">
          <COneTimePasswordInput />
          <COneTimePasswordInput />
          <COneTimePasswordInput />
          <COneTimePasswordInput />
          <COneTimePasswordInput />
          <COneTimePasswordInput />
        </COneTimePassword>
      </div>
      <div className="mb-3">
        <COneTimePassword label="Different placeholders per field" placeholder="123456">
          <COneTimePasswordInput />
          <COneTimePasswordInput />
          <COneTimePasswordInput />
          <COneTimePasswordInput />
          <COneTimePasswordInput />
          <COneTimePasswordInput />
        </COneTimePassword>
      </div>
      <div>
        <COneTimePassword label="Letter placeholders" type="text" placeholder="ABCDEF">
          <COneTimePasswordInput />
          <COneTimePasswordInput />
          <COneTimePasswordInput />
          <COneTimePasswordInput />
          <COneTimePasswordInput />
          <COneTimePasswordInput />
        </COneTimePassword>
      </div>
    </>
  )
}
import React from 'react'
import { COneTimePassword, COneTimePasswordInput } from '@coreui/react-pro'

export const OneTimePasswordPlaceholdersExample = () => {
  return (
    <>
      <div className="mb-3">
        <COneTimePassword label="Single character placeholder" placeholder="0">
          <COneTimePasswordInput />
          <COneTimePasswordInput />
          <COneTimePasswordInput />
          <COneTimePasswordInput />
          <COneTimePasswordInput />
          <COneTimePasswordInput />
        </COneTimePassword>
      </div>
      <div className="mb-3">
        <COneTimePassword label="Different placeholders per field" placeholder="123456">
          <COneTimePasswordInput />
          <COneTimePasswordInput />
          <COneTimePasswordInput />
          <COneTimePasswordInput />
          <COneTimePasswordInput />
          <COneTimePasswordInput />
        </COneTimePassword>
      </div>
      <div>
        <COneTimePassword label="Letter placeholders" type="text" placeholder="ABCDEF">
          <COneTimePasswordInput />
          <COneTimePasswordInput />
          <COneTimePasswordInput />
          <COneTimePasswordInput />
          <COneTimePasswordInput />
          <COneTimePasswordInput />
        </COneTimePassword>
      </div>
    </>
  )
}

Pre-filled values

Set initial values using the value prop.

import React from 'react'
import { COneTimePassword, COneTimePasswordInput } from '@coreui/react-pro'

export const OneTimePasswordPrefilledExample = () => {
  return (
    <COneTimePassword label="OTP with pre-filled value" defaultValue="123456">
      <COneTimePasswordInput />
      <COneTimePasswordInput />
      <COneTimePasswordInput />
      <COneTimePasswordInput />
      <COneTimePasswordInput />
      <COneTimePasswordInput />
    </COneTimePassword>
  )
}
import React from 'react'
import { COneTimePassword, COneTimePasswordInput } from '@coreui/react-pro'

export const OneTimePasswordPrefilledExample = () => {
  return (
    <COneTimePassword label="OTP with pre-filled value" defaultValue="123456">
      <COneTimePasswordInput />
      <COneTimePasswordInput />
      <COneTimePasswordInput />
      <COneTimePasswordInput />
      <COneTimePasswordInput />
      <COneTimePasswordInput />
    </COneTimePassword>
  )
}

Input modes

Control user input behavior with linear and non-linear modes.

import React from 'react'
import { COneTimePassword, COneTimePasswordInput } from '@coreui/react-pro'

export const OneTimePasswordInputModesExample = () => {
  return (
    <>
      <div className="mb-3">
        <COneTimePassword label="Linear mode (sequential input)" linear={true}>
          <COneTimePasswordInput />
          <COneTimePasswordInput />
          <COneTimePasswordInput />
          <COneTimePasswordInput />
          <COneTimePasswordInput />
          <COneTimePasswordInput />
        </COneTimePassword>
      </div>
      <div>
        <COneTimePassword label="Non-linear mode (free navigation)" linear={false}>
          <COneTimePasswordInput />
          <COneTimePasswordInput />
          <COneTimePasswordInput />
          <COneTimePasswordInput />
          <COneTimePasswordInput />
          <COneTimePasswordInput />
        </COneTimePassword>
      </div>
    </>
  )
}
import React from 'react'
import { COneTimePassword, COneTimePasswordInput } from '@coreui/react-pro'

export const OneTimePasswordInputModesExample = () => {
  return (
    <>
      <div className="mb-3">
        <COneTimePassword label="Linear mode (sequential input)" linear={true}>
          <COneTimePasswordInput />
          <COneTimePasswordInput />
          <COneTimePasswordInput />
          <COneTimePasswordInput />
          <COneTimePasswordInput />
          <COneTimePasswordInput />
        </COneTimePassword>
      </div>
      <div>
        <COneTimePassword label="Non-linear mode (free navigation)" linear={false}>
          <COneTimePasswordInput />
          <COneTimePasswordInput />
          <COneTimePasswordInput />
          <COneTimePasswordInput />
          <COneTimePasswordInput />
          <COneTimePasswordInput />
        </COneTimePassword>
      </div>
    </>
  )
}

Auto-submit

Enable automatic form submission when all one-time password fields are completed.

import React from 'react'
import { CButton, CForm } from '@coreui/react'
import { COneTimePassword, COneTimePasswordInput } from '@coreui/react-pro'

export const OneTimePasswordAutoSubmitExample = () => {
  const handleSubmit = (event: React.FormEvent) => {
    event.preventDefault()
    console.log('Form submitted!')
    alert('Form submitted automatically!')
  }

  return (
    <CForm onSubmit={handleSubmit}>
      <div className="mb-3">
        <COneTimePassword label="Auto-submit OTP (fill all 6 digits)" autoSubmit>
          <COneTimePasswordInput />
          <COneTimePasswordInput />
          <COneTimePasswordInput />
          <COneTimePasswordInput />
          <COneTimePasswordInput />
          <COneTimePasswordInput />
        </COneTimePassword>
      </div>
      <CButton type="submit" color="primary">
        Manual Submit
      </CButton>
    </CForm>
  )
}
import React from 'react'
import { CButton, CForm } from '@coreui/react'
import { COneTimePassword, COneTimePasswordInput } from '@coreui/react-pro'

export const OneTimePasswordAutoSubmitExample = () => {
  const handleSubmit = (event) => {
    event.preventDefault()
    console.log('Form submitted!')
    alert('Form submitted automatically!')
  }

  return (
    <CForm onSubmit={handleSubmit}>
      <div className="mb-3">
        <COneTimePassword label="Auto-submit OTP (fill all 6 digits)" autoSubmit>
          <COneTimePasswordInput />
          <COneTimePasswordInput />
          <COneTimePasswordInput />
          <COneTimePasswordInput />
          <COneTimePasswordInput />
          <COneTimePasswordInput />
        </COneTimePassword>
      </div>
      <CButton type="submit" color="primary">
        Manual Submit
      </CButton>
    </CForm>
  )
}

Custom layouts

Create custom one-time password layouts with separators and different field counts.

import React from 'react'
import { COneTimePassword, COneTimePasswordInput } from '@coreui/react-pro'

export const OneTimePasswordCustomLayoutsExample = () => {
  return (
    <>
      <div className="mb-3">
        <COneTimePassword label="6-digit OTP with separators">
          <COneTimePasswordInput />
          <COneTimePasswordInput />
          <COneTimePasswordInput />
          <div className="px-2 text-body-tertiary fw-bold">-</div>
          <COneTimePasswordInput />
          <COneTimePasswordInput />
          <COneTimePasswordInput />
        </COneTimePassword>
      </div>
      <div className="mb-3">
        <COneTimePassword label="9-digit OTP with separators">
          <COneTimePasswordInput />
          <COneTimePasswordInput />
          <COneTimePasswordInput />
          <div className="px-2 text-body-tertiary fw-bold">•</div>
          <COneTimePasswordInput />
          <COneTimePasswordInput />
          <COneTimePasswordInput />
          <div className="px-2 text-body-tertiary fw-bold">•</div>
          <COneTimePasswordInput />
          <COneTimePasswordInput />
          <COneTimePasswordInput />
        </COneTimePassword>
      </div>
      <div>
        <COneTimePassword label="4-digit PIN" masked>
          <COneTimePasswordInput />
          <COneTimePasswordInput />
          <COneTimePasswordInput />
          <COneTimePasswordInput />
        </COneTimePassword>
      </div>
    </>
  )
}
import React from 'react'
import { COneTimePassword, COneTimePasswordInput } from '@coreui/react-pro'

export const OneTimePasswordCustomLayoutsExample = () => {
  return (
    <>
      <div className="mb-3">
        <COneTimePassword label="6-digit OTP with separators">
          <COneTimePasswordInput />
          <COneTimePasswordInput />
          <COneTimePasswordInput />
          <div className="px-2 text-body-tertiary fw-bold">-</div>
          <COneTimePasswordInput />
          <COneTimePasswordInput />
          <COneTimePasswordInput />
        </COneTimePassword>
      </div>
      <div className="mb-3">
        <COneTimePassword label="9-digit OTP with separators">
          <COneTimePasswordInput />
          <COneTimePasswordInput />
          <COneTimePasswordInput />
          <div className="px-2 text-body-tertiary fw-bold">•</div>
          <COneTimePasswordInput />
          <COneTimePasswordInput />
          <COneTimePasswordInput />
          <div className="px-2 text-body-tertiary fw-bold">•</div>
          <COneTimePasswordInput />
          <COneTimePasswordInput />
          <COneTimePasswordInput />
        </COneTimePassword>
      </div>
      <div>
        <COneTimePassword label="4-digit PIN" masked>
          <COneTimePasswordInput />
          <COneTimePasswordInput />
          <COneTimePasswordInput />
          <COneTimePasswordInput />
        </COneTimePassword>
      </div>
    </>
  )
}

Sizing variants

One-time password input supports different sizes. You may choose from small, normal (default), and large inputs to match our similarly sized text inputs.

import React from 'react'
import { COneTimePassword, COneTimePasswordInput } from '@coreui/react-pro'

export const OneTimePasswordSizingExample = () => {
  return (
    <>
      <div className="mb-3">
        <COneTimePassword label="Large OTP input" size="lg">
          <COneTimePasswordInput />
          <COneTimePasswordInput />
          <COneTimePasswordInput />
          <COneTimePasswordInput />
          <COneTimePasswordInput />
          <COneTimePasswordInput />
        </COneTimePassword>
      </div>
      <div className="mb-3">
        <COneTimePassword label="Default OTP input">
          <COneTimePasswordInput />
          <COneTimePasswordInput />
          <COneTimePasswordInput />
          <COneTimePasswordInput />
          <COneTimePasswordInput />
          <COneTimePasswordInput />
        </COneTimePassword>
      </div>
      <div>
        <COneTimePassword label="Small OTP input" size="sm">
          <COneTimePasswordInput />
          <COneTimePasswordInput />
          <COneTimePasswordInput />
          <COneTimePasswordInput />
          <COneTimePasswordInput />
          <COneTimePasswordInput />
        </COneTimePassword>
      </div>
    </>
  )
}
import React from 'react'
import { COneTimePassword, COneTimePasswordInput } from '@coreui/react-pro'

export const OneTimePasswordSizingExample = () => {
  return (
    <>
      <div className="mb-3">
        <COneTimePassword label="Large OTP input" size="lg">
          <COneTimePasswordInput />
          <COneTimePasswordInput />
          <COneTimePasswordInput />
          <COneTimePasswordInput />
          <COneTimePasswordInput />
          <COneTimePasswordInput />
        </COneTimePassword>
      </div>
      <div className="mb-3">
        <COneTimePassword label="Default OTP input">
          <COneTimePasswordInput />
          <COneTimePasswordInput />
          <COneTimePasswordInput />
          <COneTimePasswordInput />
          <COneTimePasswordInput />
          <COneTimePasswordInput />
        </COneTimePassword>
      </div>
      <div>
        <COneTimePassword label="Small OTP input" size="sm">
          <COneTimePasswordInput />
          <COneTimePasswordInput />
          <COneTimePasswordInput />
          <COneTimePasswordInput />
          <COneTimePasswordInput />
          <COneTimePasswordInput />
        </COneTimePassword>
      </div>
    </>
  )
}

Disabled state

Disable the entire one-time password input by adding the disabled prop.

import React from 'react'
import { COneTimePassword, COneTimePasswordInput } from '@coreui/react-pro'

export const OneTimePasswordDisabledExample = () => {
  return (
    <COneTimePassword label="Disabled OTP" disabled defaultValue="123456">
      <COneTimePasswordInput />
      <COneTimePasswordInput />
      <COneTimePasswordInput />
      <COneTimePasswordInput />
      <COneTimePasswordInput />
      <COneTimePasswordInput />
    </COneTimePassword>
  )
}
import React from 'react'
import { COneTimePassword, COneTimePasswordInput } from '@coreui/react-pro'

export const OneTimePasswordDisabledExample = () => {
  return (
    <COneTimePassword label="Disabled OTP" disabled defaultValue="123456">
      <COneTimePasswordInput />
      <COneTimePasswordInput />
      <COneTimePasswordInput />
      <COneTimePasswordInput />
      <COneTimePasswordInput />
      <COneTimePasswordInput />
    </COneTimePassword>
  )
}

Readonly state

Use the readOnly prop to make the one-time password input non-editable but still selectable.

import React from 'react'
import { COneTimePassword, COneTimePasswordInput } from '@coreui/react-pro'

export const OneTimePasswordReadonlyExample = () => {
  return (
    <COneTimePassword label="Readonly OTP input" readOnly defaultValue="123456">
      <COneTimePasswordInput />
      <COneTimePasswordInput />
      <COneTimePasswordInput />
      <COneTimePasswordInput />
      <COneTimePasswordInput />
      <COneTimePasswordInput />
    </COneTimePassword>
  )
}
import React from 'react'
import { COneTimePassword, COneTimePasswordInput } from '@coreui/react-pro'

export const OneTimePasswordReadonlyExample = () => {
  return (
    <COneTimePassword label="Readonly OTP input" readOnly defaultValue="123456">
      <COneTimePasswordInput />
      <COneTimePasswordInput />
      <COneTimePasswordInput />
      <COneTimePasswordInput />
      <COneTimePasswordInput />
      <COneTimePasswordInput />
    </COneTimePassword>
  )
}

Accessibility

The one-time password input component is designed with accessibility in mind and follows WCAG guidelines for form inputs.

  • ARIA Labels: Each input field automatically receives descriptive aria-label attributes
  • Role Attribute: The container has role="group" to indicate related form controls
  • Keyboard Navigation: Full keyboard support with arrow keys, tab, and backspace
  • Screen Reader Support: Clear announcements when values change or validation occurs
  • Focus Management: Automatic focus handling for seamless navigation

Customizing accessibility

You can customize the aria-label generation function to provide more specific descriptions:

<COneTimePassword
  ariaLabel={(index, total) => `Enter digit ${index + 1} of your ${total}-digit verification code`}
/>

Keyboard support

The one-time password input component provides comprehensive keyboard navigation support:

KeyAction
Arrow RightMove focus to next input field
Arrow LeftMove focus to previous input field
BackspaceDelete current character and move to previous field (if empty)
TabMove to next focusable element (respects linear mode)
Shift + TabMove to previous focusable element
Ctrl + V / Cmd + VPaste clipboard content and auto-fill fields

API

Check out the documentation below for a comprehensive guide to all the props you can use with the components mentioned here.