


In this paragraph we will see which components can be used to handle HTML radio buttons and checkboxes. Both these input elements are usually grouped together to display a list of possible choices:

image::../img/choice-form-screenshot.png[]

A check box can be used as single component to set a boolean property. For this purpose Wicket provides the _org.apache.wicket.markup.html.form.CheckBox_ component which must be attached to <input type= ../>[checkbox] tag. In the next example (project SingleCheckBox) we will consider a form similar to the one used in <<modelsforms.adoc#_model_chaining,paragraph 11.5>> to edit a Person object, but with an additional checkbox to let the user decide if she wants to subscribe to our mailing list or not. The form uses the following bean as backing object:

[source,java]
----
public class RegistrationInfo implements Serializable {
	
	private String name;
	private String surname;
	private String address;
	private String email;
	private boolean subscribeList;
	
	/*Getters and setters*/
}
----

The markup and the code for this example are the following:

*HTML:*

[source,html]
----
<form wicket:id="form">		
		<div style="display: table;">
			<div style="display: table-row;">
				<div style="display: table-cell;">Name: </div>
				<div style="display: table-cell;">
					<input type="text" wicket:id="name"/> 
				</div>	
			</div>
			<div style="display: table-row;">
				<div style="display: table-cell;">Surname: </div>
				<div style="display: table-cell;">
					<input type="text" wicket:id="surname"/>
				</div>	
			</div>
			<div style="display: table-row;">
				<div style="display: table-cell;">Address: </div>
				<div style="display: table-cell;">
					<input type="text" wicket:id="address"/>
				</div>	
			</div>
			<div style="display: table-row;">
				<div style="display: table-cell;">Email: </div>
				<div style="display: table-cell;">
					<input type="text" wicket:id="email"/>
				</div>
			</div>
			<div style="display: table-row;">
				<div style="display: table-cell;">Subscribe list:</div>
				<div style="display: table-cell;">
					<input type="checkbox" wicket:id="subscribeList"/>
				</div>
			</div>
		</div>	
	<input type="submit" value="Save"/>
</form>
----

*Java code:*

[source,java]
----
public HomePage(final PageParameters parameters) {
    	RegistrationInfo registrtionInfo = new RegistrationInfo();
    	registrtionInfo.setSubscribeList(true);
    	
    	Form form = new Form("form", 
    			new CompoundPropertyModel<RegistrationInfo>(registrtionInfo));		
		
    	form.add(new TextField("name"));
	form.add(new TextField("surname"));
	form.add(new TextField("address"));
	form.add(new TextField("email"));
	form.add(new CheckBox("subscribeList"));
		
	add(form);
}
----

Please note that the checkbox will be initially selected because we have set to true the subscribe flag during the model object creation (with instruction registrtionInfo.setSubscribeList(true)):

image::../img/subscribe-checkbox-set.png[]

=== Working with grouped checkboxes

When we need to display a given number of options with checkboxes, we can use the _org.apache.wicket.markup.html.form.CheckBoxMultipleChoice_ component. For example, If our options are a list of strings, we can display them in this way:

*HTML:*

[source,html]
----
<div wicket:id="checkGroup">
		<input type="checkbox"/>It will be replaced by the actual checkboxes...
</div>
----

*Java code:*

[source,java]
----
List<String> fruits = Arrays.asList("apple", "strawberry", "watermelon"); 
form.add(new CheckBoxMultipleChoice("checkGroup", new ListModel<String>(new  
								 ArrayList<String>()), fruits));
----

*Screenshot:*

image::../img/grouped-checkbox.png[]

This component can be attached to a <div> tag or to a <span> tag. No specific content is required for this tag as it will be populated with the actual checkboxes. Since this component allows multiple selection, its model object is a list. In the example above we have used model class _org.apache.wicket.model.util.ListModel_ which is specifically designed to wrap a List object.

By default CheckBoxMultipleChoice inserts a <br/> tag as suffix after each option. We can configure both the suffix and the prefix used by the component with the setPrefix and setSuffix methods.

When our options are more complex objects than simple strings, we can render them using an IChoiceRender, as we did for DropDownChoice in <<modelsforms.adoc#_model_chaining,paragraph 11.5>>:

*HTML:*

[source,html]
----
<div wicket:id="checkGroup">
		<input type="checkbox"/>It will be replaced by actual checkboxes...
</div>
----

*Java code:*

[source,java]
----
Person john = new Person("John", "Smith");
Person bob = new Person("Bob", "Smith");
Person jill = new Person("Jill", "Smith");
List<Person> theSmiths = Arrays.asList(john, bob, jill); 
ChoiceRenderer render = new ChoiceRenderer("name");
form.add(new CheckBoxMultipleChoice("checkGroup", new ListModel<String>(new ArrayList<String>()),   
                                    theSmiths, render));
----

*Screenshot:*

image::../img/grouped-checkbox2.png[]

=== How to implement a "Select all" checkbox

A nice feature we can offer to users when we have a group of checkboxes is a “special” checkbox which selects/unselects all the other options of the group:

image::../img/select-all-checkbox.png[]

Wicket comes with a couple of utility components that make it easy to implement such a feature. They are CheckboxMultipleChoiceSelector and CheckBoxSelector classes, both inside package _org.apache.wicket.markup.html.form_. The difference between these two components is that the first works with an instance of CheckBoxMultipleChoice while the second takes in input a list of CheckBox objects:

[source,java]
----
/* CheckboxMultipleChoiceSelector usage: */

CheckBoxMultipleChoice checkGroup;
//checkGroup initialization...
CheckboxMultipleChoiceSelector cbmcs = new CheckboxMultipleChoiceSelector("id", checkGroup);

/* CheckBoxSelector usage: */

CheckBox checkBox1, checkBox2, checkBox3;
//checks initialization...
CheckBoxSelector cbmcs = new CheckBoxSelector("id", checkBox1, checkBox2, checkBox3);
----

=== Working with grouped radio buttons

For groups of radio buttons we can use the _org.apache.wicket.markup.html.form.RadioChoice_ component which works in much the same way as CheckBoxMultipleChoice:

*HTML:*

[source,html]
----
<div wicket:id="radioGroup">
	<input type="radio"/>It will be replaced by actual radio buttons...
</div>
----

*Java code:*

[source,java]
----
List<String> fruits = Arrays.asList("apple", "strawberry", "watermelon"); 
form.add(new RadioChoice("radioGroup", Model.of(""), fruits));
----

*Screenshot:*

image::../img/grouped-radiobutton.png[]

Just like CheckBoxMultipleChoice, this component provides the setPrefix and setSuffix methods to configure the prefix and suffix for our options and it supports IChoiceRender as well. In addition, RadioChoice provides the wantOnSelectionChangedNotifications() method to notify the web server when the selected option changes (this is the same method seen for DropDownChoice in paragraph 9.4).

