Code
Props
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
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.
Components Dependency
For this component elaboration there were used the following internal components:
Live Demo
For detailed code usage documentation, see the Storybooks for each framework below.
React
Last updated