Password

Password displays strength indicator for password fields.

Usage#

import { Password } from 'primereact/password';

<Password>
    <Password.Input />
    <Password.Strength />
    <Password.Portal />
</Password>

Examples#

Basic#

A simple password input component that can be used standalone with just the Password.Input sub-component. The Password component provides the foundation for all password functionality.

basic-demo.tsx

'use client';

import { Password } from 'primereact/password';

export default function BasicDemo() {
    return (
        <div className="flex justify-center">
            <Password>
                <Password.Input placeholder="Enter password" />
            </Password>
        </div>
    );
}

Strength#

Password.Strength displays a visual indicator that shows the strength level of the entered password. The strength is automatically calculated based on character diversity (lowercase, uppercase, numbers, symbols) and password length according to the defined strength options.

strength-demo.tsx

'use client';

import { Password } from 'primereact/password';

export default function StrengthDemo() {
    return (
        <div className="flex justify-center">
            <Password>
                <Password.Input />
                <Password.Strength />
            </Password>
        </div>
    );
}

Requirements#

At least 12 characters
Contains uppercase letter
Contains lowercase letter
Contains number
Contains special character

requirements-demo.tsx

'use client';

import { PasswordInstance, PasswordStrengthResult } from '@primereact/types/shared/password';
import { Password } from 'primereact/password';

const requirements = [
    {
        id: 'minLength',
        label: 'At least 12 characters',
        test: (value: string) => value?.length >= 12
    },
    {
        id: 'uppercase',
        label: 'Contains uppercase letter',
        test: (_: string, strength: PasswordStrengthResult | null) => strength?.contains.includes('uppercase') || false
    },
    {
        id: 'lowercase',
        label: 'Contains lowercase letter',
        test: (_: string, strength: PasswordStrengthResult | null) => strength?.contains.includes('lowercase') || false
    },
    {
        id: 'number',
        label: 'Contains number',
        test: (_: string, strength: PasswordStrengthResult | null) => strength?.contains.includes('number') || false
    },
    {
        id: 'symbol',
        label: 'Contains special character',
        test: (_: string, strength: PasswordStrengthResult | null) => strength?.contains.includes('symbol') || false
    }
];

export default function RequirementsDemo() {
    return (
        <div className="flex justify-center">
            <Password className="flex-col">
                {(instance: PasswordInstance) => {
                    return (
                        <>
                            <Password.Input />
                            <ul className="flex flex-col justify-center gap-2 list-none ms-1 my-1">
                                {requirements?.map((requirement) => {
                                    const met = instance?.testRequirement(requirement.test) || false;

                                    return (
                                        <li key={requirement.id} className="flex items-center gap-2 mt-1 text-sm">
                                            <i className={met ? 'pi pi-check text-green-500' : 'pi pi-times text-red-500'} />
                                            <span className={met ? 'text-green-700 dark:text-green-400' : 'text-surface-700 dark:text-surface-300'}>
                                                {requirement.label}
                                            </span>
                                        </li>
                                    );
                                })}
                            </ul>
                        </>
                    );
                }}
            </Password>
        </div>
    );
}

Portal#

Password.Portal renders the overlay content (strength indicator and requirements) in a portal container, allowing it to be positioned outside the normal DOM hierarchy.

portal-demo.tsx

'use client';

import { PasswordPortalInstance, PasswordStrengthResult } from '@primereact/types/shared/password';
import { Password } from 'primereact/password';

const requirements = [
    {
        id: 'minLength',
        label: 'At least 12 characters',
        test: (value: string) => value?.length >= 12
    },
    {
        id: 'uppercase',
        label: 'Contains uppercase letter',
        test: (_: string, strength: PasswordStrengthResult | null) => strength?.contains.includes('uppercase') || false
    },
    {
        id: 'lowercase',
        label: 'Contains lowercase letter',
        test: (_: string, strength: PasswordStrengthResult | null) => strength?.contains.includes('lowercase') || false
    },
    {
        id: 'number',
        label: 'Contains number',
        test: (_: string, strength: PasswordStrengthResult | null) => strength?.contains.includes('number') || false
    },
    {
        id: 'symbol',
        label: 'Contains special character',
        test: (_: string, strength: PasswordStrengthResult | null) => strength?.contains.includes('symbol') || false
    }
];

export default function RequirementsDemo() {
    return (
        <div className="flex justify-center">
            <Password>
                <Password.Input />
                <Password.Portal>
                    {(instance: PasswordPortalInstance) => {
                        const { password } = instance;

                        return (
                            <ul className="flex flex-col justify-center gap-2 list-none ms-1 my-1">
                                {requirements?.map((requirement) => {
                                    const met = password?.testRequirement(requirement.test) || false;

                                    return (
                                        <li key={requirement.id} className="flex items-center gap-2 mt-1 text-sm">
                                            <i className={met ? 'pi pi-check text-green-500' : 'pi pi-times text-red-500'} />
                                            <span className={met ? 'text-green-700 dark:text-green-400' : 'text-surface-700 dark:text-surface-300'}>
                                                {requirement.label}
                                            </span>
                                        </li>
                                    );
                                })}
                            </ul>
                        );
                    }}
                </Password.Portal>
            </Password>
        </div>
    );
}

