===== TextField =====

com.ergotech.vib.graphics.TextField

==== Image Examples ====

| {{:mistudio:graphics:basic_layout:text_fields:pasted:20260622-171410.png?50|TextField in the graphics palette}} | {{:mistudio:graphics:basic_layout:text_fields:pasted:20260622-171319.png?100|TextField graphic example}} |
| //TextField in the graphics palette.// | //TextField graphic example.// |

==== Overview ====

The TextField graphic is a Basic Layout text field graphic used to display or enter text values.

TextField is useful when an application needs a single-line text field for user input, displayed values, status text, or runtime text updates.

TextField shares common properties with other Basic Layout text field graphics. See [[mistudio:design_editor:basic_layout:text_fields:text_field_common_properties|Text Field Common Properties]] for shared font, color, editable, enabled, background, visibility, and data source behavior.

==== Common Uses ====

  * Displaying text values
  * Entering text values
  * Showing status text
  * Displaying string values from a data source
  * Sending text values into application logic
  * Showing a single-line editable field

==== Input Behavior ====

The TextField display can be updated from an input connection.

This can be useful when the TextField needs to show a string value, message, or updated text from another source.

==== Output Behavior ====

TextField can provide an output value through its **PrimaryOutPort**.

This allows the entered or displayed text value to be used by other logic components.

==== TextField-Specific Behavior ====

TextField is designed for single-line text display or text entry.

TextField-specific settings may include:

  * **Cursor Color** Sets the cursor color.
  * **Formatter** Controls how the displayed value is formatted, if supported.
  * **Horizontal Alignment** Controls how the text is aligned inside the field.
  * **Selected Text Color** Sets the selected text color.
  * **Selection Color** Sets the background color used for selected text.
  * **Editable** Controls whether the user can edit the text field.
  * **Ignore Focus Lost** Controls whether the TextField ignores focus lost behavior, if supported.
  * **Additional CSS Class** Adds an additional CSS class, if supported.

==== Logic Ports ====

In the Logic Editor, TextField may include ports such as:

  * **PrimaryOutPort**
  * **updateDisplayedValue**

The exact available ports may depend on the current MIStudio version and configuration.

==== Notes ====

Use TextField for single-line text display or entry.

For longer or multi-line text, see [[mistudio:design_editor:basic_layout:text_fields:textarea|TextArea]].

For decimal numeric values, see [[mistudio:design_editor:basic_layout:text_fields:doubletextfield|DoubleTextField]].

For whole-number values, see [[mistudio:design_editor:basic_layout:text_fields:integertextfield|IntegerTextField]].

For shared text field settings, see [[mistudio:design_editor:basic_layout:text_fields:text_field_common_properties|Text Field Common Properties]].

For general graphic behavior, see [[mistudio:design_editor:active_graphic|Active Graphic]].

==== Related Pages ====

  * [[mistudio:design_editor:start|MIStudio Design Editor]]
  * [[mistudio:design_editor:basic_layout:start|Basic Layout]]
  * [[mistudio:design_editor:basic_layout:text_fields:start|Text Fields]]
  * [[mistudio:design_editor:basic_layout:text_fields:text_field_common_properties|Text Field Common Properties]]
  * [[mistudio:design_editor:basic_layout:text_fields:textarea|TextArea]]
  * [[mistudio:design_editor:basic_layout:text_fields:doubletextfield|DoubleTextField]]
  * [[mistudio:design_editor:basic_layout:text_fields:integertextfield|IntegerTextField]]
  * [[mistudio:design_editor:active_graphic|Active Graphic]]