Pin Input

A sequence of one-character alphanumeric inputs. Useful for PIN codes, verification codes, etc.

Source code

Click here to see the source code for this component on GitHub. Feel free to copy it and adjust it for your own use.

npx ui-thing@latest add pin-input

Passing a value to the placeholder prop will render a placeholder character in each input.

Placeholder

Passing a value to the separator prop will render a separator character between each input.

Separator

-----

The complete event is emitted when the user has entered a value in all inputs.

Enter OTP sent to your email

Pagination

Displays data in paged format and provides navigation between pages.

Popover

Displays rich content in a portal, triggered by a button.