PrimeFaces Showcase

	Language
	English
	English
	English
	French
	German
	German
	German
	Italian
	Korean
	Spanish
	Catalan
	Dutch
	Portuguese
	Portuguese
	Arabic
	Arabic
	Bulgarian
	Bangla
	Bosnian
	Czech
	Greek
	Estonian
	Persian
	Finnish
	Danish
	Hindi
	Indonesian
	Icelandic
	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

SelectOneRadio Tag Documentation

SelectOneRadio is an extended version of the standard SelectOneRadio.

Name	Type	Required	Default	Description
id	String	false	generated	Unique identifier of the component in a namingContainer.
rendered	boolean	false	true	Boolean value to specify the rendering of the component, when set to false component will not be rendered.
binding	UIComponent	false	generated	An EL expression referring to a server side UIComponent instance in a backing bean.
widgetVar	String	false	generated ('widget_' + componentClientId)	Name of the client side component.
accesskey	String	false		Access key to transfer focus to the input element.
ariaDescribedBy	String	false		The aria-describedby attribute is used to define a component id that describes the current element for accessibility.
ariaLabelledBy	String	false
border	int	false	0
columnClasses	String	false		Comma separated list of column style classes.
columns	int	false	12	Defines the number of columns in grid layout.
converter	Converter	false		EL expression resolves to a converter instance or literal converter ID defining a component converter.
converterMessage	String	false
dir	String	false		Direction indication for text that does not inherit directionality.
disabled	boolean	false	false	Specifies that an element should be disabled.
disabledClass	String	false
enabledClass	String	false
flex	Boolean	false		Use modern FlexGrid CSS for this component.
group	String	false
hideNoSelectionOption	boolean	false	false	Flag indicating that, if this component is activated by the user, The "no selection option", if any, must be hidden.
immediate	boolean	false	false	When set true, process validations logic is executed at apply request values phase for this component.
label	String	false		A localized user presentable name.
lang	String	false
layout	String	false
onblur	String	false		Fires when an element loses focus.
onchange	String	false		Fires when the value of an element has been changed.
onclick	String	false		Fires when a mouse click on the element.
ondblclick	String	false		Fires when a mouse double-click on the element.
onfocus	String	false		Fires when an element gets focus.
onkeydown	String	false		Fires when a user is pressing a key.
onkeypress	String	false		Fires when a user presses a key.
onkeyup	String	false		Fires when a user releases a key.
onmousedown	String	false		Fires when a mouse button is pressed down on an element.
onmousemove	String	false		Fires when the mouse pointer is moving while it is over an element.
onmouseout	String	false		Fires when the mouse pointer moves out of an element.
onmouseover	String	false		Fires when the mouse pointer moves onto an element.
onmouseup	String	false		Fires when a mouse button is released over an element.
onselect	String	false
readonly	boolean	false	false	Specifies that an input field is read-only.
required	boolean	false	false	Marks component as required.
requiredMessage	String	false
role	String	false
style	String	false		Specifies an inline CSS style for an element.
styleClass	String	false		Specifies one or more CSS class names for an element.
submittedValue	Object	false
tabindex	String	false		Specifies the tab order of an element.
title	String	false		Specifies extra information about an element (displayed as a tooltip).
unselectable	boolean	false	false	Unselectable mode when true clicking a radio again will clear the selection.
validator	Validator	false		A method expression referring to a method validating the input.
validatorMessage	String	false
value	Object	false		Value of the component.
valueChangeListener	ValueChangeListener	false		A method binding expression referring to a method for handling a valuchangeevent.

Name	Description
custom	Custom content of the selectoneradio.

Name	Type	Default	Description
No records found.

Name	Library	Target
components.css	primefaces
jquery/jquery.js	primefaces
core.js	primefaces
components.js	primefaces

Family org.primefaces.component

Type org.primefaces.component.SelectOneRadio

Class org.primefaces.component.selectoneradio.SelectOneRadio

Renderer Type org.primefaces.component.SelectOneRadioRenderer

Renderer Class org.primefaces.component.selectoneradio.SelectOneRadioRenderer

RESOURCES

Tag Documentation Documentation Documentation JSDoc


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

        <div class="flex flex-column gap-3">
            <div class="flex align-items-center gap-2">
                <p:radioButton id="ref1" for="customRadio2" itemIndex="0"/>
                <span class="legend" style="background:red"/>
                <p:outputLabel for="ref1" value="Red"/>
            </div>
            <div class="flex align-items-center gap-2">
                <p:radioButton id="ref2" for="customRadio2" itemIndex="1"/>
                <span class="legend" style="background:green"/>
                <p:outputLabel for="ref2" value="Green"/>
            </div>
            <div class="flex align-items-center gap-2">
                <p:radioButton id="ref3" for="customRadio2" itemIndex="2"/>
                <span class="legend" style="background:blue"/>
                <p:outputLabel for="ref3" value="Blue"/>
            </div>
        </div>
    </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;
    }
}

SelectOneRadio

SelectOneRadio Tag Documentation

Line Direction

Page Direction

Responsive + Unselectable

Custom Layout (Facet)

Custom Layout (Referenced)

Usage

Reloading page