PinInput

A short code typed one character per box — a sign-in code, a PIN.

Import it from rei-kit: import { PinInput } from 'rei-kit'

Open PinInput in the live documentation, where every prop below is a control you can change, in four materials and ten palettes.

Usage

<script setup lang="ts">
import { ref } from 'vue'
import { PinInput } from 'rei-kit'

const code = ref('')

function verify(value: string) {
  // Send the code — it fires once, when the last box is filled.
  console.log(value)
}
</script>

<template>
  <PinInput
    v-model="code"
    label="Verification code"
    :cell-label="(n, total) => `Digit ${n} of ${total}`"
    @complete="verify"
  />
</template>

Props

Props
Prop	Type	Required or default	What it is for
`length`	`number`	6	How many characters.
`label`	`string`	yes	The group's accessible name, e.g. "Verification code".
`cellLabel`	`(position: number, total: number) => string`	yes	Each box's accessible name, from its 1-based position: `(n, total) => \`Digit ${n} of ${total}\``.
`type`	`'numeric' \| 'alphanumeric'`	'numeric'	`numeric` takes digits and opens the number pad; `alphanumeric` takes letters too.
`mask`	`boolean`	false	Show dots instead of the characters, for a PIN.
`error`	`string`	''	A message under the boxes; also marks them invalid.
`disabled`	`boolean`	false

About rei-kit

rei-kit is an accessible Vue 3 and Tailwind CSS 4 component library: 106 components, themed by role rather than by colour on three independent axes — ten WCAG-checked palettes, four materials and light or dark, each switched with one attribute. Typed, tested, SSR-safe, no runtime dependencies, MIT.

pnpm add rei-kit · npm · GitHub