A form control that provides for selection of a single choice from a list of options.
Refer to Radio Button for further information.
The following styles apply to ui:radio by default.
ui|radio {
display: inline;
}| Attribute | Description | Type | Default | Options | Use |
|---|---|---|---|---|---|
| checked | Sets the initial state of the radio button, i.e. the initial value of the checked property. | xs:boolean | false | true, false | optional |
| name | The name of the radio button group. Radio buttons are grouped based on the value of this attribute. | xs:NCName | required |
<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/2002/06/xhtml2"
xmlns:mcs="http://www.volantis.com/xmlns/2006/01/xdime/mcs"
xmlns:cst="http://www.volantis.com/xmlns/2009/07/cf2/template"
xmlns:cf2="http://www.volantis.com/xmlns/2009/07/cf2"
xmlns:ui="http://www.volantis.com/xmlns/2009/07/cf2/ui">
<head>
<title>ui:radio</title>
</head>
<body>
<div>
<div>
<nl>
<label/>
<li>
<ui:label for="rd11">Radio label 1:</ui:label>
<ui:radio checked="true" id="rd11" name="grp1"/>
</li>
<li>
<ui:label for="rd12">Radio label 2:</ui:label>
<ui:radio checked="false" id="rd12" name="grp1"/>
</li>
</nl>
</div>
<div>
<table>
<tr>
<td style="font-weight: bold;">Radio button 1 properties</td>
</tr>
<tr>
<td>checked</td>
<td><cst:value property-value="rd11#checked" path="."/></td>
<td>
<ui:button>
<span>Switch</span>
<cf2:on event="cf2:activate">
<cf2:param component="rd11" name="control"/>
control.opGet('checked').set(!control.opGet('checked').get()); </cf2:on>
</ui:button>
</td>
</tr>
<tr>
<td>readonly</td>
<td><cst:value property-value="rd11#readonly" path="."/></td>
<td>
<ui:button>
<span>Switch</span>
<cf2:on event="cf2:activate">
<cf2:param component="rd11" name="control"/>
control.opGet('readonly').set(!control.opGet('readonly').get()); </cf2:on>
</ui:button>
</td>
</tr>
<tr>
<td>required</td>
<td><cst:value property-value="rd11#required" path="."/></td>
<td>
<ui:button>
<span>Switch</span>
<cf2:on event="cf2:activate">
<cf2:param component="rd11" name="control"/>
control.opGet('required').set(!control.opGet('required').get()); </cf2:on>
</ui:button>
</td>
</tr>
<tr>
<td>enabled</td>
<td><cst:value property-value="rd11#enabled" path="."/></td>
<td>
<ui:button>
<span>Switch</span>
<cf2:on event="cf2:activate">
<cf2:param component="rd11" name="control"/>
control.opGet('enabled').set(!control.opGet('enabled').get()); </cf2:on>
</ui:button>
</td>
</tr>
<tr>
<td style="font-weight: bold;">Radio button 2 properties</td>
</tr>
<tr>
<td>checked</td>
<td><cst:value property-value="rd12#checked" path="."/></td>
<td>
<ui:button>
<span>Switch</span>
<cf2:on event="cf2:activate">
<cf2:param component="rd12" name="control"/>
control.opGet('checked').set(!control.opGet('checked').get()); </cf2:on>
</ui:button>
</td>
</tr>
<tr>
<td>readonly</td>
<td><cst:value property-value="rd12#readonly" path="."/></td>
<td>
<ui:button>
<span>Switch</span>
<cf2:on event="cf2:activate">
<cf2:param component="rd12" name="control"/>
control.opGet('readonly').set(!control.opGet('readonly').get()); </cf2:on>
</ui:button>
</td>
</tr>
<tr>
<td>required</td>
<td><cst:value property-value="rd12#required" path="."/></td>
<td>
<ui:button>
<span>Switch</span>
<cf2:on event="cf2:activate">
<cf2:param component="rd12" name="control"/>
control.opGet('required').set(!control.opGet('required').get()); </cf2:on>
</ui:button>
</td>
</tr>
<tr>
<td>enabled</td>
<td><cst:value property-value="rd12#enabled" path="."/></td>
<td>
<ui:button>
<span>Switch</span>
<cf2:on event="cf2:activate">
<cf2:param component="rd12" name="control"/>
control.opGet('enabled').set(!control.opGet('enabled').get()); </cf2:on>
</ui:button>
</td>
</tr>
</table>
</div>
</div>
</body>
</html>