Bridge UI

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.

Use at least 8 characters.

Use at least 8 characters.

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

The visible prop is bound to parent state.

The visible prop is bound to parent state.

Validation

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

Password is too weak.

Password is too weak.

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.