radiogroup

Creates a group of radio buttons. This is useful if you want to create a list of options from which the user may select only one choice.

Each radio button appears as an empty circle that is filled with a marker, such as a dot, when selected.

Note: radiogroup items are only valid for XForms forms. If you are not using XForms, use the radio item instead.

Available Options

acclabel, active, bgcolor, border, borderinfo, focused, format, help, itemlocation, itemnext, itemprevious, label, labelbgcolor, labelborder, labelfontcolor, labelfontinfo, mouseover, next, previous, printbgcolor, printlabelbgcolor, printlabelfontcolor, printvisible, readonly, suppresslabel, value, visible, xformsenabled, xformsreadonly, xformsrequired, xformsvalid, xforms:select1

Examples

The following code creates a radiogroup with three choices: US Dollars, CDN Dollars, and Euro. The choices themselves are defined within the <xforms:select1> option.

   <radiogroup sid="currency">
      <xforms:select1 ref="selectedCurrency" appearance="full">
         <xforms:label>Select the currency you accept:</xforms:label>
         <xforms:item>
            <xforms:label>US Dollars</xforms:label>
            <xforms:value>USD</xforms:value>
         </xforms:item>
         <xforms:item>
            <xforms:label>CDN Dollars</xforms:label>
            <xforms:value>CDN</xforms:value>
         </xforms:item>
         <xforms:item>
            <xforms:label>Euro</xforms:label>
            <xforms:value>Euro</xforms:value>
         </xforms:item>
      </xforms:select1>
   </radiogroup>

Alternatively, you could create the choices in your data model as follows:

   <xforms:instance id="currency" xmlns="">
      <data>
         <choice show="US Dollars">USD</choice>
         <choice show="CDN Dollars">CDN</choice>
         <choice show="Euros">Euro</choice>
      </data>
   </xforms:instance>

In this case, use <xforms:itemset> to link to those choices, as illustrated by the following radiogroup:

   <radiogroup sid="currencyType">
      <xforms:select1 ref="selectedCurrency" appearance="full">
         <xforms:label>Select your preferred currency for payment:</xforms:label>
         <xforms:itemset nodeset="instance('currency')/choice">
            <xforms:label ref="@show"></xforms:label>
            <xforms:value ref="."></xforms:value>
         </xforms:itemset>
      </xforms:select1>
   </radiogroup>

Usage details

  1. To allow the user to select any number of choices use a checkgroup instead of a radiogroup.
  2. Each radio button in a radiogroup can have its own label. These labels are displayed immediately to the right of the radio button (rather than above the radio button, as with the radio item).
  3. The single node binding in the xforms:select1 option creates a link between the value option for the radiogroup and the bound element in the data model, so that they share data. When the user makes a selection, the xforms:value of that selection is stored in both locations.
  4. The contents of the value option for the radiogroup are never serialized.
  5. The mouseover option is active for each radio button in the group, not for the group as a whole. This means that you can use the <xforms:extension> element to make changes to individual radio buttons in the group. For example, the following radiogroup changes the background color of each radio button when the mouse is over it: 
       <xforms:itemset nodeset="instance('currency')/choice">
      <xforms:label ref="@show"></xforms:label>
      <xforms:value ref="."></xforms:value>
      <xforms:extension>
         <bgcolor compute="mouseover == 'on' ? 'blue' : 'green'"/>
      </xforms:extension>
   </xforms:itemset>
  6. The itemlocation of radio buttons in a radiogroup is interpreted relative to the top-left of the group, not the top-left of the form. The top-left of the group is set 3 pixels in from the left edge of the group, and 3 pixels down from the top edge of the group. This allows room for a border to be added to the group.
  7. If using relative positioning, you can give each radio an itemlocation of after the itemprevious, as shown:
       <xforms:extension>
      <itemlocation>
         <after compute="itemprevious"/>
      </itemlocation>
   </xforms:extension>

    This will place each radio after its predecessor, except for the first radio, which is placed at the top left corner of the group. For the first radio, the after command is ignored because the radiogroup position is not set until after the contained radio items are positioned, and itemlocation keywords are ignored when they refer to items that have not been positioned.

  8. Use the layoutflow option to control if the content is displayed vertically or horizontally.
  9. The itemnext is set as follows:
    • The radiogroup itself refers to the first radio in the group.
    • The last radio in the group refers to the item that follows the radiogroup in the build order.
    • The item that precedes the radiogroup in the build order refers to the radiogroup itself.
  10. The size of a radiogroup is determined by the size of the radio items and labels in that group. As such, the extent setting in the itemlocation option has no affect on the group's sizing.
  11. Do not use itemprevious to compute the location of an item after an radiogroup . Doing so can break signatures, as the items inside radiogroups receive random scope identifiers at runtime. If you sign the form with a compute resolved to a random sid, the compute is locked to that random sid. If you then reopen the form, the items inside the radiogroups are assigned new random sids, which do not correspond with the sid associated with the compute and break the signature.
Parent topic: Items