Source: https://primereact.org/password/

Introducing PrimeReact v11 Alpha 🥁Learn More

SearchK
10.9.7
FEATURES
API
THEMING
PASS THROUGH

Password

Password displays strength indicator for password fields.

Import#

import { Password } from 'primereact/password';

Copy

Basic#

Password is used as a controlled component with value and onChange properties. Strength meter is enabled by default so feedback needs to be set as false for a basic password input.

<Password value={value} onChange={(e) => setValue(e.target.value)} feedback={false} tabIndex={1} />

Copy

Meter#

Strength meter is displayed as a popup while a value is being entered.

<Password value={value} onChange={(e) => setValue(e.target.value)} />

Copy

Locale#

Labels are translated at component level by promptLabel, weakLabel, mediumLabel and strongLabel properties. In order to apply global translations for all Password components in the application, refer to the Locale API .

<Password value={value} onChange={(e) => setValue(e.target.value)}
    promptLabel="Choose a password" weakLabel="Too simple" mediumLabel="Average complexity" strongLabel="Complex password"/>

Copy

Toggle Mask#

When toggleMask is present, an icon is displayed to show the value as plain text.

<Password value={value} onChange={(e) => setValue(e.target.value)} toggleMask />

Copy

Template#

Custom content is placed inside the popup using header and footer properties.

<Password value={value} onChange={(e) => setValue(e.target.value)} header={header} footer={footer} />

Copy

Float Label#

A floating label appears on top of the input field when focused. Visit FloatLabel documentation for more information.

Password

<FloatLabel>
    <Password inputId="password" value={value} onChange={(e) => setValue(e.target.value)} />
    <label htmlFor="password">Password</label>
</FloatLabel>

Copy

Filled#

Specify the variant property as filled to display the component with a higher visual emphasis than the default outlined style.

<Password variant="filled" value={value} onChange={(e) => setValue(e.target.value)} feedback={false} tabIndex={1} />

Copy

Invalid#

Invalid state is displayed using the invalid prop to indicate a failed validation. You can use this style when integrating with form validation libraries.

<Password invalid />

Copy

Disabled#

When disabled is present, the element cannot be edited and focused.

<Password disabled placeholder="Disabled" />

Copy

Accessibility#

Screen Reader

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.

<label htmlFor="pwd1">Password</label>
<Password id="pwd1" />

<span id="pwd2">Password</span>
<Password aria-labelledby="pwd2" />

<Password aria-label="Password"/>

Copy

Keyboard Support

| Key | Function | | --- | --- | | tab | Moves focus to the input. | | escape | Hides the strength meter if open. |

Import
Basic
Meter
Locale
Toggle Mask
Template
Float Label
Filled
Invalid
Disabled
Accessibility

PrimeReact 10.9.7 by PrimeTek