README
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 | ||
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 Possible 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 |
union Possible values: 'on' , 'off' , 'current-password' , 'new-password' |
Password autocomplete mode |
props data-*
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