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.

5 thoughts on “Changing a Flex FormItem container’s indicator skin

  1. As Chetan Sachdev said, I too want the same..

    Hi Peter could you please suggest some idea on this. :)

  2. <mx:HBox>
    <mx:Image
    source=”@Embed(source=’Assets.swf’,symbol=’mx.containers.FormItem.Required’)”
    height=”7″/>
    <mx:Label text=”Required field”/>
    </mx:HBox>

Comments are closed.