< Jewel Components list

Jewel RadioButton


Available since version 0.9.4.

Class Extends
org.apache.royale.jewel.RadioButton org.apache.royale.jewel.supportClasses.button.SelectableButtonBase

Note: This component is currently only available for JavaScript.


The Jewel RadioButton control lets the user choose one of a set of options. For each option there is a selectable circle and text that describes the option. Radio buttons always appear in groups of two or more with the same groupName property. When you select one radio button, any other button you may have previously selected in the group becomes deselected.

Example of use

In MXML declare a RadioButton like this:


In ActionScript we can do the same in the following way:

var radioButton:RadioButton = new RadioButton();

where parent is the container where the control will be added.

Here is an example for this control:

code here

Relevant Properties and Methods

Check the Reference of org.apache.royale.jewel.RadioButton for a more detailed list of properties and methods.


PROPERTY Type Description
selected Boolean true if the check mark is displayed, false otherwise. Only one RadioButton can be selected at a time in the same group.
selectedValue Object The currently selected value in the group.
text String The string used as a label.
value String The associated value.
groupName String The name of the group to which this radio button belongs.



Relevant Events

The RadioButton has a change event of type org.apache.royale.events.Event. This event is dispatched when the control is selected or deselected by the user. Notice that programmatic changes will not trigger this event.

Since this component is in essence a button, it has click event as well. When the user clicks the radio button, it dispatches a normal click event.

You can attach callback listeners to the change event in MXML as follows:

<j:RadioButton text="A RadioButton" value="somevalue" change="changeHandler(event)"/>

the change event will use the changeHandler callback function you provide in ActionScript:

        private function changeHandler(event:Event):void {
            trace('RadioButton value is: ' + event.target.value, ' and selected state is: ' + event.target.selected);

When the user clicks or presses the a radio button a message will be logged in the console showing the value and selected property values.

In ActionScript we can add an event handler this way:

var radioButton:RadioButton = new RadioButton();
radioButton.text = "A RadioButton";
radioButton.value = "somevalue";
radioButton.addEventListener('change', changeHandler);

Relevant Beads

Unlike other components in Royale, the Jewel RadioButton does not have beads for View, Controller or Model in the JavaScript platform.

On the other hand, you can add other common Jewel control beads to it to provide more functionality. Many Jewel controls share these beads.

Common Beads

Bead Type Implementation Description
Disabled org.apache.royale.core.IBead This bead lets you disable and enable a Jewel control.

More examples

Other related Jewel components are: