- Components
- 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.
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]+$"
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.
