New Component - Validation code

[turolopezsanabria]

Here we will add all the features needed for this new component:

• Focus in the field that the user needs to fill the following number.
• When the user enters the number, automatically the focus goes to the next field.
• By default, it will be 6 numbers to fill although you can decide how many fields do you want at the begining.
• In mobile devices, when the SMS arrives, the field must be proposed to autofilled with the SMS number recieved.
• We can add an erase button to delete the selection.
• Before verify the code, we can add a button to resend.
• ¿Proceed verification automatically when the user insert the last number?

React Verification code input example: https://github.com/suweya/react-verification-code-input

Specs

https://www.figma.com/file/KEuHkTBkjjb1VX9D2dd1fn/?node-id=0%3A1

[turolopezsanabria]

To the last point, I'm not sure
Any cons doing so?

[nuria-isart]

Specs of the component: https://www.figma.com/file/KEuHkTBkjjb1VX9D2dd1fn/New-Component-Verification-Code?node-id=522%3A478

[turolopezsanabria]

Hey there, small detail
in our component, I always get the suggestion to use a saved password (something that we don't need at all for this case)

Can we disable it?

On an external example, this is from Figma today, no suggestion to use a saved password.

validation.code.figma.mov

[nistadev]

I would also suggest to add a "delete from keyboard feature", where the user press Del key, removing the last introduced value, focusing in the previous input. Here's an example from suweya's demo.

[Alverd04]

I totally agree!

[andresin87]

@Alverd04 is attending this request