PasswordInput

Usage

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.

<PasswordInput
  placeholder="Password"
  label="Password"
  description="Password must include at least one letter, number and special character"
  required
/>

Strength meter example

Password strength meter example with Progress and Popover components:

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.

<PasswordInput
  label="Focus will be on button"
  placeholder="Focus will be on button"
/>

<PasswordInput
  focusInputOnToggle
  label="Focus will move to input"
  placeholder="Focus will move to input"
/>

Controlled

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} />;
}

Accessibility

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