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. See full information about shared inputs props in inputs guide.

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 Popover 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 focusInputOnToggle. If prop is true then focus will be moved to input when visibility changes, otherwise focus will be left on toggle button.

label="Focus will be on button"
placeholder="Focus will be on button"
label="Focus will move to input"
placeholder="Focus will move to input"


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

Get element ref

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

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


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