advanced forms
Tailwind CSS
Pin Input The Pin Input component facilitates quick PIN entry for scenarios like multi-factor authentication, supporting features like regex validation and clipboard pasting.
Basic pin input example.
Copy
toggleRTL($refs.previewFrame), 100);
}" class="size-9.5 border-neutral/10 rounded-btn text-base-content hover:bg-neutral/[0.03] flex items-center justify-center gap-2 border max-sm:hidden">
Pin input with placeholder.
Copy
toggleRTL($refs.previewFrame), 100);
}" class="size-9.5 border-neutral/10 rounded-btn text-base-content hover:bg-neutral/[0.03] flex items-center justify-center gap-2 border max-sm:hidden">
Default pin input example.
Copy
toggleRTL($refs.previewFrame), 100);
}" class="size-9.5 border-neutral/10 rounded-btn text-base-content hover:bg-neutral/[0.03] flex items-center justify-center gap-2 border max-sm:hidden">
Apply the pin-input-underline
class to change the pin input style to an underline.
Copy
toggleRTL($refs.previewFrame), 100);
}" class="size-9.5 border-neutral/10 rounded-btn text-base-content hover:bg-neutral/[0.03] flex items-center justify-center gap-2 border max-sm:hidden">
Pin input has 3 size small default and large. Use pin-input-sm
for small size and pin-input-lg
for large size.
Copy
toggleRTL($refs.previewFrame), 100);
}" class="size-9.5 border-neutral/10 rounded-btn text-base-content hover:bg-neutral/[0.03] flex items-center justify-center gap-2 border max-sm:hidden">
Underline pin input sizes example.
Copy
toggleRTL($refs.previewFrame), 100);
}" class="size-9.5 border-neutral/10 rounded-btn text-base-content hover:bg-neutral/[0.03] flex items-center justify-center gap-2 border max-sm:hidden">
To disable pointer events and prevent focusing, add the disabled
boolean attribute to an input.
Copy
toggleRTL($refs.previewFrame), 100);
}" class="size-9.5 border-neutral/10 rounded-btn text-base-content hover:bg-neutral/[0.03] flex items-center justify-center gap-2 border max-sm:hidden">
Control the number of pin input as per you preference.
Copy
toggleRTL($refs.previewFrame), 100);
}" class="size-9.5 border-neutral/10 rounded-btn text-base-content hover:bg-neutral/[0.03] flex items-center justify-center gap-2 border max-sm:hidden">
By default, this accepts both letters and numbers. To restrict input to numbers/letters only, set "availableCharsRE"
to "^[a-z]+$"
/ "^[0-9]+$"
.
Copy
toggleRTL($refs.previewFrame), 100);
}" class="size-9.5 border-neutral/10 rounded-btn text-base-content hover:bg-neutral/[0.03] flex items-center justify-center gap-2 border max-sm:hidden">
To restrict the pin input to accept only specific numbers, you can use a regular expression. For example, to ensure the pin input accepts only the numbers 1 to 5, set "availableCharsRE"
to "^[1-5]+$"
.
Copy
toggleRTL($refs.previewFrame), 100);
}" class="size-9.5 border-neutral/10 rounded-btn text-base-content hover:bg-neutral/[0.03] flex items-center justify-center gap-2 border max-sm:hidden">
Conceal the entered value by setting the type attribute to “password”.
Copy
toggleRTL($refs.previewFrame), 100);
}" class="size-9.5 border-neutral/10 rounded-btn text-base-content hover:bg-neutral/[0.03] flex items-center justify-center gap-2 border max-sm:hidden">
To display a numeric keyboard on iOS (note: this does not apply for Android), Use autocomplete="one-time-code"
and type="tel"
.
Copy
toggleRTL($refs.previewFrame), 100);
}" class="size-9.5 border-neutral/10 rounded-btn text-base-content hover:bg-neutral/[0.03] flex items-center justify-center gap-2 border max-sm:hidden">
FlyonUI is powered by Preline’s unstyled, headless Tailwind plugins to deliver accessible and responsive user interfaces. The HSPinInput
object is contained within the global window
object.
Assign an ID to data-pin-input
, and you can then trigger an event using that ID.
Below is a demonstration of how to use the event. We’ve included JavaScript to handle the events, allowing it to execute when the corresponding event is fired. To test these events, monitor your console.
Copy
Copy
toggleRTL($refs.previewFrame), 100);
}" class="size-9.5 border-neutral/10 rounded-btn text-base-content hover:bg-neutral/[0.03] flex items-center justify-center gap-2 border max-sm:hidden">
When pin input is completed example.