useInputPassword

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

basic-demo

Usage#

import { useInputPassword } from '@primereact/headless/inputpassword';

const { rootProps, state, toggleMask } = useInputPassword();
 
return <input {...rootProps} />;

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

Features#

Mask state — tracks current visibility in state.mask and flips the input's type attribute accordingly
Value state — state.value holds the current input text for controlled or uncontrolled usage
Toggle action — toggleMask() switches between masked and unmasked modes imperatively
Independent control — value and mask can be controlled separately via value/onValueChange and mask/onMaskChange

Working with callbacks#

Controlled value#

Pass value and onValueChange to drive the input from outside state — required for form libraries or validation flows.

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

Controlled mask#

Pass mask and onMaskChange when the visibility state is owned by a parent (for example, syncing across multiple fields).

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

Toggle button#

Call toggleMask() from a show/hide button, driving its label from state.mask.

const { rootProps, toggleMask, state } = useInputPassword();

Styling with data attributes#

The root input includes data-scope="password" and data-part="root" for styling.

[data-scope='password'][data-part='root'] {
    padding: 0.5rem;
    border: 1px solid #ccc;
    border-radius: 0.25rem;
}
 
[data-scope='password'][data-part='root']:focus {
    border-color: var(--p-primary-color);
    outline: none;
}

API#

useInputPassword#

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: useInputPasswordValueChangeEvent) => void`	—
Callback fired when the password value changes.
`onMaskChange`	`(event: useInputPasswordMaskChangeEvent) => void`	—
Callback fired when the mask state changes.
`invalid`	`boolean`	—
When present, it specifies that the component should have invalid state style.

Accessibility#

Standard text input behavior plus a toggle to reveal or hide the masked value. See Primitive for full WAI-ARIA compliance details.