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

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


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:

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


function Demo() {
  const [visible, { toggle }] = useDisclosure(false);
  return (
    <Stack sx={{ maxWidth: 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:

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

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 { IconLock } from '@tabler/icons';


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

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
Radio – @mantine/core

PasswordInput component props

NameTypeDescription
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 in px
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"
Input border-radius from theme or number to set border-radius in px
required
boolean
Sets required on input element
rightSection
ReactNode
Right section of input, similar to icon but on the right
rightSectionProps
Record<string, any>
Props spread to rightSection div element
rightSectionWidth
Width<string | number>
Width of right section, is used to calculate input padding-right
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
"unstyled" | "default" | "filled"
Defines input appearance, defaults to default in light color scheme and filled in dark
visibilityToggleIcon
FC<{ reveal: boolean; size: 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

NameStatic selectorDescription
wrapper.mantine-PasswordInput-wrapperRoot Input element
invalid.mantine-PasswordInput-invalidInvalid input modifier
disabled.mantine-PasswordInput-disabledInvalid disabled modifier
icon.mantine-PasswordInput-iconInput icon wrapper on the left side of the input, controlled by icon prop
withIcon.mantine-PasswordInput-withIconInput element styles when used with icon, controlled by icon prop
input.mantine-PasswordInput-inputMain input element
rightSection.mantine-PasswordInput-rightSectionInput right section, controlled by rightSection prop
root.mantine-PasswordInput-rootRoot element
label.mantine-PasswordInput-labelLabel element styles, defined by label prop
error.mantine-PasswordInput-errorError element styles, defined by error prop
description.mantine-PasswordInput-descriptionDescription element styles, defined by description prop
required.mantine-PasswordInput-requiredRequired asterisk element styles, defined by required prop
visibilityToggle.mantine-PasswordInput-visibilityToggleVisibility toggle button
innerInput.mantine-PasswordInput-innerInputActual input element
Learn more about Styles API
Build fully functional accessible web applications faster than ever
About
ContributeAbout MantineChangelogReleases
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