Password

An unstyled password input with mask toggling and controlled or uncontrolled value state.

Build fully custom password inputs with complete control over layout and styling.

basic-demo

Pre-styled Versions

Choose a pre-styled library to use Password with ready-made designs.

Styled

Theme-based styling with CSS variables

Tailwind

Utility-first styling with Tailwind CSS

For hook-based usage without components, see the Headless API.

Features#

Dynamic input type toggling between password and text for visibility control
Controlled and uncontrolled modes for both value and mask state
toggleMask() method exposed on the component instance for programmatic mask switching

Usage#

import { Password } from 'primereact/password';

<Password />

Behavior#

Polymorphic Rendering#

Use as to change the rendered input element.

<Password as="input" />

Render Function Children#

Password accepts a render function providing access to the component instance.

<Password>{(instance) => <span>{instance.state.mask ? 'Hidden' : 'Visible'}</span>}</Password>

Pass Through#

Some parts may not be visible in the preview depending on the component's current state.

/* Select a part to see its CSS selector for custom styling */

API#

Password#

Attribute	Value
`data-scope`	`"password"`
`data-part`	`"root"`

Defines passthrough(pt) options of Password component.

label	type	description
root	PasswordPassThroughType<HTMLAttributes<HTMLDivElement>>	Used to pass attributes to the root's DOM element.

Accessibility#

Value to describe the component can either be provided via label tag combined with id prop or using aria-labelledby, aria-label props. Screen reader is notified about the changes to the strength of the password using a section that has aria-live while typing.

Keyboard Support#

Key	Function
`tab`	Moves focus to the input.