Skip to content
On this page

Input Pin

One at time input form.

Usage

Simple Usage

preview
vue
<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
vue
<template>
  <p-input-pin length="3" />
</template>

Sizing

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

preview
vue
<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
vue
<template>
  <p-input-pin disabled />
</template>

Readonly State

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

Error State

preview
vue
<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
vue
<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:

-

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

API

Props

PropsTypeDefaultDescription
lengthNumber5Number of input
sizeStringmdInput size variant, valid value: xs, sm, md, lg
disabledBooleanfalseDisabled state
readonlyBooleanfalseReadonly state
errorBooleanfalseError state
acceptString-Whitelist character can be inputted
modelValueString-v-model value

Slots

NameDescription
There no slots here

Events

NameArgumentsDescription
changeStringEvent when value changed

See Also

Released under the MIT License.