Forms
PasswordInput
A password input with a show/hide toggle and an optional live checklist of length/character requirements.
<UiPasswordInput />Model value
modelValue is the password itself, bound with v-model. It's always the plain text — the reveal toggle only swaps the input's own type, so what you read here doesn't change with what the reader can see.
update:valid fires (including once immediately on mount) whenever whether all active requirements are met changes — use v-model:valid to read it without checking the requirements yourself.
Placeholder
placeholder is the hint shown while the field is empty. Keep it to what the field is rather than what's expected of it — the requirement checklist below the input is where rules belong, and a placeholder disappears the moment someone starts typing.
Disabled
disabled switches off the field and its reveal button together, for a form that's submitting or a credential that can't be changed here.
Variant
variant picks between the ringed outline field on the page background and the filled, ringless soft one. Both get their own section further down.
Icon left
iconLeft puts an icon at the start of the field. There's no default one, so a bare password input has none — lock is the conventional choice where the field sits among other icon-led inputs and would otherwise look misaligned.
icon-left accepts any icon name, same as Input — it's just a leading glyph (e.g. password), not tied to validity/requirements state.
Revealable
revealable shows the eye button that toggles the password's visibility. Turn it off where a policy forbids revealing the field.
revealable="false" removes the eye toggle entirely, leaving a plain masked input with no way to reveal the typed value.
Min length
minLength is the shortest acceptable password, and setting it adds a length row to the live checklist below the field. Omit it and no length rule is enforced or shown at all — there's no hidden default minimum.
- At least 8 characters
Require uppercase
requireUppercase demands at least one capital letter and adds the matching row to the checklist. Like the other require* flags it's purely a display and validity signal — the field never blocks typing, it just reports whether the rule is met.
- One uppercase letter
Require lowercase
requireLowercase demands at least one lowercase letter. It's rarely worth setting on its own — its value is as the counterpart to requireUppercase, where the pair together forces mixed case rather than a shouted password.
- One uppercase letter
- One lowercase letter
Require number
requireNumber demands at least one digit, anywhere in the value.
- One number
Require special char
requireSpecialChar demands at least one character that is neither a letter nor a digit. Anything non-alphanumeric counts, punctuation and spaces included, so the rule doesn't quietly rule out a passphrase.
- One special character
The special-character check (require-special-char) is /[^A-Za-z0-9]/ — spaces count as satisfying it, same as symbols.
Show requirements
showRequirements renders the live checklist under the field, and is on by default whenever at least one rule is set — with no rules it has nothing to draw and does nothing. Set it to false to keep the rules working while hiding the list, for a sign-in field where the rules exist but reciting them would be noise.
- At least 8 characters
- One uppercase letter
- One number
- One special character
Not valid yet
The requirements checklist only shows entries for require*/min-length props you actually set — an entry never appears just because the prop exists, and the whole list stays hidden if none are set, regardless of show-requirements.
`variant="soft"`
A filled, tinted background with no ring.
Wrapped in `FormField`
- At least 8 characters
API Reference
Generated from the component's source — props, slots and emits as the component actually declares them.
Props
numberbooleantrueEmits
update:modelValue[value: string]update:valid[value: boolean]Types
interface PasswordRequirement {
label: string;
met: boolean;
}