Skip to content

Input 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

PropsTypeDefaultDescription
sizeStringmdInput size variant, valid value: xs, sm, md, lg
placeholderString-Input placeholder
disabledBooleanfalseDisabled state
readonlyBooleanfalseReadonly state
errorBooleanfalseError state
clearableBooleanfalseEnable clear button
acceptString-Whitelist character can be inputted
modelValueString-v-model value
container-classString or Array or Object-CSS class to add in the input password container

Slots

NameDescription
There no slots here

Events

NameArgumentsDescription
changeStringEvent when value changed
clear-Event when clear button clicked

See Also

Released under the MIT License.