JSF 2 radio buttons example

In JSF, “h:selectOneRadio” tag is used to render a set of HTML input element of type “radio“, and format it with HTML table and label tag.


//JSF...
<h:selectOneRadio value="#{user.favColor1}">
   	<f:selectItem itemValue="Red" itemLabel="Color1 - Red" />
   	<f:selectItem itemValue="Green" itemLabel="Color1 - Green" />
   	<f:selectItem itemValue="Blue" itemLabel="Color1 - Blue" />
</h:selectOneRadio>

//HTML output...
<table>
<tr>
  <td>
	<input type="radio" name="j_idt6:j_idt8" id="j_idt6:j_idt8:0" value="Red" />
	<label for="j_idt6:j_idt8:0"> Color1 - Red</label></td>
  <td>
	<input type="radio" name="j_idt6:j_idt8" id="j_idt6:j_idt8:1" value="Green" />
	<label for="j_idt6:j_idt8:1"> Color1 - Green</label></td>
  <td>
	<input type="radio" name="j_idt6:j_idt8" id="j_idt6:j_idt8:2" value="Blue" />
	<label for="j_idt6:j_idt8:2"> Color1 - Blue</label>
  </td>
</tr>
</table>

JSF 2.0 “h:selectOneRadio” example

A JSF 2.0 example to show the use of “h:selectOneRadio” tag to render radio buttons, and populate the data in 3 different ways :

  1. Hardcoded values in “f:selectItem” tag.
  2. Generate values with a Map and put it into “f:selectItems” tag.
  3. Generate values with an Object array and put it into “f:selectItems” tag, then represent the value with a “var” attribute.

1. Backing Bean

A backing bean to hold the submitted data.


package com.mkyong;

import java.util.LinkedHashMap;
import java.util.Map;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
 
@ManagedBean(name="user")
@SessionScoped
public class UserBean{

	public String favColor1;
	public String favColor2;
	public String favColor3;
	
	//getter and setter methods 

	//Generated by Map
	private static Map<String,Object> color2Value;
	static{
		color2Value = new LinkedHashMap<String,Object>();
		color2Value.put("Color2 - Red", "Red"); //label, value
		color2Value.put("Color2 - Green", "Green");
		color2Value.put("Color3 - Blue", "Blue");
	}
	
	public Map<String,Object> getFavColor2Value() {
		return color2Value;
	}
	
	//Generated by Object array
	public static class Color{
		public String colorLabel;
		public String colorValue;
		
		public Color(String colorLabel, String colorValue){
			this.colorLabel = colorLabel;
			this.colorValue = colorValue;
		}
		
		public String getColorLabel(){
			return colorLabel;
		}
		
		public String getColorValue(){
			return colorValue;
		}
		
	}
	
	public Color[] color3List;
	
	public Color[] getFavColor3Value() {
		
		color3List = new Color[3];
		color3List[0] = new Color("Color3 - Red", "Red");
		color3List[1] = new Color("Color3 - Green", "Green");
		color3List[2] = new Color("Color3 - Blue", "Blue");
		
		return color3List;
	}
	
}

2. JSF Page

A JSF page to demonstrate the use “h:selectOneRadio” tag.


<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"   
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      >
    <h:body>
    	
    	<h1>JSF 2 radio button example</h1>
    	<h:form>
    	
	        1. Hard-coded with "f:selectItem" : 
   		<h:selectOneRadio value="#{user.favColor1}">
   			<f:selectItem itemValue="Red" itemLabel="Color1 - Red" />
   			<f:selectItem itemValue="Green" itemLabel="Color1 - Green" />
   			<f:selectItem itemValue="Blue" itemLabel="Color1 - Blue" />
   		</h:selectOneRadio>
		
   		<br />
	    
	        2. Generated by Map :
   		<h:selectOneRadio value="#{user.favColor2}">
   			<f:selectItems value="#{user.favColor2Value}" />
   		</h:selectOneRadio>
   		
	        <br />
	    
	         3. Generated by Object array and iterate with var :
   		<h:selectOneRadio value="#{user.favColor3}">
   			<f:selectItems value="#{user.favColor3Value}" var="c"
   			itemLabel="#{c.colorLabel}" itemValue="#{c.colorValue}" />
   		</h:selectOneRadio>
   		
	        <br />
	    
    	        <h:commandButton value="Submit" action="result" />
		<h:commandButton value="Reset" type="reset" />

    	</h:form>
    </h:body>
</html>

result.xhtml…


<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"   
      xmlns:h="http://java.sun.com/jsf/html"
      >
    <h:body>
    	
    	<h1>JSF 2 radio button example</h1>
    	
    	<h2>result.xhtml</h2>
    	
    	<ol>
    		<li>user.favColor1 : #{user.favColor1}</li>
    		<li>user.favColor2 : #{user.favColor2}</li>
    		<li>user.favColor3 : #{user.favColor3}</li>
    	</ol>
    </h:body>
</html>

3. Demo

jsf2-radio-button-example-1

When “submit” button is clicked, link to “result.xhtml” and display the submitted radio button values.

jsf2-radio-button-example-2

How to select radio button value by default?

In JSF, the radio button values of “f:selectItems” tag is selected if it matched to the “value” of “h:selectOneRadio” tag. In above example, if you set favColor2 to “Red” :


@ManagedBean(name="user")
@SessionScoped
public class UserBean{

	public String[] favColor = "Red";

	//...

The “favColor2” radio button, “Red” option is selected by default.

Download Source Code

Download It – JSF-2-RadioButtons-Example.zip (10KB)

Reference

  1. JSF <h:selectOneRadio /> JavaDoc

About the Author

author image
mkyong
Founder of Mkyong.com, love Java and open source stuff. Follow him on Twitter, or befriend him on Facebook or Google Plus. If you like my tutorials, consider make a donation to these charities.

Comments

Leave a Reply

avatar
newest oldest most voted
Krishna Atkalikar
Guest
Krishna Atkalikar

I have radiobutton group in ui:repeat so I need to store many results, how can we store it in the backing bean?

Mustapha
Guest
Mustapha

I like the default part , it worked for me

nabsa
Guest
nabsa

I did not work for me. Default value in :
2. Generated by Map :

is not working for me. When I get to the page wiith the radio buttons.I do not have the favColor2 thicked

Mustapha
Guest
Mustapha

Nice

Thomas
Guest
Thomas

@25eecff5018cc4a5e466829963c0010d:disqus @79858a77ef7a0433d1791842af1d363a:disqus You cannot deselect a Radio Button. Use Checkboxes instead.

Ninad
Guest
Ninad

I want to unselect the radio button when I click on a already selected radio button. Is it possible.

abdel
Guest
abdel

Hello, why static methods ? I want to cotrol a fields but i cant use method no static methode whithin static declartion

trackback
JSF 2.0 Tutorial

[…] JSF 2 radio buttons example <h:selectOneRadio> radio buttons example. […]

hossein
Guest
hossein

yong mook kim thank you ………….
i am hossein from iran .

marky
Guest
marky

how can i deselect a selection?

ugo
Guest
ugo

Watch out, the attribute “value” doesn’t exist for f:selectItem, you better use itemValue.

vikas
Guest
vikas

it is possible to show a text box in between group radio buttons in jsf