# UI: PasswordField

> Ein Passwortfeld mit einem Knopf, der das Passwort zeigt oder verbirgt.

Source: https://pithyx.org/de/docs/reference/sdk/ui/password-field/
Markdown: https://pithyx.org/de/docs/reference/sdk/ui/password-field.md

Ein Passwortfeld mit einem Knopf, der das Passwort zeigt oder verbirgt. Importiere die Token-Datei einmal (`@pithyx/ui/tokens.css`) und umschließe die App mit `UiProvider`; siehe [@pithyx/ui](https://pithyx.org/de/docs/sdk/ui/).

Beim Build aus den TSDoc-Kommentaren von @pithyx/ui 1.0.0-rc.9 erzeugt; der Text unter den Überschriften ist der Kommentar im Quelltext und bleibt Englisch.

## Schnittstellen

### PasswordFieldProps

The props of [PasswordField](#passwordfield); `autoComplete` tells password managers what to do.

#### Erweitert

- `Omit`\<[`TextFieldProps`](https://pithyx.org/de/docs/reference/sdk/ui/text-field/#textfieldprops), `"type"` \| `"trailing"`\>

#### Eigenschaften

##### label

```ts
label: ReactNode;
```

The visible label, also the accessible name.

###### Geerbt von

[`TextFieldProps`](https://pithyx.org/de/docs/reference/sdk/ui/text-field/#textfieldprops).[`label`](https://pithyx.org/de/docs/reference/sdk/ui/text-field/#label)

##### description?

```ts
optional description?: ReactNode;
```

A hint below the input, announced with it.

###### Geerbt von

[`TextFieldProps`](https://pithyx.org/de/docs/reference/sdk/ui/text-field/#textfieldprops).[`description`](https://pithyx.org/de/docs/reference/sdk/ui/text-field/#description)

##### errorMessage?

```ts
optional errorMessage?: ReactNode;
```

The text shown while the field is invalid (`isInvalid` or a failed `validate`).

###### Geerbt von

[`TextFieldProps`](https://pithyx.org/de/docs/reference/sdk/ui/text-field/#textfieldprops).[`errorMessage`](https://pithyx.org/de/docs/reference/sdk/ui/text-field/#errormessage)

##### placeholder?

```ts
optional placeholder?: string;
```

A hint inside the empty input; never a replacement for the label.

###### Geerbt von

[`TextFieldProps`](https://pithyx.org/de/docs/reference/sdk/ui/text-field/#textfieldprops).[`placeholder`](https://pithyx.org/de/docs/reference/sdk/ui/text-field/#placeholder)

##### className?

```ts
optional className?: string;
```

Extra class names for the field, added after its own.

###### Geerbt von

[`TextFieldProps`](https://pithyx.org/de/docs/reference/sdk/ui/text-field/#textfieldprops).[`className`](https://pithyx.org/de/docs/reference/sdk/ui/text-field/#classname)

##### inputClassName?

```ts
optional inputClassName?: string;
```

Extra class names for the input element.

###### Geerbt von

[`TextFieldProps`](https://pithyx.org/de/docs/reference/sdk/ui/text-field/#textfieldprops).[`inputClassName`](https://pithyx.org/de/docs/reference/sdk/ui/text-field/#inputclassname)

##### autoCapitalize?

```ts
optional autoCapitalize?: "none" | "characters";
```

"none" for user names and codes, so phones do not capitalize the first letter.

###### Geerbt von

```ts
Omit.autoCapitalize;
```

##### autoComplete

```ts
autoComplete: 'current-password' | 'new-password';
```

`current-password` to sign in, `new-password` to set one.

###### Überschreibt

```ts
Omit.autoComplete;
```

## Funktionen

### PasswordField()

```ts
function PasswordField(props): Element;
```

A password input with a button that shows or hides the password. The button's label comes from the package's own
texts in the language of the nearest `UiProvider`.

#### Parameter

| Parameter | Typ                                         | Beschreibung                                                                                                                               |
| --------- | ------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------ |
| `props`   | [`PasswordFieldProps`](#passwordfieldprops) | The props of [TextField](https://pithyx.org/de/docs/reference/sdk/ui/text-field/#textfield) without `type` and `trailing`, plus the required `autoComplete`. |

#### Rückgabewert

`Element`

The password field.