Password input
Takes a password, with a toggle to show what has been typed.
Try it
Press the eye to show the password, or tab to it and press Enter.
Size
Content
Error
Disabled
<WildPasswordInput
v-model="password"
size="lg"
/>When to use
- Use it wherever someone types a password, such as sign-in.
Don’t use it
- For anything that isn’t secret. Use Text input.
Anatomy
The input, with a show-and-hide toggle inside the frame.
masked
revealed
empty
<WildPasswordInput v-model="password" />
<WildPasswordInput v-model="password" :revealed="true" />States
The same five states as the text input.
rest
hover
focus
error
disabled
Errors
Pass the message as error. The field shows it underneath, so it works outside a Form field.
At least 12 characters.
Accessibility
The eye is a toggle button named Show password, and screen readers hear whether it’s pressed. It’s disabled with the field.
| Key | What it does |
|---|---|
| Tab | Moves focus to the eye. |
| Enter / Space | Shows or hides the password. |
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| modelValue | string | — | The password. |
| size | 'sm' | 'lg' | 'lg' | 36px or 44px tall. |
| revealed | boolean | false | Shows the password as text. |
| onReveal | () => void | — | Called when the eye is pressed. Flip revealed here. |
| error | string | — | Red border and a message underneath. |
| disabled | boolean | false | Greys the field and the eye. |
Tokens
| Token | Value | Where it lands |
|---|---|---|
| --radius-field | 10px | The frame. |
| --global-blue-1000 | #1877F2 | Border on focus, 2px. |
| --color-error | #E12121 | Error border and message. |
| --font-size-xs | 11px | The error message. |
| --color-grey-800 | #7F7D83 | The eye at rest. |
| --color-grey-1000 | #2D2B32 | The eye on hover, and when revealed. |
| (no token) | 2px | Letter spacing of the masked dots. |