Pin Input

For pin or verification codes with auto-focus transfer and masking options

Demo

React
Vue

Type

Count

Invalid

Disabled

Read only

Value:""

Usage

React
Vue

import { PinInput } from '@fintech-sandpit/ui/react';

return (
  <PinInput
    count={6}
    type="numeric"
    otp
  />
);

<script setup lang="ts">
import { PinInput } from '@fintech-sandpit/ui/vue';
</script>

<template>
  <PinInput
    :count="6"
    type="numeric"
    otp
  />
</template>

Props

React
Vue

Name	Type	Default	Description
`size`	`Size`	`md`	Size of the pin input
`count`	`number`	`4`	Amount of input fields
`type`	`PinType`	`alphanumeric`	Type of the pin input
`placeholder`	`string`	`○`	Placeholder text of the pin input
`invalid`	`boolean`	`false`	Whether the pin input is invalid
`disabled`	`boolean`	`false`	Whether the pin input is disabled
`readOnly`	`boolean`	`false`	Whether the pin input is read only
`name`	`string`	—	Name of the pin input
`otp`	`boolean`	`false`	Whether the pin input is an OTP input

Name	Type	Default	Description
`size`	`Size`	`md`	Size of the pin input
`count`	`number`	`4`	Amount of input fields
`type`	`PinType`	`alphanumeric`	Type of the pin input
`placeholder`	`string`	`○`	Placeholder text of the pin input
`invalid`	`boolean`	`false`	Whether the pin input is invalid
`disabled`	`boolean`	`false`	Whether the pin input is disabled
`read-only`	`boolean`	`false`	Whether the pin input is read only
`name`	`string`	—	Name of the pin input
`otp`	`boolean`	`false`	Whether the pin input is an OTP input

Name	Type	Description
`onComplete`	`(value: string) => void`	Event handler for when the pin input is completed

Name	Payload	Description
`complete`	`string`	Event emitted when the pin input is completed

Types

type PinType = 'alphanumeric' | 'numeric' | 'alphabetic'
type Size = 'xs' | 'sm' | 'md' | 'lg' | 'xl'