1. Components
  2. PIN Input

Advanced Forms

Tailwind CSS PIN Input

The PIN Input Component is designed for scenarios that require PIN code entry, such as multi-factor authentication processes. It enhances the user experience by enabling fast digit input, which is essential during security verifications via phone, email or authentication tools. It offers several features such as regex type, pasting from clipboard and more.

Requires JS

Note that this component requires the use of our Pin Input plugin, else you can skip this message if you are already using Preline UI as a package.

Learn more

Basic usage

A basic usage of PIN Input.

Placeholder

Basic PIN Input example with placeholder.

Types

Gray input

Gray input variant.

Underline input

Underline input variant.

Focus effect

PIN Input size becomes slightly bigger on focus.

Length

Control however it suits you.

Type

By default, it accepts letters and numbers. To allow numbers only, use "availableCharsRE": "^[0-9]+$".

Regex type

Use regular expression to validate user input. Characters that do not match given expression will be disregarded. For example, to create a PIN Input that will accept only numbers from 0 to 3, set "availableCharsRE": "^[0-3]+$"

Masked

Mask the entered value, with type="password".

Show PIN code suggest on iOS keyboard

To show the suggested PIN code on the keyboard on iOS (it's not applicable to Android), use autocomplete="one-time-code" and type="tel".

Disabled

Add the disabled boolean attribute on an input to remove pointer events, and prevent focusing.

Sizes

Inputs stacked small to large sizes.

Basic usage in modal window.

Destroy and Reinitialize New

Provides destroy method that helps to destroy a pin input.