Vue Password Input Component

Password Input

This component is part of CoreUI PRO – a powerful UI library with over 250 components and 25+ templates, designed to help you build modern, responsive apps faster. Fully compatible with Angular, Bootstrap, React.js, and Vue.js.

Get CoreUI PRO

A fully featured Vue password input component with Bootstrap styling. Includes show/hide visibility toggle, validation states, sizing, and full accessibility support.

Available in Other JavaScript Frameworks

CoreUI Vue Password Input Component is also available for Angular, Bootstrap, and React. Explore framework-specific implementations below:

On this page

Example

The <CPasswordInput /> is a fully customizable Vue password input field designed for security-focused forms. It includes a toggle to show or hide password visibility, Bootstrap-based sizing options, and full support for v-model, validation, readonly, and disabled states. Ideal for login forms, registration pages, and secure input screens in Vue 3 apps.

vue

<template>
  <CForm>
    <div class="mb-3">
      <CPasswordInput label="Password" placeholder="Enter your password" />
    </div>
    <div class="mb-3">
      <CPasswordInput
        label="Password with value"
        placeholder="Enter your password"
        value="Top secret"
      />
    </div>
    <div>
      <CPasswordInput
        v-model="password"
        label="Password with v-model value"
        placeholder="Enter your password"
      />
    </div>
  </CForm>
</template>

<script setup>
import { CForm, CPasswordInput } from '@coreui/vue'
import { ref } from 'vue'
const password = ref('Top secret')
</script>

Sizing

Use the size prop to adjust the height and padding of the password input. Supports Bootstrap’s sizing classes:

size="sm" – small input
size="lg" – large input

vue

<template>
  <CPasswordInput size="lg" placeholder="Large password input" aria-label="Large input" />
  <CPasswordInput placeholder="Default password input" aria-label="Default input" />
  <CPasswordInput size="sm" placeholder="Small password input" aria-label="Small input" />
</template>

<script setup>
import { CPasswordInput } from '@coreui/vue'
import { ref } from 'vue'
const password = ref('Top secret')
</script>

Disabled

To disable editing, add the disabled prop. The field becomes inactive and is visually dimmed.

vue

<template>
  <CPasswordInput placeholder="Disabled input" aria-label="Disabled input example" disabled />
  <CPasswordInput
    placeholder="Disabled readonly input"
    aria-label="Disabled readonly input example"
    disabled
    readOnly
  />
</template>

<script setup>
import { CPasswordInput } from '@coreui/vue'
import { ref } from 'vue'
const password = ref('Top secret')
</script>

Readonly

Use the readOnly prop to make the password field non-editable, while still allowing users to select and copy the value.

vue

<template>
  <CPasswordInput
    placeholder="Readonly input"
    aria-label="Readonly input example"
    value="You can copy this"
    readOnly
  />
</template>

<script setup>
import { CPasswordInput } from '@coreui/vue'
import { ref } from 'vue'
const password = ref('Top secret')
</script>