1. Components
  2. otp

Otp / Pin

Segmented input field designed for verification codes and MFA.

Demo 

<x-ui.otp class="max-w-xs">
    <x-ui.otp.input size="none" class="size-10 max-w-10" />
    <x-ui.otp.input size="none" class="size-10 max-w-10" />
    <x-ui.otp.input size="none" class="size-10 max-w-10" />
    <x-ui.otp.input size="none" class="size-10 max-w-10" />
    <x-ui.otp.input size="none" class="size-10 max-w-10" />
</x-ui.otp>

Installation

  1. Add the component

    Shell 
    flexi-cli add otp

  2. Install Otp Plugin

    This component require JS. By default we're using our own Interactive Component Library Flexilla . Install this only if you didn't accept dependencies installation during component addition.
    1. With Alpine
      2. Shell 
      npm i @flexilla/alpine-pin-input

      Add plugin in flexilla.js

      flexilla.js 
      import AlpinePinInput from "@flexilla/alpine-pin-input"

Alpine.plugin(AlpinePinInput)
    2. Without Alpine
      3. Make sure that the dropdown package is not installed
      Shell 
      npm i @flexilla/pin-input

      Initialize Pin Input in flexilla.js

      flexilla.js 
      import { PinInput} from "@flexilla/pin-input"

// init Pin Input for all Element with data-app-otp attribute
PinInput.autoInit('[data-app-otp]')

Examples

Numeric OTP 

<x-ui.otp validation="number" class="max-w-xs">
    <x-ui.otp.input size="none" class="size-10 max-w-10" />
    <x-ui.otp.input size="none" class="size-10 max-w-10" />
    <x-ui.otp.input size="none" class="size-10 max-w-10" />
    <x-ui.otp.input size="none" class="size-10 max-w-10" />
    <x-ui.otp.input size="none" class="size-10 max-w-10" />
</x-ui.otp>

Alphabetic OTP 

<x-ui.otp validation="alpha" class="max-w-xs">
    <x-ui.otp.input size="none" class="size-10 max-w-10" />
    <x-ui.otp.input size="none" class="size-10 max-w-10" />
    <x-ui.otp.input size="none" class="size-10 max-w-10" />
    <x-ui.otp.input size="none" class="size-10 max-w-10" />
    <x-ui.otp.input size="none" class="size-10 max-w-10" />
</x-ui.otp>

Alpha Numeric OTP 

<x-ui.otp validation="alphanumeric" class="max-w-xs">
    <x-ui.otp.input size="none" class="size-10 max-w-10" />
    <x-ui.otp.input size="none" class="size-10 max-w-10" />
    <x-ui.otp.input size="none" class="size-10 max-w-10" />
    <x-ui.otp.input size="none" class="size-10 max-w-10" />
    <x-ui.otp.input size="none" class="size-10 max-w-10" />
</x-ui.otp>

References

OTP Component

The OTP (One-Time Password) component creates a group of input fields designed for entering verification codes. It provides built-in validation and auto-focus management between fields.

OTP Container

Prop Type Default Description
validation string null
Defines the input validation pattern. Can be one of:
  • number - Only numeric input (0-9)
  • alpha - Only alphabetic characters (a-z, A-Z)
  • alphanumeric - Both letters and numbers
  • Custom regex pattern - Any valid JavaScript regex pattern
class string ''
Additional CSS classes for the OTP container.

OTP Input

Prop Type Default Description
size string 'md'
Controls the size of the input. Can be one of: 'xs', 'sm', 'md', 'lg', 'xl'.
type string 'text'
The HTML input type. Typically 'text' or 'password'.
radius string 'lg'
Border radius of the input. Can be one of: 'none', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', 'full'.
disabled boolean false
When true, the input is disabled and not interactive.
readonly boolean false
When true, the input is read-only and cannot be modified.
noBorder boolean false
When true, removes the border from the input.
unStylled boolean false
When true, removes all default styling from the input.

JavaScript API

The OTP component is powered by the @flexilla/pin-input package. For advanced usage and methods, refer to the Flexilla Pin Input Documentation .

Accessibility

The OTP component is built with accessibility in mind:

  • Proper ARIA attributes for screen readers
  • Keyboard navigation support (Tab, Shift+Tab, Arrow keys)
  • Auto-focus management between fields
  • Paste support for easier code entry
Prev
Range

Slider component for...

Next
On this page