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

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

Placeholder

Label

Description

Error

Variant

Radius

Size

Disabled

With asterisk

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

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:

Change visibility toggle icon

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

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

Controlled visibility toggle

Control visibility state with visible and onVisibilityChange props, for example, the props can be used to sync visibility state between two inputs:

Password

Confirm password

import { useDisclosure } from '@mantine/hooks';
import { PasswordInput, Stack } from '@mantine/core';

function Demo() {
  const [visible, { toggle }] = useDisclosure(false);
  return (
    <Stack maw={380} mx="auto">
      <PasswordInput
        label="Password"
        defaultValue="secret"
        visible={visible}
        onVisibilityChange={toggle}
      />
      <PasswordInput
        label="Confirm password"
        defaultValue="secret"
        visible={visible}
        onVisibilityChange={toggle}
      />
    </Stack>
  );
}

Strength meter example

Password strength meter example with Progress and Popover components:

Your password

Focus behavior

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

Toggle button is not focusable

Toggle button is focusable

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

Your password

Invalid password

// Error as boolean – red border color
<PasswordInput error />

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

Disabled state

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

Disabled without value

Disabled with value

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

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

With icon

Your password

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

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

Get input ref

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

function PasswordInputDemo() {
  const ref = useRef<HTMLInputElement>(null);
  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

PinInput – @mantine/core

PasswordInput component props

Name	Type	Description
defaultVisible	boolean	Determines whether input content should be visible (uncontrolled)
description	ReactNode	Input description, displayed after label
descriptionProps	Record<string, any>	Props spread to description element
disabled	boolean	Disabled input state
error	ReactNode	Displays error message after input
errorProps	Record<string, any>	Props spread to error element
icon	ReactNode	Adds icon on the left side of input
iconWidth	Width<string \| number>	Width of icon section
inputContainer	(children: ReactNode) => ReactNode	Input container component, defaults to React.Fragment
inputWrapperOrder	("input" \| "label" \| "error" \| "description")[]	Controls order of the Input.Wrapper elements
label	ReactNode	Input label, displayed before input
labelProps	Record<string, any>	Props spread to label element
onVisibilityChange	(visible: boolean) => void	Called when visibility changes
radius	number \| "xs" \| "sm" \| "md" \| "lg" \| "xl"	Key of theme.radius or any valid CSS value to set border-radius, theme.defaultRadius by default
required	boolean	Sets required on input element
size	"xs" \| "sm" \| "md" \| "lg" \| "xl"	Input size
toggleTabIndex	0 \| -1	Toggle button tabIndex, set to 0 to make button focusable with tab key
type	HTMLInputTypeAttribute	Input element type
variant	Variants<"unstyled" \| "default" \| "filled">	Defines input appearance, defaults to default in light color scheme and filled in dark
visibilityToggleIcon	FC<{ reveal: boolean; size: string \| number; }>	Provide your own visibility toggle icon
visibilityToggleLabel	string	aria-label for visibility toggle button
visible	boolean	Determines whether input content should be visible (controlled)
withAsterisk	boolean	Determines whether required asterisk should be rendered, overrides required prop, does not add required attribute to the input
wrapperProps	Record<string, any>	Props passed to root element (InputWrapper component)

PasswordInput component Styles API

Name	Static selector	Description
wrapper	.mantine-PasswordInput-wrapper	Root Input element
icon	.mantine-PasswordInput-icon	Input icon wrapper on the left side of the input, controlled by icon prop
input	.mantine-PasswordInput-input	Main input element
rightSection	.mantine-PasswordInput-rightSection	Input right section, controlled by rightSection prop
root	.mantine-PasswordInput-root	Root element
label	.mantine-PasswordInput-label	Label element styles, defined by label prop
error	.mantine-PasswordInput-error	Error element styles, defined by error prop
description	.mantine-PasswordInput-description	Description element styles, defined by description prop
required	.mantine-PasswordInput-required	Required asterisk element styles, defined by required prop
visibilityToggle	.mantine-PasswordInput-visibilityToggle	Visibility toggle button
innerInput	.mantine-PasswordInput-innerInput	Actual input element

Learn more about Styles API

Build fully functional accessible web applications faster than ever

About

Contribute About Mantine Changelog Releases

Community

Chat on Discord Follow on Twitter Follow on GitHub GitHub discussions

Project

Mantine UI Documentation GitHub organization npm organization

Built by Vitaly Rtishchev and these awesome people

Join Discord community

Follow Mantine on Twitter