The Label control is a noneditable single-line text label. It has the following characteristics:

• The user cannot change the text, but the application can modify it.
• You can specify text formatting by using styles or HTML text.
• You can control the alignment and sizing.
• The control is transparent and does not have a backgroundColor property, so the background of the component's container shows through.
• The control has no borders, so the label appears as text written directly on its background.
• The control cannot take the focus.

For complete reference information, see the Adobe Flex Language Reference.

To create a multiline, noneditable text field, use a Text control. For more information, see Text control. To create user-editable text fields, use TextInput or TextArea controls. For more information, see TextInput control and TextArea control.

The following image shows a Label control:

For the code used to create this sample, see Creating a Label control.

Creating a Label control

You define a Label control in MXML by using the <mx:Label> tag, as the following example shows. Specify an id value if you intend to refer to a component elsewhere in your MXML, either in another tag or an ActionScript block.

<?xml version="1.0"?>
<!-- textcontrols/LabelControl.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
    width="150" height="80" 
    borderStyle="solid" 
    backgroundGradientColors="[#FFFFFF, #FFFFFF]">

  <mx:Label text="Label1"/>
</mx:Application>
The executing SWF file for the previous example is shown below:

You use the text property to specify a string of raw text, and the htmlText property to specify an HTML-formatted string. For more information on using these properties, see Using the text property and Using the htmlText property.

Sizing a Label control

If you do not specify a width, the Label control automatically resizes when you change the value of the text or htmlText property.

If you explicitly size a Label control so that it is not large enough to accommodate its text, the text is truncated and terminated by an ellipsis (...). The full text displays as a tooltip when you move the mouse over the Label control. If you also set a tooltip by using the tooltip property, the tooltip is displayed rather than the text.