JSF radio input buttons

This java illustration will show how to create html radio buttons with JSF. When using h:selectOneRadio JSF tag, it generates the necessary HTML to display radio button and uses a combination of table, input of type radio, and label.

Using our sample jsf project we will create a backing bean, a template and show the source below. The @ManagedBean contains radioButtonJSF an attribute in which we will bind the radio button value to. The form button is bound to radioButtons.checkExample and once it is clicked the value of the radio button will be outputted to the console. A few things to note, you can set selectOneRadio pageDirection value to true to render the children elements vertically. In addition, we set the form attribute prependId to false to direct JSF to not append the form id so that we can access the elements consistently with javascript.

JSF 1.0, 2.0, 2.2 selectOneRadioButton

Backing bean

@ManagedBean
public class RadioButtons {

    private String radioButtonJSF;
    private String radioButtonJSF22;

    public void checkExample() {
        System.out.println(radioButtonJSF);
        System.out.println(radioButtonJSF22);
    }

    //...
}

Xhtml source

<form jsf:id="form" method="post" jsf:prependId="false">
    <div>
        <h2>JSF selectOneRadioButton</h2>
        <h:selectOneRadio value="#{radioButtons.radioButtonJSF}">
            <f:selectItem itemValue="1" itemLabel="Wisconsin" />
            <f:selectItem itemValue="2" itemLabel="Minnesota" />
            <f:selectItem itemValue="3" itemLabel="Iowa" />
        </h:selectOneRadio>
    </div>
    <div>
        <input type="submit" value="Radio buttons" jsf:action="#{radioButtons.checkExample}"/>
    </div>
</form>

Generated html

<table>
    <tbody>
        <tr>
            <td>
                <input type="radio" name="j_idt7" id="j_idt7:0" value="1">
                <label for="j_idt7:0"> Wisconsin</label>
            </td>
            <td>
                <input type="radio" name="j_idt7" id="j_idt7:1" value="2">
                <label for="j_idt7:1"> Minnesota</label>
            </td>
            <td>
                <input type="radio" name="j_idt7" id="j_idt7:2" value="3">
                <label for="j_idt7:2"> Iowa</label>
            </td>
        </tr>
    </tbody>
</table>

JSF 2.2 pass through

JSF 2.2 introduced the ability to write standard HTML/HTML5 elements and bind values using JSF passthrough attributes and elements. Below shows an example to use radio buttons without a table and your favorite front end framework such as bootstrap or google material design.

Using the same backing bean or managed bean above we will specify the name as passthrough attribute which will override the implicit attribute. If you are a front end developer you can tell that this is closer to a natural templating.

Xhtml source

<div>
    <f:metadata>
        <f:viewParam name="a-radio" value="#{radioButtons.radioButtonJSF22}"/>
    </f:metadata>

    <label for="fooOption">
      <input type="radio" jsf:id="fooOption" pt:name="a-radio" value="Wisconsin"/>
      <span>Wisconsin</span>
    </label>
    <label for="barOption">
      <input type="radio" jsf:id="barOption" pt:name="a-radio" value="Minnesota"/>
      <span>Minnesota</span>
    </label>
</div>

Generated html

<div>
    <label for="fooOption">
        <input id="fooOption" name="a-radio" type="radio" value="Wisconsin">
        <span>Wisconsin</span>
    </label>
    <label for="barOption">
        <input id="barOption" name="a-radio" type="radio" value="Minnesota">
        <span>Minnesota</span>
    </label>
</div>