Skip to content

PasswordInput

An input element which adds a toggle to show the contents of the input field. Replicates the behaviour of input elements of type password on some browsers but ensures consistent styling. Attributes are passed on the input element except class which is exclusively applied to the wrapping div. A disabled attribute is applied to the toggle button.

html
<password-input
    v-model="password"
    placeholder="Your secret"
    class="w-full"
/>

Result

A disabled component

html
<password-input
    v-model="password"
    :disabled="true"
    placeholder="Your secret"
    class="w-full"
/>

Result

Properties

NameTypeDefaultDescription
modelValueStringThe value of the wrapped input element

Events

NameArgumentsDescription
update:moodelValuepasswordTextEmitted when input event of the wrapped input element is triggered