Recipe 13.5. Adding a Radio Button Form Control

Problem

You want to add a radio button to your Flash application.

Solution

Add an instance of the RadioButton component and set the parameters.

Discussion

Radio buttons are typically used in groups, and they allow the user to select one option from the group. When the user clicks on one radio button, it gets selected and the others in the group get deselected. Adding radio buttons is almost as simple as adding checkboxes. The only additional thing you need to make sure of with radio buttons is that you specify a value for the groupName parameter.

To add a radio button to your application, drag an instance from the Component Inspector onto the stage. As with any component, give it an instance name in the Property inspector. You can then set the parameters for the instance using the Property inspector or the Component Inspector panel. You'll likely notice that radio buttons have the same three parameters as checkboxes. You can set those values appropriately.

In addition to the three parameters that they share with checkboxes, radio boxes also have a groupName parameter. The group name is important for several reasons. It is what tells Flash which radio buttons are grouped together so that it knows how to select and deselect radio buttons based on user interaction. All radio buttons with the same group name will automatically interact with one another in the way described earlier in this recipe. Another reason that the group name is important is that it allows you to later retrieve the selected value for a group. So for each radio button that you want to group together, make sure that you assign the same group name value.

Radio buttons also allow you to specify a data parameter. The data parameter for a radio button is very similar to the data parameter values for a combo box or list. The data value is hidden from the user, but it can be used programmatically if appropriate. If you specify a data value, that is the value that will be returned as the selected value for a radio button group. Otherwise, if you don't define the data parameter value then the label is used as the value.

As with checkboxes, if the label of your radio button extends beyond the bounding box of the component instance, it will appear cut off. You can resize the radio button using the Property inspector or any of the tools for scaling or transforming the instance.