Advanced forms
Pin Input
The Pin Input component enables quick entry for scenarios such as multi-factor authentication, offering features like regex validation and clipboard pasting.
Basic example
Default
Basic pin input example.
Placeholder
Pin input with placeholder.
Types
Outline
Default pin input example.
Underline
Apply the `pin-input-underline` class to change the pin input style to an underline.
Sizes
Outline
Add responsive class `pin-input-{size}` where `{size} = xs|sm|md|lg|xl` for pin input of different sizes.
Underline
Underline pin input sizes example.
Illustrations
Disabled
To disable pointer events and prevent focusing, add the `disabled` boolean attribute to an input.
Length
Control the number of pin input as per you preference.
Input type
By default, this accepts both letters and numbers. To restrict input to numbers/letters only, set `"availableCharsRE"` to `"^[a-z]+$"` / `"^[0-9]+$"`.
Regex type
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]+$"`.
Protected
Conceal the entered value by setting the type attribute to "password".
Display number keyboard
To display a numeric keyboard on iOS (note: this does not apply for Android), Use `autocomplete="one-time-code"` and `type="tel"`.
Destroy/Reinitialize
The `destroy` <a href="#destroy-method" class="link link-primary">method</a> is provided to facilitate the destruction of a pin-input element.
JavaScript behavior
Events — Event usage
METHOD| DESCRIPTION | RETURNING VALUE `on:completed`|The event is triggered when the PIN has set up.| Current value
JavaScript
const el = HSPinInput.getInstance('#pin-input-log');
el.on('completed', ({instance}) => {console.log("Hello")});Class referenceThe component, style, color, state, size and modifier classes available for this component.
| Class | Type | Description |
|---|---|---|
pin-input | component | Container style class. |
pin-input-underline | style | Underline style. |
pin-input-active:{tw-utility-class} | variant | Adds tailwind classes when the pin input is active (triggered when the PIN has set up). |
pin-input-xs | size | Pin input with extra small size. |
pin-input-sm | size | Pin input with small size. |
pin-input-md | size | Pin input with medium(default) size. |
pin-input-lg | size | Pin input with large size. |
pin-input-xl | size | Pin input with large size. |