Password Input

A password field with a button that shows and hides the text.

Stable

Web

iOS

Android

@advui/core

Preview

Code

Password

At least 12 characters.

Installation

Package

CLI (copy source)

pnpm

pnpm add @advui/core

npm

npm install @advui/core

import { Field, PasswordInput } from '@advui/core'

<Field label="Password">
  <PasswordInput />
</Field>

Accepts every Input prop except `type` and `secureTextEntry`.

Prop	Type	Default	Description
`visible`	`boolean`	—	Whether the password is shown.
`defaultVisible`	`boolean`	`false`	Starting `visible` when uncontrolled.
`onVisibleChange`	`(visible: boolean) => void`	—	Called when the button is pressed.
`toggleLabel`	`string`	`'Show password'`	Accessible name of the button.
`autoComplete`	`string`	`'current-password'`	Use 'new-password' on sign-up forms.
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	As Input.

The button is a toggle with a fixed name ("Show password"), so its state is announced instead of a changing label: aria-pressed on web, a toggle button that reads as checked on iOS and Android.
Password managers and autofill see a normal password field.

Keyboard interactions
Key	Action
`Tab`	Moves from the field to the show/hide button.
`Space / Enter`	Shows or hides the password (on the button).

Web

The field switches between type="password" and type="text".

iOS

Uses secureTextEntry; iOS may clear the field when typing resumes after hiding.

Android

Uses secureTextEntry.

Since v0.4.0Last updated Nov 2, 2026Edit this page on GitHub