Password

CPassword is an extension to the standard password input with a strength indicator and toggle mask.

Basic

CPassword is used as a controlled component with v-model and feedback disabled.

<template>
  <CPassword v-model="value" :feedback="false" />
</template>

<script setup lang="ts">
import { ref } from 'vue';

const value = ref('');
</script>

Meter

Strength meter is displayed as a popup while a password is being entered.

<template>
  <CPassword v-model="value" />
</template>

<script setup lang="ts">
import { ref } from 'vue';

const value = ref('');
</script>

Toggle Mask

When toggleMask is present, an icon is displayed to show the value as plain text.

<template>
  <CPassword v-model="value" toggleMask :feedback="false" />
</template>

<script setup lang="ts">
import { ref } from 'vue';

const value = ref('');
</script>

Filled

Specify the variant property as filled to display the component with a higher visual emphasis than the default outlined style.

<template>
  <CPassword
      v-model="value"
      variant="filled"
      :feedback="false"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue';

const value = ref('');
</script>

Sizes

CPassword provides small and large sizes as alternatives to the base.

<template>
  <div class="card flex flex-col items-center gap-4">
    <CPassword
        v-model="value1"
        :feedback="false"
        size="small"
        placeholder="Small"
    />
    <CPassword
        v-model="value2"
        :feedback="false"
        placeholder="Normal"
    />
    <CPassword
        v-model="value3"
        :feedback="false"
        size="large"
        placeholder="Large"
    />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const value1 = ref('');
const value2 = ref('');
const value3 = ref('');
</script>

Invalid

Invalid state is displayed using the invalid prop to indicate a failed validation.

<template>
  <CPassword
      v-model="value"
      :invalid="!value"
      :feedback="false"
      placeholder="Password"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue';

const value = ref('');
</script>

Disabled

When disabled is present, the element cannot be edited and focused.

<template>
  <CPassword
      v-model="value"
      disabled
      placeholder="Disabled"
      :feedback="false"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue';

const value = ref('');
</script>