> 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.

# PasswordComplexity

The rules a password has to meet, ticked off as it meets them — show them from the moment the field appears rather than after a failed submit, and keep the same set everywhere a password is created. The component only paints: you compute each rule's `met` and pass it in, with `passwordValidators` shipped alongside for that. A satisfied rule is struck through and steps back, so what is left to do is what stands out.

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

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

export const AllUnmet = () => <PasswordComplexity items={defaultItems} />;
```

## Usage

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

## Examples

### All met

Everything satisfied: green checks with the labels struck through, which reads as done
without needing a success message on top.

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

export const AllMet = () => (
  <PasswordComplexity items={defaultItems.map(item => ({ ...item, met: true }))} />
);
```

### Partially met

The state actually seen most of the time. Three rules are struck through and two are not,
and the two are what the eye goes to.

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

export const PartiallyMet = () => (
  <PasswordComplexity
    items={[
      { id: 'length', label: 'At least 8 characters', met: true },
      { id: 'uppercase', label: 'Contains an uppercase letter', met: true },
      { id: 'lowercase', label: 'Contains a lowercase letter', met: true },
      { id: 'number', label: 'Contains a number', met: false },
      { id: 'symbol', label: 'Contains a special character', met: false },
    ]}
  />
);
```

### Interactive

Two fields wired to `passwordValidators`, `passwordsMatch` included, recomputed on every
keystroke — the real-time checking the rules are meant to be shown with.

```tsx
import { useState } from 'react';
import { Input } from '@wallarm-org/design-system/Input';
import { PasswordComplexity, type PasswordComplexityItem, passwordValidators } from '@wallarm-org/design-system/PasswordComplexity';

export const Interactive = () => {
  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–Z)',
      met: passwordValidators.hasUppercase(password),
    },
    {
      id: 'lowercase',
      label: 'One lowercase letter (a–z)',
      met: passwordValidators.hasLowercase(password),
    },
    { id: 'number', label: 'One number (0–9)', 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 (
    <div className='flex flex-col gap-16 w-[320px]'>
      <Input
        type='password'
        placeholder='New password...'
        value={password}
        onChange={e => setPassword(e.target.value)}
      />
      <Input
        type='password'
        placeholder='Confirm password...'
        value={confirmPassword}
        onChange={e => setConfirmPassword(e.target.value)}
      />
      <PasswordComplexity items={items} />
    </div>
  );
};
```

## Props

| Prop           | Type                                                 | Default | Description |
| -------------- | ---------------------------------------------------- | ------- | ----------- |
| items \*       | `PasswordComplexityItem[]`                           |         |             |
| title          | `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, Element> \| undefined`        |         |             |
| data-testid    | `string \| undefined`                                |         |             |
| spacing        | `ListSpacing \| undefined`                           | `4`     |             |