Capture password from user with option to toggle visibility


Use PasswordInput when you need to capture password from user. Component provides option to toggle password visibility, if you do not this feature, use TextInput component with type="password". Component supports all props from Input and InputWrapper components.

Password must include at least one letter, number and special character
description="Password must include at least one letter, number and special character"

Strength meter example

Password strength meter example with Progress and Progress components:

Strong password should include letters in lower and uppercase, at least 1 number, at least 1 special symbol

Focus behavior

You can control focus behavior with toggleTabIndex. If prop is 0 then toggle control will be focusable with tab key:

label="Toggle button is not focusable"
placeholder="Toggle button is not focusable"
label="Toggle button is focusable"
placeholder="Toggle button is focusable"


import { useState } from 'react';
import { PasswordInput } from '@mantine/core';
function Demo() {
const [value, setValue] = useState('');
return <PasswordInput value={value} onChange={(event) => setValue(event.currentTarget.value)} />;

Invalid state and error

Invalid password
// Error as boolean – red border color
<PasswordInput error />
// Error as React node – red border color and message below input
<PasswordInput error="Invalid email" />

Disabled state

In disabled state button to toggle password visibility id not displayed:

<PasswordInput disabled />

With icon

You can use any React node as icon:

<PasswordInput icon={<LockIcon />} />

Get element ref

You can get input ref by passing elementRef prop to PasswordInput component:

import { useRef } from 'react';
import { PasswordInput } from '@mantine/core';
function PasswordInputDemo() {
const ref = useRef(null);
return <PasswordInput elementRef={ref} />;

Server side rendering

Component uses use-id hook to generate unique ids and aria- attributes, provide static id prop to prevent props mismatch:

<PasswordInput /> // -> random id generated both on client and server, props mismatch warning
<PasswordInput id="my-password-input" /> // -> id is static, no mismatches


To make component more accessible for users with screen readers set showPasswordLabel and hidePasswordLabel props. One of these props is added as title to visibility toggle button according to state:

<PasswordInput showPasswordLabel="Show password" hidePasswordLabel="Hide password" />

Provide aria-label in case you use component without label for screen reader support:

<PasswordInput label="Your password" />; // -> ok, input and label is connected
<PasswordInput />; // not ok, input is not labeled
<PasswordInput aria-label="Your password" />; // -> ok, label is not visible but will be announced by screen reader
Build fully functional accessible web applications with ease
Your feedback is most valuable contribution to the project, please share how you use Mantine, what features are missing and what is done good
Leave feedback