# PasswordCreationField
Das PasswordCreationField unterstützt den User dabei, sichere Passwörter zu erstellen. Über eine visuelle Komplexitätsanzeige wird es dem User erleichtert, unsichere Passwörter zu erkennen und zu meiden.
## Overview
# Playground
Verwende ``, um ein PasswordCreationField darzustellen.
Standardmäßig enthält die Component folgende Passwortregeln:
- Mindestlänge von 12 Zeichen
- Mindestens ein Sonderzeichen enthalten
- Mindestens eine Zahl enthalten
- Darf nicht durch [HaveIBeenPwned](https://haveibeenpwned.com/passwords)
verboten sein
```tsx
import {
Label,
PasswordCreationField,
} from "@mittwald/flow-react-components";
import { useState } from "react";
export default () => {
const [password, setPassword] = useState("");
return (
);
}
```
---
# Mit zusätzlichen Buttons
Das PasswordCreationField kann mit zusätzlichen
[Buttons](/04-components/actions/button/overview) ergänzt werden. Diese
Erweiterungen sind flexibel einsetzbar und sollten im direkten Zusammenhang mit
der Passworterstellung stehen.
```tsx
import {
Button,
Label,
PasswordCreationField,
IconSshKey,
} from "@mittwald/flow-react-components";
import { useState } from "react";
export default () => {
const [password, setPassword] = useState("");
return (
);
}
```
## Mit Copy Button
Optional kann ein [CopyButton](/04-components/actions/copy-button/overview)
integriert werden. Dadurch lassen sich erstellte Passwörter direkt in die
Zwischenablage kopieren.
```tsx
import {
CopyButton,
Label,
PasswordCreationField,
} from "@mittwald/flow-react-components";
export default () => {
return (
);
}
```
---
# Passwort Richtlinien
Neben den Standardrichtlinien können eigene Passwortanforderungen definiert
werden. Diese sollten klar formuliert und für User nachvollziehbar sein.
```tsx
import {
Label,
PasswordCreationField,
} from "@mittwald/flow-react-components";
import {
Policy,
RuleType,
} from "@mittwald/flow-react-components/mittwald-password-tools-js";
import { useState } from "react";
export default () => {
const [password, setPassword] = useState("");
return (
);
}
```
---
# Disabled
Ist das PasswordCreationField **disabled**, ist keine Interaktion möglich.
```tsx
import {
Label,
PasswordCreationField,
} from "@mittwald/flow-react-components";
```
---
# Kombiniere mit ...
## React Hook Form
Weitere Details zur Formularlogik und -validierung findest du in der Component
[Form (React Hook Form)](/04-components/react-hook-form/form/overview).
```tsx
import { useForm } from "react-hook-form";
import {
Form,
SubmitButton,
typedField,
} from "@mittwald/flow-react-components/react-hook-form";
import { sleep } from "@/content/04-components/actions/action/examples/lib";
import {
Label,
Section,
PasswordCreationField,
} from "@mittwald/flow-react-components";
import {
generatePasswordCreationFieldValidation,
Policy,
RuleType,
} from "@mittwald/flow-react-components/mittwald-password-tools-js";
export default () => {
const customPolicy = Policy.fromDeclaration({
minComplexity: 3,
rules: [
{
ruleType: RuleType.length,
min: 8,
max: 12,
},
],
});
const form = useForm<{ password: string }>({
defaultValues: {
password: "",
},
});
const Field = typedField(form);
return (
);
}
```
## Develop
# Properties
| Property | Type | Default | Description |
| --- | --- | --- | --- |
| `value` | `string` | - | - |
| `defaultValue` | `string` | - | - |
| `placeholder` | `string` | - | - |
| `validationPolicy` | `PolicyGenericDeclaration` | - | - |
| `id` | `string` | - | The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id). |
| `translate` | `"yes" \| "no"` | - | - |
| `className` | `ClassNameOrFunction` | `'react-aria-TextField'` | The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state. |
| `style` | `StyleOrFunction` | - | The inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element. A function may be provided to compute the style based on component state. |
| `render` | `DOMRenderFunction<"div", TooltipRenderProps>` | - | Overrides the default DOM element with a custom render function. This allows rendering existing components with built-in styles and behaviors such as router links, animation libraries, and pre-styled components. Requirements: - You must render the expected element type (e.g. if `