Password field
Set a new password by typing or generating one, check it on screen and copy it; a screen reader confirms the generation without reading the password.
At least 10 characters.
Filled for you after a generated password.
<script setup lang="ts">import { ref } from 'vue'import { UiField, UiPasswordField, UiInput } from 'grani' const password = ref('') const repeat = ref('')</script> <template> <div class="flex w-full max-w-sm flex-col gap-4"> <UiField label="New password" description="At least 10 characters."> <UiPasswordField v-model="password" @generate="repeat = $event" /> </UiField> <UiField label="Repeat" description="Filled for you after a generated password."> <UiInput v-model="repeat" type="password" autocomplete="new-password" /> </UiField> </div></template>
Also called password input, password generator.
Usage
<UiPasswordField v-model="value" /> With GraniResolver in the Vite config, a template needs no import: set it up once.
API
| Name · type | Default | Description |
|---|---|---|
| Value | ||
| modelValue*string | The password (v-model); empty is ''. | |
| Behavior | ||
| lengthnumber= 16 | 16 | Length of a generated password; never under 10. |
| copyboolean= true | true | The copy button beside the field; false leaves it out, where a password must not reach the clipboard. |
| Look | ||
| placeholderstring | Hint shown while empty. | |
| sizexs | sm | md | Step of the control ladder for the field and both buttons. Unset, the app's size (createGrani({ size })), sm by default. | |
| Form and access | ||
| namestring | Native name for forms. | |
| autocompletenew-password | current-password= "new-password" | "new-password" | Password manager hint: new-password when setting one, current-password when signing in. |
| disabledboolean= false | false | Nothing can be typed, generated or copied. |
| readonlyboolean= false | false | The password is shown and copied but not changed: typing and generate are held. |
| invalidboolean= false | false | Marks the input invalid standalone. Inside UiField the error sets this. |
| idstring | Own id of the input when standalone. Inside UiField the field's id takes precedence. | |
| ariaLabelstring | Accessible name of the input when no UiField label names it. | |
Attributes: class and style stay on the outer element; the rest (native attributes, aria-*, data-testid) reach the control inside it.
When to use another component
| When you need | Take |
|---|---|
| Signing in or signing up | Input type="password" |
| The repeat field beside it | Input type="password" too |
| A secret given to copy and never typed | Copy button with an ariaLabel and neither label nor truncate, which would put it on the screen and in its name |