Code

Props

Props	Data Type	Required
defaultValue	string	❌
className	string	❌
id	string	✅
name	string	✅
placeholder	string	❌
info	string	❌
score	boolean	❌
disabled	boolean	❌
maxLength	number
error	boolean	❌
errorMessage	string	❌
onBlur	function event	❌
onChange	function event	❌
onFocus	function event	❌

maxLength

• maxLength: limitates the max number of characteres allowed on the input.

score

Enabling this feature will score in real-time the user's password, categorizing it in 5 different levels represented by emojis inside the component. Right now there is no data to be returned for the developer to use in order to avoid a weak password registrations because there is any actual delimitation implemented. This is more a graphical tool to give feedback to the users, letting them know if the password is strong or weak.

This feature can change in a future and be able to return a value that can be used by the developers at the moment of validating a password, but right now while this documentation is written, this feature is more a graphical feedback for the user.

Event Response

Property	Data Type
id	string
name	string
label	string
value	string

onBlur, onChange, onFocus

For this example it is going to be use the onChange event, but the same logic can be applied to the other events.

import React, {useState} from 'react';
import {Password} from '@2600hz/sds-react-components';

const Example = ()=>{
    const [password, setPassword] = useState('');
    
    const updateState = (e)=>{
        setSelectedItem(e.value);
    }
    
    return(
        <div className='container'>
            <Password id='password' onChange={updateState} />
        </div>
    )
}

Components Dependency

For this component elaboration there were used the following internal components:

• Label

Live Demo

For detailed code usage documentation, see the Storybooks for each framework below.

React

Form Controls / Password - Basic Password ⋅ Storybooksipster-react-component-storybook.netlify.app