SelectOneRadio

SelectOneRadio extends standard SelectOneRadio with skinning capabilities, custom layout feature and grid layout feature.

Options:
Grid:

Custom Layout





Value1:
Value2:
Value3:

Source

<h:form id="form">

    <h:panelGrid columns="2" style="margin-bottom:10px" cellpadding="5">

        <h:outputText value="Options: " />
        <p:selectOneRadio id="options" value="#{formBean.number}">
            <f:selectItem itemLabel="Option 1" itemValue="1" />
            <f:selectItem itemLabel="Option 2" itemValue="2" />
            <f:selectItem itemLabel="Option 3" itemValue="3" />
        </p:selectOneRadio>

    </h:panelGrid>

    <h:panelGrid columns="2" style="margin-bottom:10px" cellpadding="5">

        <h:outputText value="Grid: " />
        <p:selectOneRadio id="grid" value="#{formBean.movie}" layout="grid" columns="3">
            <f:selectItems value="#{formBean.movies}"/>
        </p:selectOneRadio>

    </h:panelGrid>

    <h3>Custom Layout</h3>
    <p:outputPanel id="customPanel">
    <p:selectOneRadio id="customRadio" value="#{formBean.option}" layout="custom">
        <f:selectItem itemLabel="Option 1" itemValue="1" />
        <f:selectItem itemLabel="Option 2" itemValue="2" />
        <f:selectItem itemLabel="Option 3" itemValue="3" />
    </p:selectOneRadio>

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

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

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

    <p:commandButton id="submitButton" value="Submit" update="display"/>

    <h:panelGrid columns="2" id="display">
        <h:outputText value="Value1:" />
        <h:outputText id="value1" value="#{formBean.number}" />
        <h:outputText value="Value2:" />
        <h:outputText id="value2" value="#{formBean.movie}" />
        <h:outputText value="Value3:" />
        <h:outputText id="value3" value="#{formBean.option}" />
    </h:panelGrid>

</h:form>