Input Password

Base password-input form.

Usage

Simple Usage

preview

<template>
  <p-input-password />
</template>

Sizing

preview

<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

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

Readonly State

preview

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

Error State

preview

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

Clearable

preview

<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

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

-

<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

See Also

• Input
• Input Group
• Strengthbar