Toggle Visibility#

Adding a toggle icon to show or hide the password, allowing users to verify their input.

toggle-mask-demo.tsx

'use client';

import { EyeIcon } from '@primereact/icons/eye';
import { EyeSlashIcon } from '@primereact/icons/eyeslash';
import { PasswordInstance } from '@primereact/types/shared/password';
import { IconField } from 'primereact/iconfield';
import { Password } from 'primereact/password';
import * as React from 'react';

export default function ToggleMaskDemo() {
    const passwordRef = React.useRef<PasswordInstance>(null);
    const [unmasked, setUnmasked] = React.useState(false);

    const handleToggle = () => {
        passwordRef.current?.onMaskToggle();
        setUnmasked((prev) => !prev);
    };

    return (
        <div className="flex justify-center">
            <IconField>
                <Password ref={passwordRef}>
                    <Password.Input />
                </Password>
                <IconField.Icon>{unmasked ? <EyeSlashIcon onClick={handleToggle} /> : <EyeIcon onClick={handleToggle} />}</IconField.Icon>
            </IconField>
        </div>
    );
}

Template#

Customize the appearance and layout of strength indicators and requirements using render functions. You have full control over the template structure, allowing you to add custom styling, icons, and components like tags or badges.

Password Strength:

At least 12 characters long
Contains at least one uppercase letter
Contains at least one lowercase letter
Contains at least one number
Contains at least one special character (!@#$...)

template-demo.tsx

'use client';

import { PasswordInstance } from '@primereact/types/shared/password';
import { Password } from 'primereact/password';
import { Tag } from 'primereact/tag';

const requirements = [
    {
        id: 'length',
        label: 'At least 12 characters long',
        test: (v: string) => v.length >= 12
    },
    {
        id: 'uppercase',
        label: 'Contains at least one uppercase letter',
        test: (v: string) => /[A-Z]/.test(v)
    },
    {
        id: 'lowercase',
        label: 'Contains at least one lowercase letter',
        test: (v: string) => /[a-z]/.test(v)
    },
    {
        id: 'number',
        label: 'Contains at least one number',
        test: (v: string) => /[0-9]/.test(v)
    },
    {
        id: 'special',
        label: 'Contains at least one special character (!@#$...)',
        test: (v: string) => /[^a-zA-Z0-9]/.test(v)
    }
];

export default function TemplateDemo() {
    return (
        <div className="flex justify-center">
            <Password
                strengthOptions={[
                    { id: 0, value: 'Weak', minDiversity: 0, minLength: 0 },
                    { id: 1, value: 'Medium', minDiversity: 2, minLength: 6 },
                    { id: 2, value: 'Strong', minDiversity: 4, minLength: 12 }
                ]}
            >
                {(instance: PasswordInstance) => {
                    const { strength } = instance?.state ?? {};
                    const currentLevel = strength?.id ?? -1;
                    const colors = ['#ef4444', '#f59e0b', '#3b82f6'];

                    return (
                        <>
                            <Password.Input />
                            <Password.Strength className="justify-between">
                                <>
                                    <div className="flex items-center">
                                        <i className="pi pi-lock mr-2" style={{ fontSize: '1.5rem', fontWeight: 'semibold' }} />
                                        <span className="font-semibold">Password Strength:</span>
                                    </div>

                                    {strength?.value !== '' && (
                                        <Tag
                                            style={{
                                                backgroundColor: colors[currentLevel]
                                            }}
                                        >
                                            <Tag.Label className="text-white">{strength?.value === '' ? 'Weak' : strength?.value}</Tag.Label>
                                        </Tag>
                                    )}
                                </>
                            </Password.Strength>
                            <ul className="flex flex-col justify-center gap-2 list-none ms-1 my-1">
                                {requirements?.map((requirement) => {
                                    const met = instance?.testRequirement(requirement.test);

                                    return (
                                        <li key={requirement.id} className="flex items-center gap-2 mt-1 text-sm">
                                            <i className={met ? 'pi pi-check text-green-500' : 'pi pi-times text-red-400'} />
                                            {requirement.label}
                                        </li>
                                    );
                                })}
                            </ul>
                        </>
                    );
                }}
            </Password>
        </div>
    );
}

Float Label#

FloatLabel visually integrates a label with its form element. Visit FloatLabel documentation for more information.

Over Label

In Label

On Label

float-label-demo.tsx

'use client';

import { PasswordChangeEvent, usePasswordProps } from '@primereact/types/shared/password';
import { Label } from 'primereact/label';
import { Password } from 'primereact/password';
import * as React from 'react';

export default function FloatLabelDemo() {
    const [value, setValue] = React.useState<usePasswordProps['value']>('');
    const [value2, setValue2] = React.useState<usePasswordProps['value']>('');
    const [value3, setValue3] = React.useState<usePasswordProps['value']>('');

    return (
        <div className="flex flex-wrap justify-center items-end gap-4">
            <Label.Float>
                <Password value={value} onValueChange={(e: PasswordChangeEvent) => setValue(e.value as string)}>
                    <Password.Input />
                </Password>
                <Label htmlFor="over_label">Over Label</Label>
            </Label.Float>

            <Label.Float variant="in">
                <Password value={value2} onValueChange={(e: PasswordChangeEvent) => setValue2(e.value as string)}>
                    <Password.Input id="in_label" />
                </Password>
                <Label htmlFor="in_label">In Label</Label>
            </Label.Float>

            <Label.Float variant="on">
                <Password value={value3} onValueChange={(e: PasswordChangeEvent) => setValue3(e.value as string)}>
                    <Password.Input id="on_label" />
                </Password>
                <Label htmlFor="on_label">On Label</Label>
            </Label.Float>
        </div>
    );
}

Ifta Label#

IftaLabel is used to create infield top aligned labels. Visit IftaLabel documentation for more information.

Password

ifta-label-demo.tsx

'use client';

import { PasswordChangeEvent, usePasswordProps } from '@primereact/types/shared/password';
import { Label } from 'primereact/label';
import { Password } from 'primereact/password';

import * as React from 'react';

export default function IftaLabelDemo() {
    const [value, setValue] = React.useState<usePasswordProps['value']>('');

    return (
        <div className="flex justify-center">
            <Label.Ifta>
                <Password
                    value={value}
                    inputId="new-password"
                    variant="filled"
                    onValueChange={(e: PasswordChangeEvent) => setValue(e.value as string)}
                >
                    <Password.Input />
                </Password>
                <Label htmlFor="new-password" className="mb-2">
                    Password
                </Label>
            </Label.Ifta>
        </div>
    );
}

Clear Icon#

When Password.ClearIcon component is used, a clear icon is added to reset the Password input.

clear-icon-demo.tsx

'use client';

import { Password } from 'primereact/password';

export default function BasicDemo() {
    return (
        <div className="flex justify-center">
            <Password inputClass="w-56">
                <Password.Input />
                <Password.ClearIcon />
            </Password>
        </div>
    );
}

Sizes#

Password provides small and large sizes as alternatives to the base.

sizes-demo.tsx

'use client';

import { Password } from 'primereact/password';

export default function SizesDemo() {
    return (
        <div className="flex flex-col items-center gap-4">
            <Password size="small">
                <Password.Input placeholder="Small" />
            </Password>
            <Password>
                <Password.Input placeholder="Normal" />
            </Password>
            <Password size="large">
                <Password.Input placeholder="Large" />
            </Password>
        </div>
    );
}

Fluid#

The fluid prop makes the component take up the full width of its container when set to true.

fluid-demo.tsx

'use client';

import { Password } from 'primereact/password';

export default function FluidDemo() {
    return (
        <div>
            <Password fluid>
                <Password.Input />
            </Password>
        </div>
    );
}

Filled#

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

filled-demo.tsx

'use client';

import { Password } from 'primereact/password';

export default function FilledDemo() {
    return (
        <div className="flex justify-center">
            <Password variant="filled">
                <Password.Input />
            </Password>
        </div>
    );
}

Disabled#

Use the disabled property to disable a password input.

disabled-demo.tsx

'use client';

import { Password } from 'primereact/password';

export default function DisabledDemo() {
    return (
        <div className="flex justify-center">
            <Password disabled>
                <Password.Input placeholder="Disabled" />
            </Password>
        </div>
    );
}

Invalid#

Specify the invalid property to display the component with a red border.

invalid-demo.tsx

'use client';

import { PasswordChangeEvent, usePasswordProps } from '@primereact/types/shared/password';
import { Password } from 'primereact/password';
import * as React from 'react';

export default function InvalidDemo() {
    const [value1, setValue1] = React.useState<usePasswordProps['value']>('');
    const [value2, setValue2] = React.useState<usePasswordProps['value']>('');

    return (
        <div className="flex flex-wrap justify-center gap-4">
            <Password value={value1} invalid={!value1} onValueChange={(e: PasswordChangeEvent) => setValue1(e.value as string)}>
                <Password.Input placeholder="Password" />
            </Password>
            <Password value={value2} invalid={!value2} variant="filled" onValueChange={(e: PasswordChangeEvent) => setValue2(e.value as string)}>
                <Password.Input placeholder="Password" />
            </Password>
        </div>
    );
}

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.

On this page

Usage
Examples
Basic
Strength
Requirements
Portal
Toggle Visibility
Template
Float Label
Ifta Label
Clear Icon
Sizes
Fluid
Filled
Disabled
Invalid
Accessibility
Screen Reader
Keyboard Support

Password

Usage#

Examples#

Basic#

Strength#

Requirements#

Portal#

Toggle Visibility#

Template#

Float Label#

Ifta Label#

Clear Icon#

Sizes#

Fluid#

Filled#

Disabled#

Invalid#

Accessibility#

Screen Reader#

Keyboard Support#