Password Input
Password input with toggle visibility (if implemented in component) and native masking.
Basic Usage
vue
<template>
<spr-input-password v-model="inputModel" label="Password" placeholder="Enter password" />
</template>
<script setup lang="ts">
import { ref } from 'vue';
const inputModel = ref('');
</script>Active State
vue
<template>
<spr-input-password v-model="inputModel" label="Password" placeholder="Enter password" active />
</template>
<script setup lang="ts">
import { ref } from 'vue';
const inputModel = ref('');
</script>Error State
vue
<template>
<spr-input-password v-model="inputModel" label="Password" placeholder="Enter password" :error="true">
<template #icon>
<Icon icon="ph:warning-circle-fill" />
</template>
</spr-input-password>
</template>
<script setup lang="ts">
import { ref } from 'vue';
const inputModel = ref('');
</script>Disabled State
vue
<template>
<spr-input-password v-model="inputModel" label="Password" placeholder="Enter password" :disabled="true" />
</template>
<script setup lang="ts">
import { ref } from 'vue';
const inputModel = ref('');
</script>API Reference
This username input shares the same props, events, slots, and validation behavior as the base Input component. Refer to the canonical API documentation here:
Only the visual intent (username context) differs; no additional props or unique events are introduced at this time.