Pin Input

#Basic usage

Verification code

pin-input/basic.vue

<script setup lang="ts">
import { PinInput } from "@bysages/vue";
</script>

<template>
  <PinInput.Root>
    <PinInput.Label>Verification code</PinInput.Label>
    <PinInput.Control>
      <PinInput.Input v-for="(v, i) in [0, 1, 2, 3]" :key="i" :index="i" />
    </PinInput.Control>
    <PinInput.HiddenInput />
  </PinInput.Root>
</template>

#Props

#Control

A styled part — no props of its own; it takes the anatomy's shared styling.

#HiddenInput

A styled part — no props of its own; it takes the anatomy's shared styling.

#Input

Prop	Type	Default	Description
`index`	`number`		—

#Label

A styled part — no props of its own; it takes the anatomy's shared styling.

#Root

Prop	Type	Default	Description
`size`	`String as PropType<"sm" \| "md" \| "lg">`	`"md"`	One rung of the control-height ladder each seal stands on.
`autoFocus`	`boolean`		Whether to auto-focus the first input.
`autoSubmit`	`boolean`		Whether to auto-submit the owning form when all inputs are filled.
`blurOnComplete`	`boolean`		Whether to blur the input when the value is complete
`count`	`number`		The number of inputs to render to improve SSR aria attributes. This will be required in next major version.
`defaultValue`	`string[]`		The initial value of the the pin input when rendered. Use when you don't need to control the value of the pin input.
`disabled`	`boolean`		Whether the inputs are disabled
`form`	`string`		The associate form of the underlying input element.
`id`	`string`		The unique identifier of the machine.
`ids`	`Partial<{ root: string; hiddenInput: string; label: string; control: string; input(id: string): string; }>`		The ids of the elements in the pin input. Useful for composition.
`invalid`	`boolean`		Whether the pin input is in the invalid state
`mask`	`boolean`		If `true`, the input's value will be masked just like `type=password`
`modelValue`	`string[]`		The v-model value of the pin input
`name`	`string`		The name of the input element. Useful for form submission.
`otp`	`boolean`		If `true`, the pin input component signals to its fields that they should use `autocomplete="one-time-code"`.
`pattern`	`string`		The regular expression that the user-entered input value is checked against.
`placeholder`	`string`	`"○"`	The placeholder text for the input
`readOnly`	`boolean`		Whether the pin input is in the valid state
`required`	`boolean`		Whether the pin input is required
`sanitizeValue`	`(value: string) => string`		Function to sanitize pasted values before validation. Useful for stripping dashes, spaces, or other formatting.
`selectOnFocus`	`boolean`		Whether to select input value when input is focused
`translations`	`pinInput.IntlTranslations`		Specifies the localized strings that identifies the accessibility elements and their states
`type`	`'alphanumeric' \| 'numeric' \| 'alphabetic'`	`"numeric"`	The type of value the pin-input should allow