radio - Radio Button
Displays a button that can be selected or cleared. When grouped only one button in the group can be selected.
Category
Core ControlsSyntax
<xp:radio attributes>content</xp:radio>
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. |
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 |
Usage
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.
Examples
These Radio Button controls assign the valueapples
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>
<xp:radio text="Oranges" id="radio2" value="#{document1.fruit}"
groupName="fruit" selectedValue="oranges">
</xp:radio>