@commercetools-uikit/password-input
Version:
A controlled password input component.
88 lines (64 loc) • 6.47 kB
Markdown
<!-- 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