radio - Radio Button

Displays a button that can be selected or cleared. When grouped only one button in the group can be selected.


Core Controls


<xp:radio attributes>content</xp:radio>
Table 1. Essential properties
Property Description
id Defaults to radio1, radio2, and so on.
text Provides a label.
value Binds the control to a data element or other value.
selectedValue Specifies the data value when the button is selected.
defaultSelected Specify true to select the button by default.
groupName Assigns the radio button to a group.
skipContainers Assigns radio buttons in different containers (for example, columns in a data table) to the same group.
Table 2. All properties
Category Properties
accessibility accesskey, role, tabindex, title
basics attrs, binding, dir, disabled, groupName, id, immediate, lang, loaded, readonly, rendered, rendererType, required, skipContainers, text
data converter, defaultSelected, disableModifiedFlag, selectedValue, validator, validators, value, valueChangeListener, valueChangeListeners
dojo dojoAttributes, dojoType
events onblur, onchange, onclick, ondblclick, onfocus, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup
styling disableTheme, style, styleClass, themeId


At run time, a button appears on the page. The user can select or clear it. The button appears filled in when selected.

When a button is selected, all other buttons assigned to the same group are cleared.

Assigning buttons to a group is similar to creating a Radio Button Group control. Using individual buttons with group assignments gives you flexibility in placement.

For accessibility compliance, do not use this control for a group, only for a single button. Use Radio Button Group for a group.


These Radio Button controls assign the value apples or oranges to document1.fruit depending on which is selected. The buttons act in concert. If Apples is selected, oranges is cleared. Note that this example does not meet accessibility compliance.
<xp:radio text="Apples" id="radio1" value="#{document1.fruit}"
	groupName="fruit" selectedValue="apples">
<xp:radio text="Oranges" id="radio2" value="#{document1.fruit}"
	groupName="fruit" selectedValue="oranges">