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

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 | unionPossible values:, 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 | unionPossible values:'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.

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

Main Functions and use cases are:

• Password field