ZK chosenboxes allow users to select and insert multiple values into a single input field.

Like a combobox, chosenbox offers search-while-you-type and selection via mouse, as well as on-demand creation of new items

<zk>
    <style src="/widgets/combobox/chosenbox/style.css"/>

    <vlayout hflex="1"
    	viewModel="@id('vm') @init('demo.combobox.chosenbox.ChosenboxViewModel')">
    	<image sclass="maillogo" src="/widgets/combobox/chosenbox/img/logo_zkmail.png" />
    	<vlayout sclass="mail" hflex="1">
    		<hlayout sclass="mailformrow" hflex="1" valign="middle">
    			<label sclass="maillabel" value="Label">To</label>
    			<chosenbox sclass="mailinput" hflex="1"
    				model="@load(vm.contactsModel)"
    				emptyMessage="type or select contacts (existing or new ones)"
    				creatable="true" createMessage="Create new contact: {0}"
    				onSearch="@command('newContact', contact=event.value)" />
    		</hlayout>
    		<hlayout sclass="mailformrow" hflex="1" valign="middle">
    			<label sclass="maillabel" value="Label"></label>
    			<chosenbox sclass="mailinput" hflex="1"
    				model="@load(vm.labelsModel)"
    				emptyMessage="choose one or more labels" />
    		</hlayout>
    		<textbox sclass="mailinput" multiline="true" hflex="1"
    			height="100px">
    		</textbox>
    	</vlayout>
    </vlayout>
</zk>

.mail {
	background-color: #f2f2f2;
	border: 1px solid #d7d7d7;
	padding: 15px;
}

.maillogo {
	padding: 15px 0;
}

.maillabel {
	width: 50px;
	color: #959595;
	display: block;
	font-weight: bold;
}

.mailinput {
	border: 1px solid #d7d7d7;
	padding: 3px;
}

.mailformrow {
	padding-bottom: 8px;
}

package demo.combobox.chosenbox;

import org.zkoss.bind.annotation.BindingParam;
import org.zkoss.bind.annotation.Command;
import org.zkoss.bind.annotation.Init;
import org.zkoss.zul.ListModel;
import org.zkoss.zul.ListModelList;

import demo.data.EmailContacts;
import demo.data.EmailLabels;

public class ChosenboxViewModel {

	private ListModelList<String> contactsModel = new ListModelList<String>(EmailContacts.getContacts());
	private ListModel<String> labelsModel = new ListModelList<String>(EmailLabels.getLabels());

	@Init
	public void init() {
	}
	
	@Command("newContact")
	public void newContact(@BindingParam("contact") String contact) {
		contactsModel.add(contact);
		contactsModel.addToSelection(contact);
	}

	public ListModel<String> getContactsModel() {
		return contactsModel;
	}

	public ListModel<String> getLabelsModel() {
		return labelsModel;
	}
}

package demo.data;

import java.util.Arrays;
import java.util.Collection;

public class EmailContacts {

	public static Collection<? extends String> getContacts() {
		return Arrays.asList("Adam ([email protected])",
				"Chris ([email protected])", "Daniel ([email protected])",
				"Eve([email protected])", "Fritz ([email protected])",
				"Mary ([email protected])", "Max ([email protected])",
				"John ([email protected])", "Peter ([email protected])");
	}

}

package demo.data;

import java.util.Arrays;
import java.util.Collection;

public class EmailLabels {

	public static Collection<? extends String> getLabels() {
		return Arrays.asList("accounts", "friends", "information", "personal",
				"products", "projects", "support", "work");
	}

}