Password ​

Provides a secure input for entering passwords. Supports visibility toggling and ensures a clear, user-friendly experience.

vue
<script setup lang="ts">
import { ref } from 'vue'
import { Password } from 'frappe-ui'

const value = ref('')
</script>

<template>
  <Password v-model="value" placeholder="Enter password" />
</template>

Variants ​

Sizes ​

Labeling ​

label, description, error, and required are wired into the underlying input via the shared labeling contract.

At least 8 characters.

States ​

Deprecated value prop ​

The value prop is kept for backwards compatibility and will fire a dev-mode [frappe-ui] Password.value is deprecated warning. Use v-model / modelValue instead.

API Reference ​

Show types
typescript
import type { InputSize, InputVariant } from '../../composables/inputTypes'
import type { InputLabelingProps } from '../../composables/useInputLabeling'

export interface PasswordProps extends InputLabelingProps {
  /** Visual size of the input. */
  size?: InputSize

  /** Style variant of the input. */
  variant?: InputVariant

  /** Placeholder text shown when the input is empty. */
  placeholder?: string

  /** Disables the input when true. */
  disabled?: boolean

  /**
   * Alternate way to set the password value.
   * @deprecated Use `v-model` / `modelValue` instead.
   */
  value?: string | null
}
Prop Default Type
size
"sm"
InputSize

Visual size of the input.

variant
"subtle"
InputVariant

Style variant of the input.

placeholder
—
string

Placeholder text shown when the input is empty.

disabled
—
boolean

Disables the input when true.

value
—

Deprecated — Use `v-model` / `modelValue` instead.

label
—
string

Label rendered above (or beside, for binary controls) the input.

description
—
string

Helper text rendered below the input. Hidden when `error` is set.

error
—
string | FrappeUIError

Error message rendered below the input. When set, the control receives `aria-invalid="true"` and `data-state="invalid"`. May be either a string or an `Error` object whose `messages?: string[]` is rendered as stacked lines (with `Error.message` as the fallback).

required
—
boolean

Marks the field as required. Renders an asterisk next to the label and forwards `required` / `aria-required` to the underlying control.

id
—
string

HTML id of the underlying control. Auto-generated via `useId()` if omitted.

modelValue
—
string

The current password value (controlled).

Slot Payload
prefix
—

Content shown before the input field (left icon / custom content)

label
{ required: boolean; }

Overrides the rendered label content. Receives `{ required }`.

description
—

Overrides the rendered description content.

Event Payload
update:modelValue
[value: string | undefined]

Fired when the model value changes.

MultiSelectPopover