Generate suggestions for email input

Sujith — Wed, 23 Aug 2023 12:23:40 +0000

Providing input suggestions to the user can imporve your apps user expirence 2x more!

Also, providing suggestions makes sure that the user have the ability to easily choose the options without much hussle.

Recently while i was building an app i stumbled upon a similar use case where i needed to show some email suggestion when user is trying to register his/her account for the first time.

I went through couple of UI designs that fits the most for my app.

Let's see how we can easily create a suggestible email input just using html -

As you can see from the above code, i have created an input wrapper which contains a label and an input field

<input type="email" size="40" list="defaultSuggestions" placeholder="johndoe@test.com"/>

Here we are setting the attribute type as email, size is basically the width of the input field, list is required in order to show the suggestion based on the key that we have given to the list attribute, placeholder attribute enables you to provide a hint text about the values that need to be entered in an input field.

I have also added my own styles to the input fields, feel free to add your own.

Next let's see how we can bring in the suggestion for our email input field.

The datalist attribute that you can see the above code is what makes the email input field to show the recommended options that's available to choose from the dropdown.

The datalist contains an id attribute which should be same as the name given to the email input attribute list. In this example the id is "defaultSuggestions".

datalist also contains child elements that's required to show the suggestions. option tag lets you create different options or it can represent menu items in popups or dropdowns. option tag takes valueas its attribute, the value shows the suggestible values that will be used inside the email input.

And that's it, you have just created your email input suggestions.

Click on the email input and you will see the magic!

Cheers!👋

Let's connect - https://twitter.com/reachsujith

DEV Community: Sujith

Generate suggestions for email input