# UI: PasswordField

> A password input with a button that shows or hides the password.

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

A password input with a button that shows or hides the password. Import the token file once (`@pithyx/ui/tokens.css`) and wrap the app in `UiProvider`; see [@pithyx/ui](https://pithyx.org/docs/sdk/ui/).

Generated from the TSDoc comments of @pithyx/ui 1.0.0-rc.9 at build time; the text below the headings is the comment in the source.

## Interfaces

### PasswordFieldProps

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

#### Extends

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

#### Properties

##### label

```ts
label: ReactNode;
```

The visible label, also the accessible name.

###### Inherited from

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

##### description?

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

A hint below the input, announced with it.

###### Inherited from

[`TextFieldProps`](https://pithyx.org/docs/reference/sdk/ui/text-field/#textfieldprops).[`description`](https://pithyx.org/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`).

###### Inherited from

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

##### placeholder?

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

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

###### Inherited from

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

##### className?

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

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

###### Inherited from

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

##### inputClassName?

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

Extra class names for the input element.

###### Inherited from

[`TextFieldProps`](https://pithyx.org/docs/reference/sdk/ui/text-field/#textfieldprops).[`inputClassName`](https://pithyx.org/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.

###### Inherited from

```ts
Omit.autoCapitalize;
```

##### autoComplete

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

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

###### Overrides

```ts
Omit.autoComplete;
```

## Functions

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

#### Parameters

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

#### Returns

`Element`

The password field.