JARCH ShowCase

oneRadio.xhtml
RadioView.java

<a:form>
    <h3 style="margin-top:0">Basic</h3>
    <h:panelGrid columns="2" style="margin-bottom:10px" cellpadding="5">
        <a:outputLabel for="console" value="Console:" />
        <a:selectOneRadio id="console" value="#{radioView.console}">
            <f:selectItem itemLabel="Xbox One" itemValue="Xbox One" />
            <f:selectItem itemLabel="PS4" itemValue="PS4" />
            <f:selectItem itemLabel="Wii U" itemValue="Wii U" />
        </a:selectOneRadio>
    </h:panelGrid>

    <h3>Grid</h3>
    <h:panelGrid columns="2" style="margin-bottom:10px" cellpadding="5">
        <a:outputLabel for="city" value="City:" />
        <a:selectOneRadio id="city" value="#{radioView.city}"  layout="grid" columns="3">
            <f:selectItems value="#{radioView.cities}" var="c" itemLabel="#{city}" itemValue="#{city}"/>
        </a:selectOneRadio>
    </h:panelGrid>

    <h3>Responsive</h3>
    <a:selectOneRadio id="city2" value="#{radioView.city2}" layout="responsive" columns="3">
        <f:selectItems value="#{radioView.cities}" var="c" itemLabel="#{city}" itemValue="#{city}"/>
    </a:selectOneRadio>

    <h3>Custom Layout</h3>
    <a:outputPanel id="customPanel" style="margin-bottom:10px">
        <a:selectOneRadio id="customRadio" value="#{radioView.color}" layout="custom">
            <f:selectItem itemLabel="Red" itemValue="Red" />
            <f:selectItem itemLabel="Green" itemValue="Green" />
            <f:selectItem itemLabel="Blue" itemValue="Blue" />
        </a:selectOneRadio>

        <h:panelGrid columns="3" cellpadding="5">
            <a:radioButton id="opt1" for="customRadio" itemIndex="0" />
            <h:outputLabel for="opt1" value="Red" />
            <a:spinner />

            <a:radioButton id="opt2" for="customRadio" itemIndex="1" />
            <h:outputLabel for="opt2" value="Green" />
            <a:inputText />

            <a:radioButton id="opt3" for="customRadio" itemIndex="2" />
            <h:outputLabel for="opt3" value="Blue" />
            <a:calendar />
        </h:panelGrid>
    </a:outputPanel>

    <a:commandButton value="Submit" update="display" icon="ui-icon-check" oncomplete="PF('dlg').show()"/>

    <a:dialog modal="true" resizable="false" widgetVar="dlg" header="Values" showEffect="clip">
        <a:panelGrid columns="2" id="display" columnClasses="label,value">
            <h:outputText value="Console:" />
            <h:outputText value="#{radioView.console}" />

            <h:outputText value="City:" />
            <h:outputText value="#{radioView.city}" />

            <h:outputText value="City 2:" />
            <h:outputText value="#{radioView.city2}" />

            <h:outputText value="Color:" />
            <h:outputText value="#{radioView.color}" />
        </a:panelGrid>
    </a:dialog>
</a:form>

package com.jarch.showcase.view.input;

import java.util.ArrayList;
import java.util.List;
import javax.annotation.PostConstruct;
import javax.faces.bean.ManagedBean;

@ManagedBean
public class RadioView {
    
    private String console;    
    private String city;
    private String city2;  
    private List<String> cities;  
    private String color;
    
    @PostConstruct
    public void init() {
        cities = new ArrayList<String>();
        cities.add("Miami");
        cities.add("London");
        cities.add("Paris");
        cities.add("Istanbul");
        cities.add("Berlin");
        cities.add("Barcelona");
        cities.add("Rome");
        cities.add("Brasilia");
        cities.add("Amsterdam");
    }

    public String getConsole() {
        return console;
    }

    public void setConsole(String console) {
        this.console = console;
    }

    public String getCity() {
        return city;
    }

    public void setCity(String city) {
        this.city = city;
    }

    public String getCity2() {
        return city2;
    }

    public void setCity2(String city2) {
        this.city2 = city2;
    }

    public String getColor() {
        return color;
    }

    public void setColor(String color) {
        this.color = color;
    }

    public List<String> getCities() {
        return cities;
    }
}

	Red
	Green
	Blue

Console:
City:
City 2:
Color: