> For the complete documentation index, see [llms.txt](https://3merge.gitbook.io/q3/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://3merge.gitbook.io/q3/client/forms/presets/less-than-passwordchange-greater-than.md).

# \<PasswordChange />

Change your password preset with password strength validation

The `<PasswordChange />` component requires password confirmation to continue. It's "previous" value is somewhat blind, so that validation should live server-side. The client only protects against mistyping in the new password.

To help user set a password, the preset also provides the following validation:

1. New passwords must be at least 8 characters;
2. New passwords must contain at least 1 lowercase and 1 uppercase character;
3. New passwords must contain at least 1 special character;
4. New passwords must contain at least 1 number.

### API

| Prop       | Type     | Description                                                                                                                                                |
| ---------- | -------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `onSubmit` | Function | Submit handler to receive the previous, new, and confirmed password values. If not provided, the component will post to the default Q3 verification route. |

### Example

```jsx
import React from 'react';
import { PasswordChange } from 'q3-ui-forms/lib/presets';

const submitHandler = ({ previous, newPassword, confirmNewPassword }) => {
    // noop
};

const PasswordChangeExample = () => (
    <PasswordChange onSubmit={submitHandler} />
);
```