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 ​

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

<template>
  <div class="flex flex-col gap-3 w-full max-w-sm">
    <Password variant="subtle" placeholder="Subtle" />
    <Password variant="outline" placeholder="Outline" />
    <Password variant="ghost" placeholder="Ghost" />
  </div>
</template>

Sizes ​

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

<template>
  <div class="flex flex-col gap-3 w-full max-w-sm">
    <Password size="sm" placeholder="Small" />
    <Password size="md" placeholder="Medium" />
    <Password size="lg" placeholder="Large" />
    <Password size="xl" placeholder="Extra large" />
  </div>
</template>

Labeling ​

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

At least 8 characters.

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

const value = ref('')
const required = ref(true)
const showError = ref(false)

const error = computed(() => (showError.value ? 'Password is too short.' : ''))
</script>

<template>
  <div class="flex gap-8 items-start">
    <Password
      v-model="value"
      label="Password"
      description="At least 8 characters."
      :error="error"
      :required="required"
      placeholder="Enter password"
      class="w-72"
    />
    <div
      class="flex flex-col gap-2 items-start border-l border-outline-gray-2 pl-6"
    >
      <Checkbox v-model="required" label="required" />
      <Checkbox v-model="showError" label="show error" />
    </div>
  </div>
</template>

States ​

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

<template>
  <div class="flex flex-col gap-4 w-full max-w-sm">
    <Password label="Default" placeholder="Enter password" />
    <Password label="Required" required placeholder="Enter password" />
    <Password label="Disabled" disabled placeholder="Enter password" />
    <Password
      label="With error"
      error="Password is too short."
      placeholder="Enter password"
    />
  </div>
</template>

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.

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

<!--
  The `value` prop is deprecated. Open the browser console to confirm the
  `[frappe-ui] Password.value is deprecated` warning fires once.
-->

<template>
  <Password
    label="Legacy field"
    value="hunter2"
    placeholder="Enter password"
  />
</template>

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
}
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).

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.

update:modelValue
[value: string | undefined]

Fired when the model value changes.

MultiSelectPopover