Logo

Midnight Owl UI

Input Password

Stable v1.0.2

A masked text input with a built-in show/hide toggle. Same label, error, icon, and sizing behavior as InputText, purpose-built for credentials.

Interactive Playground

Every prop, wired live. Swap the leading icon, override the show/hide icons, and watch the code snippet update in real time.

Label & Position
Top
State
Icon & Toggle
Toggle Icons
Appearance & Identity
Small (sm)
Live Source Code
<InputPassword
  v-model="value"
  id="custom-password-id"
  label="Password"
  placeholder="Enter your password..."
  iconStart="lucide:lock"
/>

Basic Usage

Behaves like InputText, masking the value by default. Click the trailing eye icon to reveal it.

Template
<!-- Masked by default, toggle built in -->
<InputPassword
  label="Account Passphrase"
  required
  iconStart="lucide:lock"
  v-model="passwordValue"
/>

Validation & States

The error prop transforms the input and intelligently maps over arrays to display multiple validation requirements, same as every other form element in the library.

Password must be at least 8 characters long.
Password must be at least 8 characters long.
Must contain at least one number.
Passwords do not match.
Template
<script setup>
const confirmErrors = ref([
  'Password must be at least 8 characters long.',
  'Must contain at least one number.',
  'Passwords do not match.'
])
</script>

<template>
  <InputPassword
    label="Confirm Password"
    v-model="confirmValue"
    iconStart="lucide:shield-check"
    :error="confirmErrors"
  />
</template>

Input Sizing

Five carefully calibrated sizes, matching every other form element in the library.

Template
<InputPassword label="Extra Small" size="xs" />
<InputPassword label="Small" size="sm" />
<InputPassword label="Medium" size="md" />
<InputPassword label="Large" size="lg" />
<InputPassword label="Extra Large" size="xl" />

Disabling the Toggle

Set :toggleable="false" for fields that should always stay masked, such as a one-time PIN re-entry.

Template
<InputPassword
  label="Confirm PIN"
  :toggleable="false"
  iconStart="lucide:shield"
/>

API Reference

Props

Name
Type / Signature
Default
Description
modelValue
string
""
The input value, bound via v-model.
id
string
undefined
Overrides the auto-generated element id (useId()), e.g. for an external <label for> or test hooks.
label
string
undefined
Top or left-aligned input label.
labelPosition
"top" | "left"
"top"
Alignment of the label relative to the input field.
required
boolean
false
Marks the field as required and renders an asterisk next to the label.
placeholder
string
undefined
Text shown when the input is empty.
disabled
boolean
false
Disables user interaction and grays out the component.
error
string | boolean | string[]
false
Applies red error styling and displays error message(s) below the input.
iconStart
string
undefined
Lucide icon displayed on the left side of the input.
toggleable
boolean
true
Shows the built-in show/hide button on the right side of the input.
iconOn
string
"lucide:eye-off"
Icon shown when the password is currently visible (click to hide).
iconOff
string
"lucide:eye"
Icon shown when the password is currently masked (click to reveal).
size
"xs" | "sm" | "md" | "lg" | "xl"
"sm"
Dimensional size of the component.

Events

Event Name
Payload Signature
Description
@focus
(event: FocusEvent)
Fired when the input receives focus.
@blur
(event: FocusEvent)
Fired when the input loses focus.
@input
(value: string)
Fired on every keystroke.
@change
(value: string)
Fired when the value commits (on native change).