Items in ZK combo boxes may be annotated with description text and images to show additional information about each item. ZK combo boxes offer keystroke command support; press Alt+DOWN to expand the drop-down list, and the UP and DOWN arrow keys to traverse through items.

<hlayout style="display: flex;justify-content: center" width="100%" height="400px">
	<style src="/widgets/combobox/simple_combobox/css/simple_combo.css" />
	<div height="278px" width="443px" class="combodivarea"
		viewModel="@id('vm') @init('demo.combobox.simple_combobox.ShirtViewModel')">
		<separator spacing="40px" />
		<hlayout width="440px" spacing="2.3em" style="display: flex;justify-content: center">
			<vlayout>
				<separator spacing="20px" />
				<label value="Color" class="boxlabel" />
				<combobox id="cmbColor" width="150px"
					model="@load(vm.colors)" selectedItem="@bind(vm.shirtColor)">
					<template name="model">
						<comboitem label="@load(each)"
							image="@load(vm.getIconImage(each))" />
					</template>
				</combobox>
				<separator spacing="10px" />
				<label value="Size" class="boxlabel" />
				<combobox id="cmbSize" width="150px"
					model="@load(vm.sizes)" selectedItem="@bind(vm.shirtSize)">
					<template name="model">
						<comboitem label="@load(each)"
							image="@load(vm.getIconImage(each))" />
					</template>
				</combobox>
			</vlayout>
			<hlayout sclass="text-center" width="168px" height="210px" >
				<image id="myimage" src="@load(vm.shirtImage)" />
			</hlayout>
		</hlayout>
	</div>
</hlayout>

.combodivarea {	
	background-image:url('/zkdemo/widgets/combobox/simple_combobox/img/bg.png');
}

.labelheader {
	font-family:Arial; 
	font-size:20px;
	color:#c2c2c2;
}

.boxlabel {
	font-family:Arial;
	font-weight: bold;
	font-size: 12px;
	color:#002b37;
}

.z-comboitem {
	padding-bottom:4px;
}

.z-comboitem-image {
	margin-top: 0;
}

package demo.combobox.simple_combobox;

import java.util.List;

import org.zkoss.bind.annotation.DependsOn;
import org.zkoss.bind.annotation.Init;

public class ShirtViewModel {
	private String shirtColor, shirtSize;
	private final static String shirtLocation = "/widgets/combobox/simple_combobox/img/shirt_%s_%s.png";
	private final static String iconLocation = "/widgets/combobox/simple_combobox/img/shirt_icon_%s.png";
	
	public List<String> getColors() {
		return ShirtData.getColors();
	}
	
	public List<String> getSizes() {
		return ShirtData.getSizes();
	}
	
	@Init
	public void init() {
		setShirtColor("blue");
		setShirtSize("large");
	}

	public String getShirtColor() {
		return shirtColor;
	}
	
	public void setShirtColor(String shirtColor) {
		this.shirtColor = shirtColor;
	}
	
	public void setShirtSize(String shirtSize) {
		this.shirtSize = shirtSize;
	}
	
	public String getShirtSize() {
		return shirtSize;
	}
	
	@DependsOn({"shirtSize","shirtColor"})
	public String getShirtImage() {
		if(shirtSize==null || shirtColor==null){
			return String.format(shirtLocation, "unknow", "unknow");
		}
		return String.format(shirtLocation, shirtColor, shirtSize);
	}
	
	public String getIconImage(String icon) {
		return String.format(iconLocation, icon);
	}
}

package demo.combobox.simple_combobox;

import java.util.ArrayList;
import java.util.Collections;
import java.util.List;

public class ShirtData {
	
	private static List<String> colors = new ArrayList<String>();
	private static List<String> sizes = new ArrayList<String>();
	
	static{
		colors.add("blue");
		colors.add("black");
		colors.add("white");
		
		sizes.add("small");
		sizes.add("medium");
		sizes.add("large");
	}
	
	public static final List<String> getColors() {
		return new ArrayList<String>(colors);
	}

	public static final List<String> getSizes() {
		return new ArrayList<String>(sizes);
	}
}