PersonaInput Password
Base password-input form.
Usage
Simple Usage
preview
vue
<template>
<p-input-password />
</template>Sizing
preview
vue
<template>
<p-input-password size="xs" />
<p-input-password size="sm" />
<p-input-password size="md" />
<p-input-password size="lg" />
</template>Disabled State
preview
vue
<template>
<p-input-password disabled />
</template>Readonly State
preview
vue
<template>
<p-input-password readonly />
</template>Error State
preview
vue
<template>
<p-input-password error />
</template>Clearable
preview
vue
<template>
<p-input-password clearable />
</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-password accept="0-9" placeholder="Numeric Only (Manual)" />
<p-input-password accept="numeric" placeholder="Numeric Only (using Preset)" />
</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-password v-model="result" />
</template>API
Props
| Props | Type | Default | Description |
|---|---|---|---|
size | String | md | Input size variant, valid value: xs, sm, md, lg |
placeholder | String | - | Input placeholder |
disabled | Boolean | false | Disabled state |
readonly | Boolean | false | Readonly state |
error | Boolean | false | Error state |
clearable | Boolean | false | Enable clear button |
accept | String | - | Whitelist character can be inputted |
modelValue | String | - | v-model value |
container-class | String or Array or Object | - | CSS class to add in the input password container |
Slots
| Name | Description |
|---|---|
| There no slots here | |
Events
| Name | Arguments | Description |
|---|---|---|
change | String | Event when value changed |
clear | - | Event when clear button clicked |