Skip to main content
Version: v2.4.0 (Current)

📝 Text Area

The Text Area widget is the primary input field for user-provided text. Unlike a Label, which is read-only, a Text Area allows for multi-line editing, character insertion, and deletion. It is most commonly used in conjunction with a Keyboard for data entry.


⚙️ Properties (Props)

The Text Area configuration is defined by the TextAreaWidget interface. It manages a dynamic string buffer and visual cursor positioning.

PropertyTypeDescription
TextstringThe current content of the input field.
PlaceholderstringHint text shown when the field is empty (e.g., "Enter Name...").
Password ModebooleanReplaces characters with symbols (●) for secure entry.
One LinebooleanForces the text to stay on a single horizontal line.
Max LengthnumberLimits the number of characters allowed in the field.

🛠 Interaction and Focus

The Text Area works by capturing "Focus." When a user clicks the widget:

  • The Cursor appears: A vertical line indicating the insertion point.
  • Events trigger: You can trigger a Keyboard to slide into view automatically.
  • Selection: Users can click to move the cursor or (if enabled) double-click to select words for replacement.

🎨 Styling the Input

In the Inspector Panel, you can define the look of the input box:

  • Main: Styles the background, border, and padding around the text.
  • Placeholder Color: Typically a lighter grey to distinguish it from actual user input.
  • Cursor Style: Adjust the color and "blink rate" of the vertical insertion bar.
  • Selected Text: Define the highlight color used when text is being copied or deleted.

⚡ Runtime API (Lua)

Text Areas are the core of user data collection in the Logic and Events system.

-- Get the user's input
local username = txt_user:get_text()

-- Clear the field after a successful submission
if submission_success then
txt_user:set_text("")
end

-- Programmatically add text to the current cursor position
txt_log:add_text("System Booted...")

-- Change to password mode dynamically
txt_pin:set_password_mode(true)

-- Move the cursor to the end of the text
txt_comment:set_cursor_pos(-1)

KEYBOARD BINDING

To make a Text Area functional, you must link it to a Keyboard. In Artok, you usually do this by setting the Keyboard's Target property to the specific Text Area widget ID.


🚀 Next Steps

  • Keyboard — The essential companion for any Text Area input.
  • Label — Use this for non-editable, static, or dynamic display text.
  • Logic and Events — Learn how to validate email addresses or passwords entered into a Text Area.