Input Pin

One at time input form.

Usage

Simple Usage

preview

<template>
  <p-input-pin />
</template>

Number of Input

You can set how many input digit do you want with prop length, default is 5.

preview

<template>
  <p-input-pin length="3" />
</template>

Sizing

Input has 4 variants size: xs, sm, md, lg, default is md.

preview

<template>
  <p-input-pin size="xs" />
  <p-input-pin size="sm" />
  <p-input-pin size="md" />
  <p-input-pin size="lg" />
</template>

Disabled State

preview

<template>
  <p-input-pin disabled />
</template>

Readonly State

preview

<template>
  <p-input-pin readonly />
</template>

Error State

preview

<template>
  <p-input-pin error />
</template>

Accept Character

You can filter what characters are allowed to be input using the prop accept. The value can be RegExp, or using available preset.

preview

<template>
  <p-input-pin accept="numeric" />
</template>

👉 See Available Preset for more information

Binding v-model

Like other input, input value can be binding with v-model.

preview

result:

-

<template>
  <p-input-pin v-model="result" />
</template>

API

Props

Props	Type	Default	Description
length	Number	5	Number of input
size	String	md	Input size variant, valid value: xs, sm, md, lg
disabled	Boolean	false	Disabled state
readonly	Boolean	false	Readonly state
error	Boolean	false	Error state
accept	String	-	Whitelist character can be inputted
modelValue	String	-	v-model value

Slots

Name	Description
There no slots here

Events

Name	Arguments	Description
change	String	Event when value changed

See Also

• Form Group
• Input Group