Password

Password displays strength indicator for password fields.

Import#


import { Password } from 'primereact/password';

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} />

Meter#

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


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

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"/>

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 />

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} />

Float Label#

A floating label appears on top of the input field when focused.

Password


<span className="p-float-label">
    <Password inputId="password" value={value} onChange={(e) => setValue(e.target.value)} />
    <label htmlFor="password">Password</label>
</span>

Invalid#

Invalid state style is added using the p-invalid class to indicate a failed validation.


<Password className="p-invalid" />

Disabled#

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


<Password disabled placeholder="Disabled" />

Form#

Compatibility with popular React form libraries.

Formik#

Formik is a popular library for handling forms in React.


<Toast ref={toast} />
<Password
    inputId="in_value"
    name="value"
    rows={5}
    cols={30}
    className={classNames({ 'p-invalid': isFormFieldInvalid('value') })}
    value={formik.values.value}
    feedback={false}
    onChange={(e) => {
        formik.setFieldValue('value', e.target.value);
    }}
/>
{getFormErrorMessage('value')}
<Button label="Submit" type="submit" icon="pi pi-check" />

Hook Form#

React Hook Form is another popular React library to handle forms.


<Toast ref={toast} />
<Controller
    name="value"
    control={form.control}
    rules={{ required: 'Password is required.' }}
    render={({ field, fieldState }) => (
        <>
            <label htmlFor={field.name} className={classNames({ 'p-error': errors.value })}>
                Password
            </label>
            <Password id={field.name} {...field} inputRef={field.ref} className={classNames({ 'p-invalid': fieldState.error })} feedback={false} />
            {getFormErrorMessage(field.name)}
        </>
    )}
/>
<Button label="Submit" type="submit" icon="pi pi-check" />

Style#

Following is the list of structural style classes, for theming classes visit theming page.

Name	Element
p-password	Container element
p-password-input	Input Element
p-password-panel	Container of password panel
p-password-meter	Meter element of password strength
p-password-info	Text to display strength

Accessibility guide documents the specification of this component based on WCAG guidelines, the implementation is in progress.

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"/>

Keyboard Support

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