Tobago Demo

Menu

Root Dummy Intro Search Getting Started Docker What's New Migration Compatibility FAQ API Download Server Info Logging Info In Suggest Textarea Date Range Group 5 Star Rating File Upload Out Label Badge Image Figure Progress Object Checkbox Toggle Dropdown Radio Listbox SelectOneList Multi Checkbox Multi Listbox Shuttle SelectManyList Button and Link Default Command Button Group Customizer Link Group Box Panel Separator Section Header and Footer Bar Popup Popover Toast Basic example Tab Client Tab Ajax Tab Server Basic example Sheet Sorting Paginator Sheet Column Selector Sheet Selectionchange Sheet Event Sheet Action Sheet Markup Sheet Style Empty Sheet Column Bar Sheet Filter Sheet Static Header Sheet Multi Header Sheet Tree Column Panel Sheet Editable Sheet Lazy Sheet Nested Basic example Tree Command Types Tree Select Tree Editor Tree Menu Tree Listbox Intro TinyMCE CKEditor Flow Layout Flex Layout Segment Layout Label Layout Grid Layout Split Layout Message-layout Overview Collapsible Box Collapsible Popup Collapsible Panel Collapsible Section Content Validation JSR 303 Severity Messages Content Security Policy Sanitize Roles Form AccessKey Focus Exception Handler Style Tag Bootstrap Theme Icons Partial Ajax Behavior WebSocket Transition Non Faces Request Conversion Error Handling For Each ConversationScoped Download Configuration Format Locale DataAttribute Meta
Root Dummy Intro Search Getting Started Docker What's New Migration Compatibility FAQ API Download Server Info Logging Info In Suggest Textarea Date Range Group 5 Star Rating File Upload Out Label Badge Image Figure Progress Object Checkbox Toggle Dropdown Radio Listbox SelectOneList Multi Checkbox Multi Listbox Shuttle SelectManyList Button and Link Default Command Button Group Customizer Link Group Box Panel Separator Section Header and Footer Bar Popup Popover Toast Basic example Tab Client Tab Ajax Tab Server Basic example Sheet Sorting Paginator Sheet Column Selector Sheet Selectionchange Sheet Event Sheet Action Sheet Markup Sheet Style Empty Sheet Column Bar Sheet Filter Sheet Static Header Sheet Multi Header Sheet Tree Column Panel Sheet Editable Sheet Lazy Sheet Nested Basic example Tree Command Types Tree Select Tree Editor Tree Menu Tree Listbox Intro TinyMCE CKEditor Flow Layout Flex Layout Segment Layout Label Layout Grid Layout Split Layout Message-layout Overview Collapsible Box Collapsible Popup Collapsible Panel Collapsible Section Content Validation JSR 303 Severity Messages Content Security Policy Sanitize Roles Form AccessKey Focus Exception Handler Style Tag Bootstrap Theme Icons Partial Ajax Behavior WebSocket Transition Non Faces Request Conversion Error Handling For Each ConversationScoped Download Configuration Format Locale DataAttribute Meta

Radio

A group of radiobuttons will be created with the <tc:selectOneRadio/> tag. Static entries are added with <tc:selectItem/> tag. A list from a controller is added with <tc:selectItems value="#{controller.list}"/>.

Tag Library Documentation: <tc:selectOneRadio/> | <tc:selectItem/> | <tc:selectItems/>

Basics

Radiobutton group with a label. The last item is disabled. Also the label set on top with the labelLayout attribute.

<tc:selectOneRadio label="Radio Group" labelLayout="top"/>

Inline

To display the radio buttons horizontally use the inline="true" attribute.

Images

Simple Usage

Add number1 to number2 or subtract number2 from number1.

The radiobuttons are hardcoded with <tc:selectItem itemLabel="1" itemValue="1"/>. The buttons trigger an action in the controller: <tc:button label="Addition" action="#{selectOneRadioController.add}"/>

0

Ajax

Select a planet on the left. One the right side, you can select one of the moons.

The planets are added with <f:selectItems value="#{selectOneRadioController.planets}"/>. The radiogroup of the planets also contain a <f:ajax render="moonradio"> element, which allows to rerender the radiogroup with the ID 'moonradio' every time, the value changed in the planet-radiogroup.

Free layout with <tc:selectReference>

First and second giant planets:
Discovered 1781:
Discovered 1846:

Free layout with group attribute

Work in progress! Decoding and validation is case of "group" is not implemented yet.
First and second giant planets:
Discovered 1781:
Discovered 1846:

Free layout with group attribute (JSF HTML tags - since JSF 2.3)

Attention! This example is only temporary for testing purpose. Does not currently work with Mojarra or MyFaces, but for different reasons.

© 2005-2025 Apache Software Foundation, Licensed under the Apache License, Version 2.0.