Using an image as a label of p:selectOneRadio

Question

Given the following list of <p:selectOneRadio>.

<p:selectOneRadio layout="grid" columns="1" value="#{1}">
    <f:selectItem id="paypal" itemValue="1" itemLabel="Paypal"/>
    <f:selectItem id="wireTransfer" itemValue="2" itemLabel="Wire Transfer"/>
</p:selectOneRadio>

Is it possible to display an image as a label of <f:selectItem> so that the list looks something like the following?

enter image description here

I tried using a <p:outputLabel> placing a <p:graphicImage> inside and removing the itemLabel attribute from the<f:selectItem> inside the <p:selectOneRadio> but either way it did not work.

<p:outputLabel for="paypal">
    <p:graphicImage library="default" name="images/payments/paypal_logo.jpeg"/>
</p:outputLabel>

check out the Custom Layout example on http://www.primefaces.org/showcase/ui/input/oneRadio.xhtml — Daniel, Aug 07 '14 at 07:47
@Daniel : Would you like to answer this question? I have solved it using the link you provided, thanks. — Tiny, Aug 10 '14 at 15:57

score 4 · Accepted Answer · answered Aug 10 '14 at 18:09

You can solve it using the SelectOneRadio - Custom Layout

Here an example:

<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>

This answer does not solve the problem. I tried using h:graphicImage instead of h:outputLabel. Clicking on the image does not select the radio button. — Nikhil, Aug 02 '16 at 16:06

score 0 · Answer 2 · answered Jun 20 '19 at 03:22

<p:selectOneRadio id="customRadio" value="#{radioView.image}" layout="custom">
    <f:selectItem itemLabel="Image1" itemValue="Image1" />
    <f:selectItem itemLabel="Image2" itemValue="Image2" />
</p:selectOneRadio>
<h:panelGrid columns="2" cellpadding="5">
    <p:radioButton id="opt1" for="customRadio" itemIndex="0" />
    <h:graphicImage value="/some/image2.png"/>
    <p:radioButton id="opt2" for="customRadio" itemIndex="1" />
    <h:graphicImage value="/some/image2.png"/>
<h:panelGrid columns="3" cellpadding="5">

Using an image as a label of p:selectOneRadio

2 Answers2