Changing a Flex FormItem container’s indicator skin

The following example shows how you can change the FormItem container’s indicator skin which appears when the form item’s required property is set to true.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/10/06/changing-a-flex-formitem-containers-indicator-skin/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="top"
        backgroundColor="white">

    <mx:Style>
        FormItem {
            indicatorSkin: Embed(source="assets/asterisk_yellow.png");
            indicatorGap: 24; /* pixels */
        }

        FormItemLabel {
            textAlign: left;
        }
    </mx:Style>

    <mx:Form>
        <mx:FormHeading label="FORM HEADING" />
        <mx:FormItem label="Name:" required="true">
            <mx:TextInput />
        </mx:FormItem>
        <mx:FormItem label="Email:" required="true">
            <mx:TextInput />
        </mx:FormItem>
        <mx:FormItem label="Phone number:">
            <mx:TextInput />
        </mx:FormItem>
    </mx:Form>

</mx:Application>

View source is enabled in the following example.

Tagged as: indicatorGap, indicatorSkin