<radiogroup>

The <radiogroup> component encloses a list of <radiobutton>s. It ensures that a single item is selected at a time. Initially it will select the first item in a group if none is set to be selected. By default the radio buttons are spaced vertically.

In the following example, the second radio button is selected. The text that appears is separate from the value that is represented by each item. In this example, group1.value is 2.

<canvas width="200" height="100">
  <radiogroup id="group1">
    <radiobutton value="1" text="one"/>
    <radiobutton value="2" text="two" selected="true"/>
    <radiobutton value="3" text="three"/>
  </radiogroup>
</canvas>

You can use radio group with your own layout attribute, by overriding the <view> layout attribute. The example below uses a wrapping layout to create two columns of radio buttons. Note that a height must be given to indicate to the layout where to wrap.

<canvas width="200" height="100">
  <radiogroup height="60" layout="class:wrappinglayout; axis:y">
    <radiobutton value="1" text="one"/>
    <radiobutton value="2" text="two"/>
    <radiobutton value="3" text="three"/>
    <radiobutton value="4" text="four"/>
    <radiobutton value="5" text="five"/>
    <radiobutton value="6" text="six"/>
  </radiogroup>
</canvas>

A radiogroup can contain a set of any <baselistitem>. To make radio buttons with a different look and feel, create a subclass of <baselistitem> to use instead of the <radiobutton> class.

• <radiobutton> and <baselistitem>

• For details on how this component is constructed, see the Radio Button section of the Component Design Guide.