How to use the Radio component

The Radio class may be selected when clicked or tapped — similar to a toggle button — but it is included in a group containing multiple radios, and only one radio may be selected at a time.

Live preview of the Radio component

The Basics

Start by creating some Radio controls, give them some text to display, add them to a ToggleGroup, and add them to the the display list.

var group = new ToggleGroup();

var radio1 = new Radio();
radio1.text = "One";
radio1.toggleGroup = group;
addChild(radio1);

var radio2 = new Radio();
radio2.text = "Two";
radio2.toggleGroup = group;
addChild(radio2);

var radio3 = new Radio();
radio3.text = "Three";
radio3.toggleGroup = group;
addChild(radio3);

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

Add an event listener for Event.CHANGE to perform an action when the user selects a different radio.

group.addEventListener(Event.CHANGE, toggleGroup_changeHandler);

Check for the new value of the selectedItem property in the listener.

function toggleGroup_changeHandler(event:Event):Void {
    var group = cast(event.currentTarget, ToggleGroup);
    var radio = cast(group.selectedItem, Radio);
    trace("group.selectedItem change: " + radio.text);
}

Alternatively, the value of the selectedIndex property references the index of the items in the group, in the order that they were added.

function toggleGroup_changeHandler(event:Event):Void {
    var group = cast(event.currentTarget, ToggleGroup);
    trace("group.selectedIndex change: " + group.selectedIndex);
}

States

When the user interacts with a radio using the mouse, keyboard, or touchscreen, its state will change, which may affect its appearance. For instance, the radio's icon and font styles may all be rendered differently in different states.

Similar to ToggleButton, the Radio component uses the ToggleButtonState enum, which provides the following values.

Notice that each state also defines a boolean value to indicate if the radio is selected or not. DOWN(true) and DOWN(false) both indicate that the radio is currently pressed down, but the value of true indicates that it is currently selected, while false means that it is not selected.

Styles

A number of styles may be customized on a Radio component, including the icon and font styles. Several more styles may be used to adjust the layout of the radio's children.

Font styles

The font styles of the radio's text may be customized by passing an openfl.text.TextFormat object to the textFormat property.

radio.textFormat = new TextFormat("Helvetica", 20, 0x3c3c3c);

If the radio's text should use different font styles when the radio is selected, pass a TextFormat to the selectedTextFormat property.

radio.selectedTextFormat = new TextFormat("Helvetica", 20, 0x9a9a9a, true);

Finally, the radio's text may use different font styles in a more fine-grained matter — by targeting an exact state. Use the setTextFormatForState() method to pass in a state value and a TextFormat.

radio.setTextFormatForState(ToggleButtonState.DISABLED(false), new TextFormat("Helvetica", 20, 0xcc0000));

Using the code above, the color of the radio's text will change when the radio is disabled and not selected.

When font styles aren't available for a specific state, the radio will use the default textFormat as a fallback (preferring selectedTextFormat when selected, of course).

Icon skin

Give the radio an icon using the icon property. The following example sets it to an OpenFL Shape instance.

var icon = new Shape();
icon.lineStyle(1.0, 0x999999);
icon.beginFill(0xcccccc);
icon.graphics.drawCircle(16.0, 16.0, 16.0);
icon.graphics.endFill();
radio.icon = icon;

The appearance of the radio's icon may change when the radio is selected. In the next example, another OpenFL Shape is passed to the radio's selectedIcon property.

var selectedIcon = new Shape();
selectedIcon.lineStyle(1.0, 0x999999);
selectedIcon.beginFill(0xcccccc);
selectedIcon.graphics.drawCircle(16.0, 16.0, 16.0);
selectedIcon.graphics.endFill();
selectedIcon.lineStyle(0.0);
selectedIcon.beginFill(0xccccff);
selectedIcon.graphics.drawCircle(16.0, 16.0, 10.0);
selectedIcon.graphics.endFill();
radio.selectedIcon = selectedIcon;

The icon may be customized for an exact state too. In the next example, the setIconForState() method is called to pass in a custom icon for the DOWN(false) state.

var downIcon = new Shape();
downIcon.lineStyle(1.0, 0x999999);
downIcon.beginFill(0xccccdd);
downIcon.graphics.drawCircle(16.0, 16.0, 16.0);
downIcon.graphics.endFill();
radio.setIconForState(ToggleButtonState.DOWN(false), downIcon);

Layout

Padding may be added on each side of the radio, including top, right, bottom, and left.

radio.paddingTop = 5.0;
radio.paddingRight = 8.0;
radio.paddingBottom = 5.0;
radio.paddingLeft = 8.0;

The icon may be positioned on any side of the radio's text. For instance, the following example moves the icon above the text, so that the icon and text are stacked vertically.

radio.iconPosition = TOP;

Set the iconPosition property to any of the RelativePosition values.

The gap refers to the space, measured in pixels, between the icon and the text.

radio.gap = 10.0;

The horizontalAlign and verticalAlign properties will adjust the alignment of the icon and text inside the radio, allowing you to anchor them at the edges or in the center.

radio.horizontalAlign = CENTER;
radio.verticalAlign = MIDDLE;