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.

3 thoughts on “Styling individual FormItem labels using the labelStyleName style

  1. Do you have any idea how to display formitem labels above the form element? so for example a textinput box could have “First Name” above it rather than to the left of it? I have searched and not found any documentation on this. Thanks! -B

  2. Is there a way to place the label above the field instead of to the left? I would like my form to have it’s labels above the Text Fields for better readability.

    For that matter can you put it on the right like your comments form above has?

  3. I’m not aware of any way to move the FormItem container’s label relative to its content.
    You could try asking on the FlexCoders mailing list and see if people have done this before.

    Sorry,
    Peter

Comments are closed.