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.
Default PIN input
Create a standard multi-field PIN input for one-time codes and verification flows.
Placeholder characters
Show placeholder characters in each field before the user enters a code.
Custom character regex
Use a custom regular expression to limit which characters are accepted. In this example, only digits from 0 to 3 are allowed.
iOS one-time-code autofill
Show iOS one-time-code suggestions by using autocomplete="one-time-code" together with type="tel".
Destroy and reinitialize
Use the destroy method before reinitializing the component when PIN input instances need to be rebuilt.