Changing a CheckBox control’s icon

The following example shows how you can customize the check icon in a CheckBox control and use embedded images instead.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/08/25/changing-a-checkbox-controls-icon/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            [Bindable]
            [Embed(source="assets/icon_accept.gif")]
            public var AcceptIcon:Class;

            [Bindable]
            [Embed(source="assets/icon_alert.gif")]
            public var AlertIcon:Class;
        ]]>
    </mx:Script>

    <mx:CheckBox id="checkBox"
            label="Custom icon test (selected={checkBox.selected})"

            disabledIcon="{AlertIcon}"
            downIcon="{AlertIcon}"
            overIcon="{AlertIcon}"
            upIcon="{AlertIcon}"

            selectedDisabledIcon="{AcceptIcon}"
            selectedDownIcon="{AcceptIcon}"
            selectedOverIcon="{AcceptIcon}"
            selectedUpIcon="{AcceptIcon}"
         />

</mx:Application>

View source is enabled in the following example.

Tagged as: icon