PrimeFaces Showcase

	Language
	English
	English
	English
	French
	German
	German
	German
	Italian
	Korean
	Spanish
	Catalan
	Dutch
	Portuguese
	Portuguese
	Arabic
	Arabic
	Bulgarian
	Bangla
	Bosnian
	Czech
	Greek
	Persian
	Finnish
	Danish
	Hindi
	Indonesian
	Croatian
	Japanese
	Hungarian
	Hebrew
	Georgian
	Central Kurdish
	Khmer
	Kyrgyz
	Kazakh
	Lithuanian
	Latvian
	Malay
	Norwegian
	Polish
	Romanian
	Russian
	Slovak
	Slovenian
	Serbian
	Serbian
	Swedish
	Thai
	Turkish
	Ukrainian
	Uzbek
	Vietnamese
	Chinese
	Chinese

oneRadio.xhtml
RadioView.java


<style>
    .grid-radio td {
        padding: .5rem;
    }
    .legend {
        display: inline-block;
        width: 1.5rem;
        height: 1.5rem;
        border-radius: .25rem;
        vertical-align: sub;
    }
</style>

<div class="card">
    <h:form>
        <h5 class="mt-0">Line Direction</h5>
        <p:selectOneRadio id="line" value="#{radioView.line}" layout="lineDirection">
            <f:selectItem itemLabel="Option1" itemValue="Option1"/>
            <f:selectItem itemLabel="Option2" itemValue="Option2"/>
            <f:selectItem itemLabel="Option3" itemValue="Option3"/>
        </p:selectOneRadio>

        <h5>Page Direction</h5>
        <p:selectOneRadio id="page" value="#{radioView.page}" layout="pageDirection">
            <f:selectItem itemLabel="Option1" itemValue="Option1"/>
            <f:selectItem itemLabel="Option2" itemValue="Option2"/>
            <f:selectItem itemLabel="Option3" itemValue="Option3"/>
        </p:selectOneRadio>
        
        <h5>Responsive + Unselectable</h5>
        <p:selectOneRadio id="city2" value="#{radioView.city2}" layout="responsive" columns="3" unselectable="true">
            <f:selectItems value="#{radioView.cities}" var="city" itemLabel="#{city}" itemValue="#{city}"/>
        </p:selectOneRadio>
        
        <h5>Custom Layout (Facet)</h5>
        <p:selectOneRadio id="customRadio" value="#{radioView.color}">
            <f:selectItem itemLabel="Red" itemValue="Red"/>
            <f:selectItem itemLabel="Green" itemValue="Green"/>
            <f:selectItem itemLabel="Blue" itemValue="Blue"/>

            <f:facet name="custom">
                <span class="field-radiobutton">
                    <p:radioButton id="facet1" for="customRadio" itemIndex="0"/>
                    <p:outputLabel for="facet1">
                        <span class="legend" style="background:red"/> Red
                    </p:outputLabel>
                </span>
                <span class="field-radiobutton">
                    <p:radioButton id="facet2" for="customRadio" itemIndex="1"/>
                    <p:outputLabel for="facet2">
                        <span class="legend" style="background:green"/> Green
                    </p:outputLabel>
                </span>
                <span class="field-radiobutton">
                    <p:radioButton id="facet3" for="customRadio" itemIndex="2"/>
                    <p:outputLabel for="facet3">
                        <span class="legend" style="background:blue"/> Blue
                    </p:outputLabel>
                </span>
            </f:facet>
        </p:selectOneRadio>

        <h5>Custom Layout (Referenced)</h5>
        <p:selectOneRadio id="customRadio2" value="#{radioView.color2}" 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="ref1" for="customRadio2" itemIndex="0"/>
            <span class="legend" style="background:red"/>
            <p:outputLabel for="ref1" value="Red"/>

            <p:radioButton id="ref2" for="customRadio2" itemIndex="1"/>
            <span class="legend" style="background:green"/>
            <p:outputLabel for="ref2" value="Green"/>

            <p:radioButton id="ref3" for="customRadio2" itemIndex="2"/>
            <span class="legend" style="background:blue"/>
            <p:outputLabel for="ref3" value="Blue"/>
        </h:panelGrid>
    </h:form>
</div>


package org.primefaces.showcase.view.input;

import java.util.ArrayList;
import java.util.List;

import jakarta.annotation.PostConstruct;
import jakarta.enterprise.context.RequestScoped;
import jakarta.inject.Named;

@Named
@RequestScoped
public class RadioView {

    private String line;
    private String page;
    private String city;
    private String city2;
    private List<String> cities;
    private String color;
    private String color2;

    @PostConstruct
    public void init() {
        cities = new ArrayList<>();
        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 getLine() {
        return line;
    }

    public void setLine(String line) {
        this.line = line;
    }

    public String getPage() {
        return page;
    }

    public void setPage(String page) {
        this.page = page;
    }

    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 String getColor2() {
        return color2;
    }

    public void setColor2(String color2) {
        this.color2 = color2;
    }

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

Locale

Input Style

Themes

PrimeOne

Bootstrap

Material Design

Material Design Compact

Legacy

SelectOneRadio

Line Direction

Page Direction

Responsive + Unselectable

Custom Layout (Facet)

Custom Layout (Referenced)

Reloading page