v4.2.12

PasswordInput

Capture password from user with option to toggle visibility
Import
Source
View source code
Docs
Edit this page
Package
@mantine/core

Usage

Use PasswordInput when you need to capture password from user. Component provides option to toggle password visibility, if you do not want this feature, use TextInput component with type="password".

Password must include at least one letter, number and special character
Radius
xs
sm
md
lg
xl
Size
xs
sm
md
lg
xl
import { PasswordInput } from '@mantine/core';


function Demo() {
  return (
    <PasswordInput
      placeholder="Password"
      label="Password"
      description="Password must include at least one letter, number and special character"
      required
    />
  );
}

Controlled

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

Change visibility toggle icon

You can change visibility toggle icon with visibilityToggleIcon prop. Pass react component that accepts reveal and size props:

import { PasswordInput } from '@mantine/core';
import { EyeCheck, EyeOff } from 'tabler-icons-react';


function Demo() {
  return (
    <PasswordInput
      label="Change visibility toggle icon"
      placeholder="Change visibility toggle icon"
      defaultValue="secret"
      visibilityToggleIcon={({ reveal, size }) =>
        reveal ? <EyeOff size={size} /> : <EyeCheck size={size} />
      }
    />
  );
}

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 toggleTabIndex. If prop is 0 then toggle control will be focusable with tab key:

import { PasswordInput } from '@mantine/core';


function Demo() {
  return (
    <>
      <PasswordInput
        label="Toggle button is not focusable"
        placeholder="Toggle button is not focusable"
      />


      <PasswordInput
        label="Toggle button is focusable"
        placeholder="Toggle button is focusable"
        toggleTabIndex={0}
      />
    </>
  );
}

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:

import { PasswordInput } from '@mantine/core';


function Demo() {
  return <PasswordInput disabled />;
}

With icon

import { PasswordInput } from '@mantine/core';
import { Lock } from 'tabler-icons-react';


function Demo() {
  return <PasswordInput label="Your password" placeholder="Your password" icon={<Lock size={16} />} />;
}

Get input ref

import { useRef } from 'react';
import { PasswordInput } from '@mantine/core';


function PasswordInputDemo() {
  const ref = useRef<HTMLInputElement>();
  return <PasswordInput ref={ref} />;
}

Accessibility

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

<PasswordInput /> // -> not ok, input is not labeled
<PasswordInput label="Your password" /> // -> ok, input and label is connected
<PasswordInput aria-label="Your password" /> // -> ok, label is not visible but will be announced by screen reader
Go back
NumberInput – @mantine/core
Up next
RadioGroup – @mantine/core
Build fully functional accessible web applications faster than ever
About
ContributeMedia assetsChangelogReleases
Community
Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions
Project
Mantine UIDocumentationGithub organizationnpm organization
Built by Vitaly Rtishchev and these awesome people
Join Discord community
Follow Mantine on Twitter