PasswordInput

Stable

Password entry with a show/hide toggle and an optional strength meter.

Use PasswordInput for sign-in and password creation. The visibility toggle lets people check what they typed, which reduces errors more than a confirm-password field. Enable strength on sign-up and password change; supply your own scorer to match your password policy.

Source Edit docs Report an issue

Overview

Password

tsx

import { FormField, PasswordInput } from '@bindshq/stance-react';

export function SignIn() {
  return (
    <div style={{ width: '100%', maxWidth: 360 }}>
      <FormField label="Password" required>
        <PasswordInput />
      </FormField>
    </div>
  );
}

Light, dark and high contrast

Every Stance component is designed and tested in all three appearance modes.

Password

Light

Password

Dark

Password

High contrast

Import

tsx

import { PasswordInput, estimatePasswordStrength } from '@bindshq/stance-react';

Platforms

PasswordInput has native counterparts. They share Stance tokens and intent, and use each platform’s own controls and conventions. The live previews on this page are the web implementation.

tsx

import { PasswordInput, estimatePasswordStrength } from '@bindshq/stance-react';

Examples

With strength meter

Create a password

Strength: Fair

At least 12 characters.

tsx

import { FormField, PasswordInput } from '@bindshq/stance-react';

export function Strength() {
  return (
    <div style={{ width: '100%', maxWidth: 360 }}>
      <FormField label="Create a password" description="At least 12 characters.">
        <PasswordInput strength autoComplete="new-password" defaultValue="Signed2026" />
      </FormField>
    </div>
  );
}

Custom scoring

Admin password

Admins need 16 characters or more.

tsx

import { FormField, PasswordInput } from '@bindshq/stance-react';

export function CustomScore() {
  return (
    <div style={{ width: '100%', maxWidth: 360 }}>
      <FormField label="Admin password" description="Admins need 16 characters or more.">
        <PasswordInput
          autoComplete="new-password"
          strength={(pw) =>
            pw.length >= 16
              ? { score: 4, label: 'Meets admin policy' }
              : { score: 1, label: `${16 - pw.length} more characters needed` }
          }
        />
      </FormField>
    </div>
  );
}

API reference

`PasswordInput`

Prop	Type	Default	Description
`strength`	`boolean \| ((password: string) => PasswordStrength)`	None	Show a strength meter, optionally with your own scorer.
`visible`	`boolean`	None	Controlled visibility.
`onVisibleChange`	`(visible: boolean) => void`	None	Called when the toggle is pressed.
`showLabel / hideLabel`	`string`	`'Show password' / 'Hide password'`	Toggle labels.
`autoComplete`	`string`	`'current-password'`	Use "new-password" on sign-up.
`...props`	`InputProps`	None	All Input props except type and suffix.

`estimatePasswordStrength`

Prop	Type	Default	Description
`(password) => PasswordStrength`	`function`	None	The default length-and-variety heuristic, score 0 to 4.

Accessibility

The toggle is a real button with aria-pressed and a label that states the action ("Show password").
Strength text is linked to the input with aria-describedby and updates in a polite live region.
Strength is shown as both bars and words, never colour alone.
Spell-check and auto-capitalisation are turned off so the password is not leaked to dictionaries.

Keyboard

Keys	Action
`Tab`	Moves from the field to the visibility toggle.
`Space` `Enter`	On the toggle: shows or hides the password.

Components Forms

PasswordInput

Stable

Password entry with a show/hide toggle and an optional strength meter.

Source Edit docs Report an issue

Overview

Password

tsx

import { FormField, PasswordInput } from '@bindshq/stance-react';

export function SignIn() {
  return (
    <div style={{ width: '100%', maxWidth: 360 }}>
      <FormField label="Password" required>
        <PasswordInput />
      </FormField>
    </div>
  );
}

Light, dark and high contrast

Every Stance component is designed and tested in all three appearance modes.

Password

Light

Password

Dark

Password

High contrast

Import

tsx

import { PasswordInput, estimatePasswordStrength } from '@bindshq/stance-react';

Platforms

PasswordInput has native counterparts. They share Stance tokens and intent, and use each platform’s own controls and conventions. The live previews on this page are the web implementation.

tsx

import { PasswordInput, estimatePasswordStrength } from '@bindshq/stance-react';

Examples

With strength meter

Create a password

Strength: Fair

At least 12 characters.

tsx

import { FormField, PasswordInput } from '@bindshq/stance-react';

export function Strength() {
  return (
    <div style={{ width: '100%', maxWidth: 360 }}>
      <FormField label="Create a password" description="At least 12 characters.">
        <PasswordInput strength autoComplete="new-password" defaultValue="Signed2026" />
      </FormField>
    </div>
  );
}

Custom scoring

Admin password

Admins need 16 characters or more.

tsx

import { FormField, PasswordInput } from '@bindshq/stance-react';

export function CustomScore() {
  return (
    <div style={{ width: '100%', maxWidth: 360 }}>
      <FormField label="Admin password" description="Admins need 16 characters or more.">
        <PasswordInput
          autoComplete="new-password"
          strength={(pw) =>
            pw.length >= 16
              ? { score: 4, label: 'Meets admin policy' }
              : { score: 1, label: `${16 - pw.length} more characters needed` }
          }
        />
      </FormField>
    </div>
  );
}

API reference

`PasswordInput`

Prop	Type	Default	Description
`strength`	`boolean \| ((password: string) => PasswordStrength)`	None	Show a strength meter, optionally with your own scorer.
`visible`	`boolean`	None	Controlled visibility.
`onVisibleChange`	`(visible: boolean) => void`	None	Called when the toggle is pressed.
`showLabel / hideLabel`	`string`	`'Show password' / 'Hide password'`	Toggle labels.
`autoComplete`	`string`	`'current-password'`	Use "new-password" on sign-up.
`...props`	`InputProps`	None	All Input props except type and suffix.

`estimatePasswordStrength`

Prop	Type	Default	Description
`(password) => PasswordStrength`	`function`	None	The default length-and-variety heuristic, score 0 to 4.

Accessibility

The toggle is a real button with aria-pressed and a label that states the action ("Show password").
Strength text is linked to the input with aria-describedby and updates in a polite live region.
Strength is shown as both bars and words, never colour alone.
Spell-check and auto-capitalisation are turned off so the password is not leaked to dictionaries.

Keyboard

Keys	Action
`Tab`	Moves from the field to the visibility toggle.
`Space` `Enter`	On the toggle: shows or hides the password.

Overview

Light, dark and high contrast

Import

Platforms

Examples

With strength meter

Custom scoring

API reference

PasswordInput

estimatePasswordStrength

Accessibility

Keyboard

Related

Overview

Light, dark and high contrast

Import

Platforms

Examples

With strength meter

Custom scoring

API reference

PasswordInput

estimatePasswordStrength

Accessibility

Keyboard

Related

`PasswordInput`

`estimatePasswordStrength`

`PasswordInput`

`estimatePasswordStrength`