Input password
Interactive documentation for the password input component. Change props in the playground, inspect password strength states, and copy the generated example.
Preview
Code
<InputPassword
v-model="password"
/>Modes
Default mode renders a regular password input. New mode adds password strength validation and progress.
New password
Strong password. Must contain:
- At least 8 characters
- One uppercase letter
- One number
- One special character
States
Common password input states for empty, filled, disabled, and error.
Empty
Filled
Disabled
Error
Error message
Examples
Typical usage examples for authentication forms.
New password
Enter a password. Must contain:
- At least 8 characters
- One uppercase letter
- One number
- One special character
Password
Props
This table matches the current InputPasswordProps interface.
| Prop | Type | Default | Description |
|---|---|---|---|
| modelValue | string | '' | Current password value used by v-model. |
| size | 'l' | 'xl' | 'responsive-l-xl' | 'l' | Controls height, padding, font size, icon size, and responsive layout styles. |
| square | boolean | false | Uses square right-side layout and adjusted border radius. |
| rounded | boolean | false | Applies fully rounded outer and inner corners. |
| disabled | boolean | false | Disables the input and toggle button interaction. |
| class | string | 'w-full' | Additional classes applied to the root container. |
| error | string | undefined | Displays error styles and renders an error message below the input. |
| required | boolean | false | Displays required indicator inside the floating label. |
| mode | 'default' | 'new' | 'default' | default renders a regular password field. new enables password strength validation and progress indicators. |
| id | string | 'password' | Input id attribute used for accessibility and label association. |