How to customise list (text) field?

Question

On my user registration page, I would like to add a field where users can type in and select specific key words.

It is possible to make such a field using webforms. It would look as below:

However, my user registration form is not a webform, it is a standard Drupal form, provided by the user module.

I have managed to add a field to the registration form, of type 'List (text)' and then in the 'Manage form display' section there is an option to display it as radio buttons so the user can select more than one option. This works successfully, but what I would really like to achieve is the look above.

Are the use of webforms the only way to achieve this? I guess if I have to use webforms I would have to replace the whole user registration form with a webform.

Answer 1

This will be a lot easier for you, if you use the taxonomy system.

Create a vocabulary for your keywords, then add the different keywords as terms.

The select2 module has a field widget for entity reference fields which allows you to get the autocomplete widget where you can remove the selected terms with an X.

Then you only need to add a little bit of styling, to get it to look like your design.

Hope it makes sense.