usePassword

Hook that manages password input with mask toggling and controlled or uncontrolled value state.

basic-demo

Usage#

import { usePassword } from '@primereact/headless/password';
 
const { rootProps, state, toggleMask } = usePassword();
 
return <input {...rootProps} />;

usePassword manages input type toggling between password and text, along with value state — see Primitive for a component-based API.

Features#

rootProps returns spread-ready attributes including dynamic type (password or text) and change handler
state.mask tracks the current visibility state (true for hidden, false for visible)
state.value tracks the current input value
toggleMask() method switches between masked and unmasked modes

Behavior#

Default Mask#

Password is masked by default. Set defaultMask to false to start with the password visible.

const password = usePassword({ defaultMask: false });

Controlled Value#

Pass value with onValueChange for controlled value state.

const [value, setValue] = React.useState('');
 
const password = usePassword({
    value,
    onValueChange: (e) => setValue(e.value)
});

Controlled Mask#

Pass mask with onMaskChange for controlled mask toggling.

const [masked, setMasked] = React.useState(true);
 
const password = usePassword({
    mask: masked,
    onMaskChange: (e) => setMasked(e.value)
});

Toggle Mask#

Call toggleMask() to programmatically switch between password and text input type.

const { rootProps, toggleMask, state } = usePassword();
 
<input {...rootProps} />
<button onClick={toggleMask}>
    {state.mask ? 'Show' : 'Hide'}
</button>

Custom Styling with Data Attributes#

[data-scope='password'][data-part='root'] { ... }

API#

usePassword#

Name	Type	Default
`value`	`string`	—
The controlled value of the password input.
`defaultValue`	`string`	—
The default value for uncontrolled mode.
`mask`	`boolean`	—
The controlled mask state of the password input. When true, the password is hidden. When false, the password is visible.
`defaultMask`	`boolean`	—
The default mask state for uncontrolled mode.
`onValueChange`	`(event: usePasswordValueChangeEvent) => void`	—
Callback fired when the password value changes.
`onMaskChange`	`(event: usePasswordMaskChangeEvent) => void`	—
Callback fired when the mask state changes.
`invalid`	`boolean`	—
When present, it specifies that the component should have invalid state style.

Accessibility#

See Password Primitive for WAI-ARIA compliance details and keyboard support.