Setting the button label placement on a RadioButton control in Flex

The following example shows how you can set the button label placement on a Flex RadioButton control by setting the labelPlacement property in MXML or ActionScript.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/08/18/setting-the-button-label-placement-on-a-radiobutton-control-in-flex/ -->
<mx:Application name="RadioButton_labelPlacement_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            import mx.controls.ButtonLabelPlacement;

            private const arr:Array = [ButtonLabelPlacement.LEFT,
                                        ButtonLabelPlacement.RIGHT,
                                        ButtonLabelPlacement.TOP,
                                        ButtonLabelPlacement.BOTTOM];
        ]]>
    </mx:Script>

    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="labelPlacement:">
                <mx:ComboBox id="comboBox"
                        dataProvider="{arr}"
                        selectedIndex="1" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

    <mx:RadioButton id="radioButton"
            label="RadioButton"
            labelPlacement="{comboBox.selectedItem}" />

</mx:Application>

View source is enabled in the following example.

You can also set the labelPlacement property using ActionScript, as seen in the following example:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/08/18/setting-the-button-label-placement-on-a-radiobutton-control-in-flex/ -->
<mx:Application name="RadioButton_labelPlacement_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            import mx.controls.ButtonLabelPlacement;
            import mx.events.ListEvent;

            private const arr:Array = [ButtonLabelPlacement.LEFT,
                                        ButtonLabelPlacement.RIGHT,
                                        ButtonLabelPlacement.TOP,
                                        ButtonLabelPlacement.BOTTOM];

            private function comboBox_change(evt:ListEvent):void {
                var value:String = comboBox.selectedItem.toString();
                radioButton.labelPlacement = value;
            }
        ]]>
    </mx:Script>

    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="labelPlacement:">
                <mx:ComboBox id="comboBox"
                        dataProvider="{arr}"
                        selectedIndex="1"
                        change="comboBox_change(event);" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

    <mx:RadioButton id="radioButton"
            label="RadioButton" />

</mx:Application>

4 thoughts on “Setting the button label placement on a RadioButton control in Flex

  1. These examples are a little weak, the label placement is the same for all controls. This post implies it is somehow different.

    You should have more complex examples. I think most people know how to set properties on controls.

  2. How would you position the label 2 or 3 pixels from top of the control? What is the best way to vertically center the text to the radio button? By default the text seems to be top aligned with the button. This is undesirable in many cases.

    1. You can use the leading property of the radio button. This will change the position of label vertically. From there, you can manage the leading Position.
      Normally, leading=0 will align the label vertically.

Comments are closed.