I'm creating a dialog (modal) that asks the user to enter multiple email addresses to which an item on the website is shared to. The dialog is about 530x500 pixels big.

Right now I'm asking the user to enter an email address in a textfield and hit enter. Upon hitting enter, the email address appears as a box in a vertical stack of boxes below the text field. Each box has a remove link so the user can remove any email address they've entered. This basically looks like a vertical version of the usual 'tag' boxes used in Hotmail or Yahoo's webmail's to/cc/bcc text inputs.

Any better way of doing this? Especially taking into account common copy-paste scenarios, or integration with third-party address book services.

  • 1
    Are you able to provide an example of how this is currently set up? You should be able to add a simple Balsamiq diagram using the smiley-face icon in the question editor.
    – JonW
    Mar 7, 2012 at 11:53
  • 2
    What you are doing is fine as far as i know !! Or you can just ask the users to add comma and add emails .. This is been used for a long time so people are used to it Mar 7, 2012 at 12:01

3 Answers 3


The description you've given sounds just fine to me - the only change I'd make would be to allow the user to enter multiple comma (,) or semi-colon (;) separated email addresses at once, with your code separating/parsing them into distinct addresses when they user presses enter.

This takes care of the copy/paste scenario - the key trap is not to be too sensitive when parsing the addresses, as there is wide variety in "valid" addresses.

[Example: I've had an e-commerce site refuse my user registration because my email address contained a period (.)! I took my business elsewhere.]

  • Hi @Bevan how would you go about explaining to the user that they can enter multiple email addresses and how to separate them? I am implementing something similar and worry that a tool-tip will become very long winded.
    – OpenTage
    Aug 8, 2014 at 10:13
  • 1
    I'd start by using a field label that's plural. If you show prompt text inside the field when it's blank, show multiple email addresses. A tool-tip could be as simple as "Separate each email address with a semicolon (;).". Once you have the basics in place, try it out - and iterate.
    – Bevan
    Aug 9, 2014 at 5:44

You could provide a textarea to paste in clipboard information or comma separated email adresses. Upon pressing enter or on change to this textarea you could parse the content and list the email adresses in the stacked boxes like you already do. This way the user can remove unwanted adresses or add others


If you fancy a little javascript you could setup a simple "observer" textarea (or texfield);

1) you user starts typing some email address, and your js checks each typing;

2) once your script recognizes a potential end-of-address char (eg, space, comma, colon) parses the field's content

3.a) if it is a valid email, adds it to a (visible) list and clears the input field content

3.b) if it isn't a valid email address some error feedback appears somewhere

4) [repeat from 1) ]

note 1: consider that each built-up list element (the single added addresses) should have a simple removal icon;

note 2: you can store each correct address in some hidden field (easiest for removal).

  • 2
    Such automation will be confusing to users: they won't understand right away why the text has disappeared. Also, since this is UX forum not SO, we prefer to see solutions that explain user behavior rather than just code.
    – dnbrv
    Mar 7, 2012 at 16:18

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.