<!-- THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. -->
<!-- This file is created by the `yarn generate-readme` script. -->

# PasswordInput

## Description

A controlled password input component.

## Installation

```
yarn add @commercetools-uikit/password-input
```

```
npm --save install @commercetools-uikit/password-input
```

Additionally install the peer dependencies (if not present)

```
yarn add react
```

```
npm --save install react
```

## Usage

```jsx
import PasswordInput from '@commercetools-uikit/password-input';

const Example = () => (
  <PasswordInput
    value="foo"
    onChange={(event) => {
      alert(event.target.value);
    }}
  />
);

export default Example;
```

## Properties

| Props                  | Type                                                                                                  | Required | Default   | Description                                                                                                               |
| ---------------------- | ----------------------------------------------------------------------------------------------------- | :------: | --------- | ------------------------------------------------------------------------------------------------------------------------- |
| `id`                   | `string`                                                                                              |          |           | Used as HTML id property. An id is auto-generated when it is not specified.                                               |
| `name`                 | `string`                                                                                              |          |           | Used as HTML name of the input component. property                                                                        |
| `aria-invalid`         | `boolean`                                                                                             |          |           | Indicate if the value entered in the input is invalid.                                                                    |
| `aria-errormessage`    | `string`                                                                                              |          |           | HTML ID of an element containing an error message related to the input.                                                   |
| `value`                | `string`                                                                                              |    ✅    |           | Value of the input component.                                                                                             |
| `placeholder`          | `string`                                                                                              |          |           | Placeholder text for the input                                                                                            |
| `onChange`             | `ChangeEventHandler`                                                                                  |          |           | Called with an event containing the new value. Required when input is not read only. Parent should pass it back as value. |
| `onBlur`               | `FocusEventHandler`                                                                                   |          |           | Called when input is blurred.                                                                                             |
| `onFocus`              | `FocusEventHandler`                                                                                   |          |           | Called when input is focused.                                                                                             |
| `isAutofocussed`       | `boolean`                                                                                             |          |           | Focus the input on initial render.                                                                                        |
| `isDisabled`           | `boolean`                                                                                             |          | `false`   | Indicates that the input cannot be modified (e.g not authorized, or changes currently saving).                            |
| `isReadOnly`           | `boolean`                                                                                             |          | `false`   | Indicates that the field is displaying read-only content                                                                  |
| `hasError`             | `boolean`                                                                                             |          |           | Indicates that the input has an error                                                                                     |
| `hasWarning`           | `boolean`                                                                                             |          |           | Indicates that the input has a warning due to e.g invalid values                                                          |
| `isPasswordVisible`    | `boolean`                                                                                             |          | `false`   | Indicates whether we show the password or not                                                                             |
| `horizontalConstraint` | `union`<br/>Possible values:<br/>`, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 'scale', 'auto'` |          | `'scale'` | Horizontal size limit of the input fields.                                                                                |
| `autoComplete`         | `union`<br/>Possible values:<br/>`'on' , 'off' , 'current-password' , 'new-password'`                 |          |           | Password autocomplete mode                                                                                                |

## `data-*` props

The component further forwards all `data-` attributes to the underlying `input` component.

## Static methods

### `PasswordInput.isEmpty`

Returns `true` when the value is considered empty, which is when the value is empty or consists of spaces only.

```js
PasswordInput.isEmpty(''); // -> true
PasswordInput.isEmpty(' '); // -> true
PasswordInput.isEmpty('tree'); // -> false
```

## Main Functions and use cases are:

- Password field