The RadioButton control is a single choice in a set of mutually exclusive choices. A RadioButton group is composed of two or more RadioButton controls with the same group name. Only one member of the group can be selected at any given time. Selecting an unselected group member deselects the currently selected RadioButton control in the group.

About the RadioButton control

The following example shows a RadioButton group with three RadioButton controls:

For the code used to generate this example, see Creating a RadioButton control.

Creating a RadioButton control

You define a RadioButton control in MXML by using the <mx:RadioButton> tag, as the following example shows. Specify an id value if you intend to refer to a component elsewhere in your MXML, either in another tag or in an ActionScript block.

<?xml version="1.0"?>
<!-- controls\button\RBSimple.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

    <mx:RadioButton groupName="cardtype" 
        id="americanExpress"
        label="American Express" 
        width="150"/>
    <mx:RadioButton groupName="cardtype" 
        id="masterCard"
        label="MasterCard" 
        width="150"/>
    <mx:RadioButton groupName="cardtype" 
        id="visa"
        label="Visa" 
        width="150"/>
</mx:Application>
The executing SWF file for the previous example is shown below:

This code results in the application shown in About the RadioButton control.

For each RadioButton control in the group, you can optionally define an event listener for the button's click event. When a user selects a RadioButton control, Flex calls the event listener associated with the button for the click event, as the following code example shows:

<?xml version="1.0"?>
<!-- controls\button\RBEvent.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

    <mx:Script>
        <![CDATA[   

            import flash.events.Event;

            private function handleAmEx(event:Event):void {
                // Handle event.
                myTA.text="Got Amex";
            }

            private function handleMC(event:Event):void {
                // Handle event.
                myTA.text="Got MasterCard";
            }

            private function handleVisa(event:Event):void {
                // Handle event.
                myTA.text="Got Visa";
            }
        ]]>
    </mx:Script>

    <mx:RadioButton groupName="cardtype" 
        id="americanExpress"
        label="American Express" 
        width="150" 
        click="handleAmEx(event);"/>
    <mx:RadioButton groupName="cardtype" 
        id="masterCard"
        label="MasterCard" 
        width="150" 
        click="handleMC(event);"/>
    <mx:RadioButton groupName="cardtype" 
        id="visa"
        label="Visa" 
        width="150" 
        click="handleVisa(event);"/>
        
    <mx:TextArea id="myTA"/>
</mx:Application>
The executing SWF file for the previous example is shown below:

RadioButton user interaction

If a RadioButton control is enabled, when the user moves the mouse pointer over an unselected RadioButton control, the button displays its rollover appearance. When the user clicks an unselected RadioButton control, the input focus moves to the control and the button displays its false pressed appearance. When the mouse button is released, the button displays the true state appearance. The previously selected RadioButton control in the group returns to its false state appearance.

If the user moves the mouse pointer off the RadioButton control while pressing the mouse button, the control's appearance returns to the false state and the control retains input focus.

If a RadioButton control is not enabled, the RadioButton control and RadioButton group display the disabled appearance, regardless of user interaction. In the disabled state, all mouse or keyboard interaction is ignored.

The RadioButton and RadioButtonGroup controls have the following keyboard navigation features:

Creating a group by using the <mx:RadioButtonGroup> tag

The previous example created a RadioButton group by using the groupName property of each RadioButton control. You can also create a RadioButton group by using the RadioButtonGroup control, as the following example shows:

<?xml version="1.0"?>
<!-- controls\button\RBGroupSimple.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

    <mx:Script>
        <![CDATA[   

            import mx.events.ItemClickEvent;
    
            private function handleCard(event:ItemClickEvent):void {
                //Handle event.
            }
        ]]>
    </mx:Script>

    <mx:RadioButtonGroup id="cardtype" itemClick="handleCard(event);"/>
    <mx:RadioButton groupName="cardtype" 
        id="americanExpress" 
        value="AmEx" 
        label="American Express" 
        width="150"/>
    <mx:RadioButton groupName="cardtype" 
        id="masterCard" 
        value="MC" 
        label="MasterCard" 
        width="150"/>
    <mx:RadioButton groupName="cardtype" 
        id="visa" 
        value="Visa" 
        label="Visa" 
        width="150"/>
</mx:Application>
The executing SWF file for the previous example is shown below:

In this example, you use the id property of the <mx:RadioButtonGroup> tag to define the group name and the single itemClick event listener for all buttons in the group. The id property is required when you use the <mx:RadioButtonGroup> tag. The itemClick event listener for the group can determine which button was selected, as the following example shows:

<?xml version="1.0"?>
<!-- controls\button\RBGroupEvent.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

    <mx:Script>
        <![CDATA[   

            import mx.controls.Alert;
            import mx.events.ItemClickEvent;
    
            private function handleCard(event:ItemClickEvent):void {
                if (event.currentTarget.selectedValue == "AmEx") {
                    Alert.show("You selected American Express."); 
                } else if (event.currentTarget.selectedValue == "MC") {
                        Alert.show("You selected MasterCard.");
                } else {
                    Alert.show("You selected Visa.");
                } 
            }
        ]]>
    </mx:Script>
    
    <mx:RadioButtonGroup id="cardtype" itemClick="handleCard(event);"/>
    <mx:RadioButton groupName="cardtype" 
        id="americanExpress" 
        value="AmEx" 
        label="American Express" 
        width="150"/>
    <mx:RadioButton groupName="cardtype" 
        id="masterCard" 
        value="MC" 
        label="MasterCard" 
        width="150"/>
    <mx:RadioButton groupName="cardtype" 
        id="visa" 
        value="Visa" 
        label="Visa" 
        width="150"/>
</mx:Application>
The executing SWF file for the previous example is shown below:

This code results in the following output when you select the American Express button:

In the itemClick event listener, the selectedValue property of the RadioButtonGroup control in the event object is set to the value of the value property of the selected RadioButton control. If you omit the value property, Flex sets the selectedValue property to the value of the label property.

You can still define a click event listener for the individual buttons, even though you also define one for the group.