Frappe UIFrappe UI

Password ​

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

Playground ​

label
description
placeholder
size
variant
required
disabled
<Password
  label="Password"
  placeholder="••••••••"
  v-model="value"
/>
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>

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

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. A `#description` slot is not: it renders beside the error, and is referenced alongside it.

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, with `sr-only` text that announces it, and forwards `required` / `aria-required` to the underlying control where the control's role allows it. `data-required` is set either way.

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.

PageHeaderPopover