InputPassword

1<script setup lang="ts">2import { InputPassword, Label, StackPanel } from '@vitral/vue';3import { ref } from 'vue';4 5const password = ref('');6</script>7 8<template>9    <StackPanel spacing="0.375rem" style="min-width: 16rem">10        <Label for="pw-basic">Password</Label>11        <InputPassword id="pw-basic" v-model="password" autocomplete="new-password" />12    </StackPanel>13</template>

1<script setup lang="ts">2import { InputPassword, Label, StackPanel } from '@vitral/vue';3import { ref } from 'vue';4 5const password = ref('');6</script>7 8<template>9    <StackPanel spacing="0.375rem" style="min-width: 16rem">10        <Label for="pw-reveal">Password</Label>11        <InputPassword id="pw-reveal" v-model="password" toggle-mask clearable :feedback="false" autocomplete="current-password" />12    </StackPanel>13</template>

1<script setup lang="ts">2import { InputPassword, Label, StackPanel } from '@vitral/vue';3import { ref } from 'vue';4 5const password = ref('');6</script>7 8<template>9    <StackPanel spacing="0.375rem" style="min-width: 16rem">10        <Label for="pw-rules">New password</Label>11        <InputPassword id="pw-rules" v-model="password" toggle-mask prompt-label="Choose a password" strong-regex="^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.{12,})">12            <template #footer>13                <ul style="margin: 0; padding-inline-start: 1.25rem; font-size: 0.8125rem">14                    <li>One lowercase and one uppercase letter</li>15                    <li>At least one digit</li>16                    <li>Twelve characters for a strong password</li>17                </ul>18            </template>19        </InputPassword>20    </StackPanel>21</template>

1<script setup lang="ts">2import { InputPassword } from '@vitral/vue';3</script>4 5<template>6    <InputPassword size="small" aria-label="Small" :feedback="false" />7    <InputPassword variant="filled" aria-label="Filled" :feedback="false" />8    <InputPassword invalid aria-label="Invalid" :feedback="false" />9    <InputPassword disabled aria-label="Disabled" model-value="secret" />10</template>