The TextInput control is a single-line text field that is optionally editable. The TextInput control supports the HTML rendering capabilities of Adobe Flash Player.

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

The following image shows a TextInput control:

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

The TextInput control does not include a label, but you can add one by using a Label control or by nesting the TextInput control in a FormItem container in a Form layout container, as shown in the example in About text controls. TextInput controls dispatch change, textInput, and enter events.

If you disable a TextInput control, it displays its contents in a different color, represented by the disabledColor style. You can set a TextInput control's editable property to false to prevent editing of the text. You can set a TextInput control's displayAsPassword property to conceal the input text by displaying characters as asterisks.

Creating a TextInput control

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

<?xml version="1.0"?>
<!-- textcontrols/TextInputControl.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
  <mx:TextInput id="text1" width="100"/>
</mx:Application>
The executing SWF file for the previous example is shown below:

Just as you can for the Label control, 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, see Using the text property and Using the htmlText property.

Sizing a TextInput control

If you do not specify a width, the TextInput control automatically resizes when you change the value of the text or htmlText property. It does not resize in response to typed user input.

Binding to a TextInput control

In some cases, you might want to bind a variable to the text property of a TextInput control so that the control represents a variable value, as the following example shows:

<?xml version="1.0"?>
<!-- textcontrols/BoundTextInputControl.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
  <mx:Script><![CDATA[
     [Bindable]
     public var myProp:String="This is the initial String myProp.";
  ]]></mx:Script>
  <mx:TextInput text="{myProp}"/> 
</mx:Application>
The executing SWF file for the previous example is shown below:

In this example, the TextInput control displays the value of the myProp variable. Remember that you must use the [Bindable] metadata tag if the variable changes value and the control must track the changed values; also, the compiler generates warnings if you do not use this metadata tag.