PasswordField

Password input with visibility toggle and FormField chrome.

Introduction

Use PasswordField when you need a password input with a built-in show/hide toggle, consistent end-adornment layout, and optional controlled visibility (visible / onVisibilityChange).

Use TextField with type="password" only when you want a minimal masked input without toggle UI—for example, a simple credential field where revealing the value is not needed.

Import

import { PasswordField } from "@bridge-ui/vue/Components/PasswordField";

import { PasswordField } from "@bridge-ui/react/Components/PasswordField";

Basic usage

Provide a label and placeholder. Bind the value with value/onChange in React or v-model in Vue. For uncontrolled usage with an initial value, use defaultValue in React or default-value in Vue.

<script setup lang="ts">
import { ref } from "vue";

import { PasswordField } from "@bridge-ui/vue/Components/PasswordField";

const password = ref("");
</script>

<template>
  <div class="flex w-full max-w-sm flex-col gap-4">
    <PasswordField label="Password" placeholder="Enter password..." />

    <PasswordField
      v-model="password"
      label="New password"
      description="Use at least 8 characters."
    />
  </div>
</template>

import { useState } from "react";

import { PasswordField } from "@bridge-ui/react/Components/PasswordField";

export default function PasswordFieldBasic() {
  const [password, setPassword] = useState("");

  return (
    <div className="flex w-full max-w-sm flex-col gap-4">
      <PasswordField label="Password" placeholder="Enter password..." />

      <PasswordField
        value={password}
        label="New password"
        description="Use at least 8 characters."
        onChange={(event) => setPassword(event.target.value)}
      />
    </div>
  );
}

Visibility toggle

The field includes a button to show or hide the password. Control visibility from the parent with visible and onVisibilityChange (React) or v-on:visibility-change (Vue).

<script setup lang="ts">
import { ref } from "vue";

import { PasswordField } from "@bridge-ui/vue/Components/PasswordField";

const visible = ref(false);
</script>

<template>
  <div class="flex w-full max-w-sm flex-col gap-4">
    <PasswordField
      label="Password"
      :visible="visible"
      placeholder="••••••••"
      v-on:visibility-change="visible = $event"
      description="The visible prop is bound to parent state."
    />
  </div>
</template>

import { useState } from "react";

import { PasswordField } from "@bridge-ui/react/Components/PasswordField";

export default function PasswordFieldVisibilityToggle() {
  const [visible, setVisible] = useState(false);

  return (
    <div className="flex w-full max-w-sm flex-col gap-4">
      <PasswordField
        label="Password"
        visible={visible}
        placeholder="••••••••"
        onVisibilityChange={setVisible}
        description="The visible prop is bound to parent state."
      />
    </div>
  );
}

Validation

Set error and errorMessage to show invalid styling and an error message below the field.

<script setup lang="ts">
import { PasswordField } from "@bridge-ui/vue/Components/PasswordField";
</script>

<template>
  <div class="flex w-full max-w-sm flex-col gap-4">
    <PasswordField
      error
      label="Password"
      placeholder="••••••••"
      error-message="Password is too weak."
    />
  </div>
</template>

import { PasswordField } from "@bridge-ui/react/Components/PasswordField";

export default function PasswordFieldValidation() {
  return (
    <div className="flex w-full max-w-sm flex-col gap-4">
      <PasswordField
        error
        label="Password"
        placeholder="••••••••"
        errorMessage="Password is too weak."
      />
    </div>
  );
}

TextField

Accessibility

PasswordField follows the FormField accessibility pattern. The visibility toggle is a button with an accessible name so screen reader users can show or hide the password. The input uses type="password" when hidden and type="text" when visible.

Label, helper text, and error message are linked via controlId and aria-describedby.
When error is true, the input receives aria-invalid="true".

Anatomy

PasswordField composes FormField around a masked input and visibility control:

FormField (root)
├── Header — label, optional corner text, required indicator
├── Container — variant shell
│   ├── Input — native input (type toggles between password and text)
│   └── Visibility toggle — button to show or hide the password
└── Footer — description or error message

API

Prop	Type	Default	Description
v-model	string	—	Two-way binding for the input value.
default-value	string	—	Initial value for uncontrolled usage (without v-model).

Prop	Type	Default	Description
value	string	—	Input value. Use with onChange for controlled state.
defaultValue	string	—	Initial value for uncontrolled usage.
onChange	ChangeEventHandler<HTMLInputElement>	—	Native input change handler.

Prop	Type	Default	Description
visible	boolean	—	Controlled password visibility. Omit for uncontrolled mode (internal toggle).
@visibility-change	(visible: boolean) => void	—	Called when visibility changes.

Prop	Type	Default	Description
visible	boolean	—	Controlled password visibility. Omit for uncontrolled mode (internal toggle).
onVisibilityChange	(visible: boolean) => void	—	Called when visibility changes.

PasswordField-specific

Prop	Type	Default	Description
classes	PasswordFieldClasses	—	Classes for the password field.

Inherited from FormField

Prop	Type	Default	Description
label	string	—	Primary label text above the control.
description	string	—	Helper text below the control (hidden when invalid).
corner	string	—	Secondary label text at the inline end of the header row.
required	boolean	false	Shows a red asterisk on the label.
disabled	boolean	false	Whether the control is disabled.
readonly	boolean	false	Whether the control is read-only.
error	boolean	false	Applies invalid styling and hides description.
errorMessage	string	—	Error message below the control.
showErrorIcon	boolean	true	Shows an error icon when invalid.
hideErrorMessage	boolean	false	Does not reserve space for error messages.
variant	FormFieldVariant	"outline"	Visual variant of the field shell.
color	FormFieldColor	"primary"	Color applied to the field control.
size	FormFieldSize	"md"	Typography and control sizing.
rounded	FormFieldRounded	"md"	Border radius of the field control.
start	string	—	Inline-start text inside the field (prefix).
end	string	—	Inline-end text inside the field (suffix).
startIcon	IconSource	—	Icon at the inline start.
endIcon	IconSource	—	Icon at the inline end.
errorIcon	IconSource	"alert"	Icon shown when invalid and showErrorIcon is enabled.
controlId	string	—	Associates labels and helper text with the control. Auto-generated when omitted.
classes	FormFieldClasses	—	Class overrides per part.
customProps	FormFieldCustomProps	—	Props for each part. label accepts Label props (without children); error label colors come from Label.
slots	FormFieldSlots	—	React slots. Vue: #label, #corner, default, #description, #errorMessage, #start, #end.