Form
Password Input
A password input component
Overview
The Password Input component provides a text field for passwords with optional show/hide toggle so users can confirm what they typed while keeping the default state masked.
Key Business & UX Benefits
- Masked input by default protects passwords from shoulder surfing.
- Show/hide toggle lets users verify input without leaving the field.
- Consistent with other inputs and Field for labels and errors.
- Accessible and works with password managers.
Pro-Tip from Larry: Keep the show/hide toggle so users can confirm their password when needed.
Usage
PasswordInput
Feature List
- Masked input with optional show/hide toggle
- Accessible label and description support
- Integration with Field for form layout
- Compatible with password managers
API Reference
| Prop | Default | Type |
|---|---|---|
modelValue | string | |
placeholder | string | |
disabled | false | boolean |
readOnly | false | boolean |
required | false | boolean |
id | string | |
isError | false | boolean |
name | string | |
intent | "current-password" | "new-password" | "one-time-code"Intent of the input. Used to set the autocomplete attribute. |
| Event | Type |
|---|---|
update:modelValue | (event: "update:modelValue", value: string | undefined): void |