SelectOneRadio SelectOneRadio is used to choose a single item from a collection.

Basic

Grid

Responsive

Custom Layout

Values
Console:
City:
City 2:
Color:
<h:form>
    <h3 style="margin-top:0">Basic</h3>
    <h:panelGrid columns="2" style="margin-bottom:10px" cellpadding="5">
        <p:outputLabel for="console" value="Console:" />
        <p: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" />
        </p:selectOneRadio>
    </h:panelGrid>

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

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

    <h3>Custom Layout</h3>
    <p:outputPanel id="customPanel" style="margin-bottom:10px">
        <p: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" />
        </p:selectOneRadio>

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

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

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

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

    <p:dialog modal="true" resizable="false" widgetVar="dlg" header="Values" showEffect="clip">
        <p: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}" />
        </p:panelGrid>
    </p:dialog>
</h:form>
                
PrimeTek, Copyright © 2017
All rights reserved.
Running PrimeFaces-6.2-SNAPSHOT on Mojarra-2.3.2.