Adding users like a boss: Pro tips for User Input Field success

Some designs work better with people!
we know that our products are only as good as the people who use them. Whether we're managing access, sending invitations, or just selecting recipients, adding users to a list is a common task. First, we must search for and select the right user based on their name or email. Although these interactions follows the same pattern as our trusty dropdowns, it demands an extra step – Adding!

Below, we will understand how we solve this issue.

When the vertical space is free

We can start by typing the name of the user or emails in an input field. This can go two ways:
Firstly, If we are going to select a certain user who already exists in the system, we just need to type their name or email and the input field can work as a dropdown by showing a list of probable matches to our typed letters, and we can just select the users from there.

On the other hand, if the typed name or email is not in the system, the input field does not have to open up a dropdown list and can simply act as a text field.These input fields have to be pre-formatted by type. Meaning, they need to be able to recognize an email or plain text, which is very easy to implement in the front-end only. In case, the typed format does not match the field’s preferred format, the field may show an error, which we will discuss in more details in interactions of form fields.

What really is making a difference here than a simple dropdown field is the presence of a Call-to-action (CTA) button, which will add the selected users from the field to our list. Otherwise, the selections can not simply travel to the list themselves.

Imagine, putting a lot of passengers on a bus, but that bus has to drive somewhere and take the passengers to their destination. Hence, we need a driver! The bus is the input field, the passengers are our selections, and the driver is our CTA button.

Let’s see it in action below. It will follow the same interaction of vertically expanding input fields.

When the vertical space is restricted

When the vertical space for the input field can not be expanded or when it can not push down the components below, it should follow the behaviour as we set for input fields with floating variants here.

When there are no space for the CTA

In some exceptional cases, there may not be enough horizontal spaces in certain components such as a side drawer. Usually filters on any page opens in such side drawers where the horizontal space is restricted by the template. Not only that, but even the vertical space may be restricted as there will be many such input fields one below another.
In such cases, we can omit the “Add” CTA and only show the selections in the input field as such side drawers will always, with a guarantee, have a set of validation button (save or cancel changes) which will effectively add the selections to the filter list (which will be in the back-end and can not be seen).

When there is no existing user

When there are no matches for the typed letters in the input field, but the format of the query is preferred by it, it may allow to add the typed query as a new entry to the system.

This interaction list is expanding. Let me know if anything is missing.