This page looks best with JavaScript enabled

Toggle to hide or show password in Vuetify

 ·   ·  ☕ 1 min read

You can do the following in a password box to hide or show passwords on click.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
<template>
  <v-text-field
    name="password"
    :value="myPass"
    label="Enter password"
    :append-icon="value ? 'visibility' : 'visibility_off'"
    @click:append="() => (value = !value)"
    :type="value ? 'password' : 'text'"
  ></v-text-field>
</template>

<script>
  export default {
    data() {
      return {
        value: String,
      };
    },
  };
</script>

Password is captured in a v-text-field element and we are doing a couple of things here -

  1. Use ‘show’ or ‘hide’ icons based on whether password is shown in plain text or as a hidden item (append-icon). We use type to be password or text to achieve this
  2. Show or hide password when user clicks on the appended icon

The end-result -

If you click on the icon to show password -

Stay in touch!
Share on

Prashanth Krishnamurthy
WRITTEN BY
Prashanth Krishnamurthy
Technologist | Creator of Things


What's on this Page