SelectOneRadio
SelectOneRadio is used to choose a single item from a collection.
Documentation
<style type="text/css">
.value {
font-weight: bold;
}
</style>
<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}" unselectable="true">
<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="pi pi-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>
@Named
@RequestScoped
public class RadioView {
private String console;
private String city;
private String city2;
private List<String> cities;
private String color;
@PostConstruct
public void init() {
cities = new ArrayList<String>();
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 getConsole() {
return console;
}
public void setConsole(String console) {
this.console = console;
}
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 List<String> getCities() {
return cities;
}
}
