Styling individual FormItem labels using the labelStyleName style

The following example shows you how you can style individual labels in a FormItem container in Flex by setting the labelStyleName style, as seen in the following snippet:

<mx:Style>
    .requiredLabel {
        color: red;
        fontSize: 12;
        fontWeight: bold;
    }
</mx:Style>

<mx:Form>
    <mx:FormItem label="Field 1:"
            labelStyleName="requiredLabel"
            required="true">
        <mx:Label id="lbl1" text="{str}" />
    </mx:FormItem>
</mx:Form>

The labelStyleName style was added in Flex 3 build 186889 (Wed Nov 07 2007 or later). You may need to download a nightly build of the Flex 3 SDK from the Adobe Labs website.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/11/13/styling-individual-formitem-labels-using-the-labelstylename-style/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Style source="embeddedFonts.css" />
    <mx:Style>
        Form {
            fontFamily: ArialEmbedded;
        }

        FormHeading {
            color: haloSilver;
            fontSize: 24;
        }

        FormItem {
            labelStyleName: defaultLabel;
        }

        .defaultLabel {
            color: black;
            fontSize: 10;
            fontStyle: italic;
            fontWeight: normal;
        }

        .requiredLabel {
            color: red;
            fontSize: 12;
            fontWeight: bold;
        }
    </mx:Style>

    <mx:String id="str">
        <![CDATA[The quick brown fox jumped over the lazy dog.]]>
    </mx:String>

    <mx:Form>
        <mx:FormHeading label="Some form heading!" />
        <!-- override the default labelStyleName for the FormItem -->
        <mx:FormItem label="Field 1:"
                labelStyleName="requiredLabel"
                required="true">
            <mx:Label id="lbl1" text="{str}" />
        </mx:FormItem>

        <!-- override the default labelStyleName for the FormItem -->
        <mx:FormItem label="Field 2:"
                labelStyleName="requiredLabel"
                required="true">
            <mx:Label id="lbl2" text="{str}" />
        </mx:FormItem>

        <!-- default -->
        <mx:FormItem label="Field 3:">
            <mx:Label id="lbl3" text="{str}" />
        </mx:FormItem>

        <!-- default -->
        <mx:FormItem label="Field 4:">
            <mx:Label id="lbl4" text="{str}" />
        </mx:FormItem>
    </mx:Form>

</mx:Application>

View source is enabled in the following example.