How to use the Feathers Radio component

The Radio component is a ToggleButton component that integrates with a ToggleGroup so that only one Radio in the group is selected at a time.

A skinned Radio component usually has no background (or a transparent one) and the touch states of the radio are displayed through the icon skins. For more detailed information about the skinning options available to Radio, see How to use the Feathers ToggleButton component.

Using ToggleGroup

If no ToggleGroup is provided, a Radio will automatically add itself to Radio.defaultRadioGroup. In general, though, you should always create a ToggleGroup for a distinct set of radio buttons.

var group:ToggleGroup = new ToggleGroup();
 
var radio1:Radio = new Radio();
radio1.label = "One";
radio1.toggleGroup = group;
this.addChild( radio1 );
 
var radio2:Radio = new Radio();
radio2.label = "Two";
radio2.toggleGroup = group;
this.addChild( radio2 );
 
var radio3:Radio = new Radio();
radio3.label = "Three";
radio3.toggleGroup = group;
this.addChild( radio3 );

Simply pass the ToggleGroup instance to the toggleGroup property of a Radio instance.

Listen for the Event.CHANGE event dispatched by the toggle group to know when the selected radio button has changed.

group.addEventListener( Event.CHANGE, group_changeHandler );

A listener might look like this:

function group_changeHandler( event:Event ):void
{
    var group:ToggleGroup = ToggleGroup( event.currentTarget );
    trace( "group.selectedIndex:", group.selectedIndex );
}

Use the selectedIndex to get the numeric index of the selected radio button (based on the order that the radio buttons were added to the toggle group). The selectedItem will reference the selected radio button directly:

var radio:Radio = Radio( group.selectedItem );
trace( "radio.label:", radio.label );

Skinning a Radio

A skinned Radio component usually has no background (or a transparent one) and the touch states of the radio are displayed through the icon skins. For full details about what skin and style properties are available, see the Radio API reference.

As mentioned above, Radio is a subclass of ToggleButton. For more detailed information about the skinning options available to Radio, see How to use the Feathers ToggleButton component.

Targeting a Radio in a theme

If you are creating a theme, you can set an function for the default styles like this:

getStyleProviderForClass( Radio ).defaultStyleFunction = setRadioStyles;

If you want to customize a specific radio to look different than the default, you may use a custom style name to call a different function:

radio.styleNameList.add( "custom-radio" );

You can set the function for the custom style name like this:

getStyleProviderForClass( Radio )
    .setFunctionForStyleName( "custom-radio", setCustomRadioStyles );

Trying to change the radio's styles and skins outside of the theme may result in the theme overriding the properties, if you set them before the radio was added to the stage and initialized. Learn to extend an existing theme to add custom skins.

If you aren't using a theme, then you may set any of the radio's properties directly.

User Experience

In general, a set of Radio controls should be used only when there are three or more choices that a user must make. If there are only two choices, a Check or a ToggleSwitch may be more appropriate. If there are so many choices that a set of Radio controls will fill a significant amount of space on screen, a PickerList is probably a better choice. The default item renderer of a PickerList is also a subclass of ToggleButton, so it's possible to style the list's items to look like radio buttons, if you prefer.