PreviousNext

Using the RadioButton component

A radio button is a fundamental part of any form or web application. You can use radio buttons wherever you want a user to make one choice from a group of options. For example, you would use radio buttons in a form to ask which credit card a customer is using to pay.

RadioButton parameters

The following are authoring parameters that you can set for each RadioButton component instance in the Property inspector or in the Component Inspector panel:

label sets the value of the text on the button; the default value is Radio Button.

data is the value associated with the radio button. There is no default value.

groupName is the group name of the radio button. The default value is radioGroup.

selected sets the initial value of the radio button to selected (true) or unselected (false). A selected radio button displays a dot inside it. Only one radio button within a group can have a selected value of true. If more than one radio button within a group is set to true, the radio button that is instantiated last is selected. The default value is false.

labelPlacement orients the label text on the button. This parameter can be one of four values: left, right, top, or bottom; the default value is right. For more information, see RadioButton.labelPlacement.

You can write ActionScript to set additional options for RadioButton instances using the methods, properties, and events of the RadioButton class. For more information, see RadioButton class.

Creating an application with the RadioButton component

The following procedure explains how to add RadioButton components to an application while authoring. In this example, the radio buttons are used to present a yes or no question, "Are you a Flashist?". The data from the radio group is displayed in a TextArea component with the instance name theVerdict.

To create an application with the RadioButton component, do the following:

  1. Drag two RadioButton components from the Components panel to the Stage.
  2. Select one of the radio buttons and in the Component Inspector panel do the following:
    • Enter Yes for the label parameter.
    • Enter Flashist for the data parameter.
  3. Select the other radio button and in the Component Inspector panel do the following:
    • Enter No for the label parameter.
    • Enter Anti-Flashist for the data parameter.
  4. Select Frame 1 in the Timeline, open the Actions panel, and enter the following code: 
    flashistListener = new Object();
flashistListener.click = function (evt){
    theVerdict.text = evt.target.selection.data
}
radioGroup.addEventListener("click", flashistListener);

    The last line of code adds a click event handler to the radioGroup radio button group. The handler sets the text property of the TextArea component instance theVerdict to the value of the data property of the selected radio button in the radioGroup radio button group. For more information, see RadioButton.click.

PreviousNext