password-input.mdx

import { PasswordInputDemos } from '@docs/demos'; import { Layout } from '@/layout'; import { MDX_DATA } from '@/mdx';

export default Layout(MDX_DATA.PasswordInput);

Usage

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

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:

Change visibility toggle icon

To change visibility toggle icon, pass a React component that accepts reveal prop to visibilityToggleIcon:

Strength meter example

Password strength meter example with Progress and Popover components:

<Demo data={PasswordInputDemos.strengthMeter} demoProps={{ zIndex: 4 }} />

Usage without visibility toggle

If you do not need visibility toggle button, use TextInput component instead:

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

function Demo() {
  return <TextInput type="password" />;
}

Note that when rightSection prop is used, visibility toggle button is not rendered.

Error state

Disabled

When disabled prop is set, visibility toggle button is hidden:

To set aria-label on the visibility toggle button, use visibilityToggleButtonProps prop:

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

function Demo() {
  return (
    <PasswordInput
      label="Password"
      visibilityToggleButtonProps={{
        'aria-label': 'Toggle password visibility',
      }}
    />
  );
}