PersonaInput 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>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>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
| Props | Type | Default | Description |
|---|---|---|---|
length | Number | 5 | Number of input |
disabled | Boolean | false | Disabled state |
readonly | Boolean | false | Readonly state |
error | Boolean | false | Error state |
modelValue | String | - | v-model value |
Slots
| Name | Description |
|---|---|
| There no slots here | |
Events
| Name | Arguments | Description |
|---|---|---|
change | String | Event when value changed |