Password
Overview
A password input field with a toggle button to show/hide the entered value. Use it for login forms, sign-up forms, or any sensitive credential entry. It composes the input family base with a visibility switch, and supports clearable mode. For non-sensitive text use SInput.
Usage
Features
- 📏 6 sizes: xs, sm, md, lg, xl, 2xl (inherited from the input base)
- 👁 Show/hide toggle with i18n
aria-labelandaria-pressedsemantics - 🎛 Controlled / uncontrolled
visiblestate (v-model:visible+defaultVisible) - 🧹 Clearable mode with an i18n
aria-labelclear button - 🔒
disabled/readonlyguards across input, toggle, and clear elements - 📋 Native form submission via a proxied hidden input when
nameis set - 🧩 Custom
visibleslot for a bespoke toggle button - ♿ Full accessibility support — toggle naming, pressed state, axe-clean
Demos
Basic
100%
Icon
100%
API
Aria Layer
2Password
25 Props3 Emits4 Slots
Props
| Prop | Type | Default | Description |
|---|---|---|---|
class | ClassValue | — | Additional class names applied to the root element. |
size | ThemeSize | — | Visual size of the component. |
ui | Partial<PasswordUi> | — | Per-slot class overrides for the component. |
visible | boolean | — | Controlled password visibility. |
defaultVisible | boolean | false | The initial visibility state when it is not controlled. |
visibleProps | ButtonProps | — | Properties forwarded to the visible element. |
inputRef | ((el: HTMLInputElement) => void) | — | The function to set the input element. |
clearable | boolean | false | Whether to show the clear trigger. |
controlProps | InputControlProps | — | Properties forwarded to the control element. |
clearProps | InputClearProps | — | Properties forwarded to the clear element. |
defaultValue | string | — | The default value of the input |
modelValue | string | — | The controlled value of the input |
disabled | boolean | — | When `true`, prevents the user from interacting with the input. |
readonly | boolean | — | When `true`, the input is read-only. |
rootProps | BaseProps | — | Properties forwarded to the root element |
name | string | — | The name of the field. Submitted with its owning form as part of a name/value pair. |
required | boolean | — | When `true`, indicates that the user must set the value before the owning form can be submitted. |
id | string | — | Id of the input element |
autofocus | boolean | — | When `true`, the input is auto-focused. |
autocomplete | 'search' | 'name' | 'email' | 'tel' | 'url' | 'on' | 'off' | 'username' | 'current-password' | 'new-password' | 'one-time-code' | 'given-name' | 'family-name' | 'organization' | 'street-address' | 'address-level2' | 'postal-code' | 'country' | 'cc-name' | 'cc-number' | 'cc-exp' | 'cc-csc' | 'transaction-amount' | — | The autocomplete attribute of the input.
Supports the HTML autofill tokens (including password-manager values such as
`current-password` / `new-password`), in addition to the `on` / `off` switches. |
maxlength | number | — | The maximum number of characters allowed in the input |
minlength | number | — | The minimum number of characters allowed in the input |
pattern | string | — | The pattern attribute of the input |
placeholder | string | — | The placeholder of the input |
type | InputTypeHTMLAttribute | — | The type of the input element. |
Emits
| Emit Name | Parameters | Description |
|---|---|---|
update:modelValue | string | Emitted when the model value changes. |
clear | PointerEvent | Emitted when the clear button is clicked. |
update:visible | boolean | Emitted when the visible state changes. |
Slots
| Slot Name | Parameters | Description |
|---|---|---|
leading | PasswordCompactSlotProps | Custom content for the leading slot. |
trailing | PasswordCompactSlotProps | Custom content for the trailing slot. |
clear | PasswordCompactSlotProps | Custom content for the clear slot. |
visible | PasswordCompactSlotProps | Custom content for the visible slot. |
PasswordCompact
22 Props3 Emits4 Slots
Props
| Prop | Type | Default | Description |
|---|---|---|---|
visible | boolean | — | Controlled password visibility. |
defaultVisible | boolean | false | The initial visibility state when it is not controlled. |
visibleProps | ButtonProps | — | Properties forwarded to the visible element. |
inputRef | ((el: HTMLInputElement) => void) | — | The function to set the input element. |
clearable | boolean | false | Whether to show the clear trigger. |
controlProps | InputControlProps | — | Properties forwarded to the control element. |
clearProps | InputClearProps | — | Properties forwarded to the clear element. |
defaultValue | string | — | The default value of the input |
modelValue | string | — | The controlled value of the input |
disabled | boolean | — | When `true`, prevents the user from interacting with the input. |
readonly | boolean | — | When `true`, the input is read-only. |
rootProps | BaseProps | — | Properties forwarded to the root element |
name | string | — | The name of the field. Submitted with its owning form as part of a name/value pair. |
required | boolean | — | When `true`, indicates that the user must set the value before the owning form can be submitted. |
id | string | — | Id of the input element |
autofocus | boolean | — | When `true`, the input is auto-focused. |
autocomplete | 'search' | 'name' | 'email' | 'tel' | 'url' | 'on' | 'off' | 'username' | 'current-password' | 'new-password' | 'one-time-code' | 'given-name' | 'family-name' | 'organization' | 'street-address' | 'address-level2' | 'postal-code' | 'country' | 'cc-name' | 'cc-number' | 'cc-exp' | 'cc-csc' | 'transaction-amount' | — | The autocomplete attribute of the input.
Supports the HTML autofill tokens (including password-manager values such as
`current-password` / `new-password`), in addition to the `on` / `off` switches. |
maxlength | number | — | The maximum number of characters allowed in the input |
minlength | number | — | The minimum number of characters allowed in the input |
pattern | string | — | The pattern attribute of the input |
placeholder | string | — | The placeholder of the input |
type | InputTypeHTMLAttribute | — | The type of the input element. |
Emits
| Emit Name | Parameters | Description |
|---|---|---|
update:modelValue | string | Emitted when the model value changes. |
clear | PointerEvent | Emitted when the clear button is clicked. |
update:visible | boolean | Emitted when the visible state changes. |
Slots
| Slot Name | Parameters | Description |
|---|---|---|
leading | PasswordCompactSlotProps | Custom content for the leading slot. |
trailing | PasswordCompactSlotProps | Custom content for the trailing slot. |
clear | PasswordCompactSlotProps | Custom content for the clear slot. |
visible | PasswordCompactSlotProps | Custom content for the visible slot. |
Notes
Architecture and benchmark differences
VeanUI builds the password input by reusing the input family base: PasswordCompact composes InputRoot / InputControl / InputClear and adds a default visible slot backed by useControllableState. The styled layer extends inputVariants with a visible slot override styled as a mini icon button. This mirrors the headless/styled split of reka-ui and shadcn, differing from single-package libraries such as Element Plus.
| Capability | VeanUI | reka-ui PasswordInput | shadcn | Element Plus el-input |
|---|---|---|---|---|
| Aria/styled split | ✅ | — | — | — |
Controlled / uncontrolled visible | ✅ | ✅ | — | — |
| Show/hide toggle (icon) | ✅ | ✅ | ✅ | ✅ |
| i18n toggle label | ✅ | — | — | ✅ |
aria-pressed semantics | ✅ | — | — | — |
| Clearable mode | ✅ | — | ✅ | ✅ |
disabled / readonly guards | ✅ | ✅ | ✅ | ✅ |
| Size variants (xs…2xl) | ✅ | — | — | — |
Custom visible slot | ✅ | — | — | — |
| Form proxying (hidden input) | ✅ | — | — | — |
Cautions
- The
typeprop is intentionally overridden by the visibility state (textwhen visible,passwordotherwise); a user-providedtypeis not honored. - The
visibletoggle button renders withtype="button"to prevent accidental native form submission. - Cursor position and password-manager compatibility are guaranteed by the native input contract.
FAQ
How do I default the password to visible?
Pass defaultVisible (uncontrolled) or bind visible with v-model:visible (controlled).
How do I customize the toggle button?
Use the visible slot. It receives modelValue, visible, clear, and toggle props for full control.
How do I make the field clearable?
Pass clearable. The clear button clears the value and emits clear; it is disabled together with disabled / readonly.
Why does my type prop get ignored?
Password fields must switch between text and password to toggle visibility. The component owns this switch, so a user-provided type is overridden by design.