> For AI agents: the complete documentation index is available at https://wallarm.github.io/design-system/llms.txt, the full documentation bundle is available at https://wallarm.github.io/design-system/llms-full.txt.

# PasswordInput

A password field with a reveal toggle, which is the whole point of reaching for it over an `Input` of type password. Where rules are enforced, pair it with `PasswordComplexity` so the reader watches them being met rather than discovering them on submit.

[Source](https://github.com/wallarm/design-system/tree/main/packages/design-system/src/components/PasswordInput) · [Storybook](https://wallarm.github.io/design-system/storybook/?path=/docs/inputs-passwordinput--overview)

```tsx
import { PasswordInput } from '@wallarm-org/design-system/PasswordInput';

<PasswordInput placeholder="Enter" />
```

## Usage

```tsx
import { PasswordInput } from '@wallarm-org/design-system/PasswordInput';
```

## Examples

### With field

Inside `Field`, which supplies the label and description above it.

```tsx
import { Field, FieldAction, FieldIndicator, FieldLabel } from '@wallarm-org/design-system/Field';
import { PasswordInput } from '@wallarm-org/design-system/PasswordInput';

export const WithField = () => (
  <Field required>
    <FieldLabel>
      Password
      <FieldIndicator />
      <FieldAction type='muted'>Forgot password?</FieldAction>
    </FieldLabel>
    <PasswordInput placeholder='Enter' />
  </Field>
);
```

### With error

`error` on the field. Say what is wrong in `FieldError` — a red border on a masked field
leaves the reader guessing at something they cannot see.

```tsx
import { Field, FieldError, FieldIndicator, FieldLabel } from '@wallarm-org/design-system/Field';
import { PasswordInput } from '@wallarm-org/design-system/PasswordInput';

export const WithError = () => (
  <Field required>
    <FieldLabel>
      Password
      <FieldIndicator />
    </FieldLabel>
    <PasswordInput placeholder='Enter' error />
    <FieldError>Password is incorrect</FieldError>
  </Field>
);
```

### With requirements

`PasswordComplexity` fed by the exported `passwordValidators`, ticking off each rule as it
is met. Show the rules from the start rather than revealing them after a failure.

```tsx
import { useState } from 'react';
import { Field, FieldLabel } from '@wallarm-org/design-system/Field';
import { PasswordComplexity, type PasswordComplexityItem, passwordValidators } from '@wallarm-org/design-system/PasswordComplexity';
import { PasswordInput } from '@wallarm-org/design-system/PasswordInput';
import { VStack } from '@wallarm-org/design-system/Stack';

export const WithRequirements = () => {
  const [password, setPassword] = useState('');
  const [confirmPassword, setConfirmPassword] = useState('');

  const items: PasswordComplexityItem[] = [
    {
      id: 'length',
      label: 'At least 8 characters',
      met: passwordValidators.minLength(8)(password),
    },
    {
      id: 'uppercase',
      label: 'One uppercase letter (A\u2013Z)',
      met: passwordValidators.hasUppercase(password),
    },
    {
      id: 'lowercase',
      label: 'One lowercase letter (a\u2013z)',
      met: passwordValidators.hasLowercase(password),
    },
    { id: 'number', label: 'One number (0\u20139)', met: passwordValidators.hasNumber(password) },
    {
      id: 'symbol',
      label: 'One symbol (e.g. ! ? @ #)',
      met: passwordValidators.hasSymbol(password),
    },
    {
      id: 'match',
      label: 'Both passwords match',
      met: passwordValidators.passwordsMatch(password, confirmPassword),
    },
  ];

  return (
    <VStack gap={16} className='w-[320px]'>
      <Field>
        <FieldLabel>New password</FieldLabel>
        <PasswordInput
          placeholder='New password...'
          value={password}
          onChange={e => setPassword(e.target.value)}
        />
      </Field>

      <VStack gap={6}>
        <Field>
          <FieldLabel>Confirm password</FieldLabel>
          <PasswordInput
            placeholder='Confirm password...'
            value={confirmPassword}
            onChange={e => setConfirmPassword(e.target.value)}
          />
        </Field>
        <PasswordComplexity items={items} />
      </VStack>
    </VStack>
  );
};
```

### Disabled

Dimmed, with the reveal toggle out as well — there is nothing to reveal that the reader can
act on.

```tsx
import { PasswordInput } from '@wallarm-org/design-system/PasswordInput';

<PasswordInput placeholder="Enter" disabled />
```

### Sizes

The same height scale as `Input`, so a password field lines up with the fields around it.

```tsx
import { PasswordInput } from '@wallarm-org/design-system/PasswordInput';
import { HStack } from '@wallarm-org/design-system/Stack';

export const Sizes = () => (
  <HStack gap={16} align='start'>
    <PasswordInput placeholder='Default' size='default' />
    <PasswordInput placeholder='Medium' size='medium' />
    <PasswordInput placeholder='Small' size='small' />
  </HStack>
);
```

## Props

| Prop           | Type                                                                         | Default   | Description |
| -------------- | ---------------------------------------------------------------------------- | --------- | ----------- |
| title          | `string \| undefined`                                                        |           |             |
| pattern        | `string \| undefined`                                                        |           |             |
| defaultChecked | `boolean \| undefined`                                                       |           |             |
| defaultValue   | `string \| number \| readonly string[] \| undefined`                         |           |             |
| autoFocus      | `boolean \| undefined`                                                       |           |             |
| id             | `string \| undefined`                                                        |           |             |
| tabIndex       | `number \| undefined`                                                        |           |             |
| rel            | `string \| undefined`                                                        |           |             |
| onChange       | `ChangeEventHandler<T, HTMLInputElement> \| undefined`                       |           |             |
| disabled       | `boolean \| undefined`                                                       | `false`   |             |
| name           | `string \| undefined`                                                        |           |             |
| value          | `string \| number \| readonly string[] \| undefined`                         |           |             |
| size           | `{ default: string; medium: string; small: string; 'inline-edit': string; }` | `default` |             |
| alt            | `string \| undefined`                                                        |           |             |
| data-testid    | `string \| undefined`                                                        |           |             |
| height         | `string \| number \| undefined`                                              |           |             |
| src            | `string \| undefined`                                                        |           |             |
| width          | `string \| number \| undefined`                                              |           |             |
| error          | `{ true: string; false: string; }`                                           | `false`   |             |
| autoComplete   | `HTMLInputAutoCompleteAttribute \| undefined`                                |           |             |
| maxLength      | `number \| undefined`                                                        |           |             |
| minLength      | `number \| undefined`                                                        |           |             |
| placeholder    | `string \| undefined`                                                        |           |             |
| readOnly       | `boolean \| undefined`                                                       |           |             |
| required       | `boolean \| undefined`                                                       |           |             |
| checked        | `boolean \| undefined`                                                       |           |             |
| step           | `string \| number \| undefined`                                              |           |             |
| accept         | `string \| undefined`                                                        |           |             |
| max            | `string \| number \| undefined`                                              |           |             |
| min            | `string \| number \| undefined`                                              |           |             |
| multiple       | `boolean \| undefined`                                                       |           |             |