Ui XML Reference\Input
A text input frame. By default, this frame type attempts to fill its parent size unless given explicit dimensions.
Example Usage
<Input layout="flex" height="30" width="200" />
This XML produces the following UI:
Related Trigger Function(s):
text
Value type: string
Supports data binding
Description
Example Usage
<Input layout="flex" height="30" width="200" text="Text Input" />
Related Trigger Function(s):
translationKey
Value type: string
Supports data binding
Description
The translation key for the input frame. This uses a translation key declared in the Data Window (Localization tab) to display text across different languages.
Example Usage
<Input layout="flex" height="30" width="200" text="Text Input" translationKey="key" />
Related Trigger Function(s):
fontSize
Value type: number
Supports data binding
Description
The font size for the input frame.
Example Usage
<Input layout="flex" height="100" width="400" text="Text Input" fontSize="80" color="r: 1, g: 0, b: 0, a: 1" />
Related Trigger Function(s):
color
Value type: color
Supports data binding
Description
The font color for the input frame.
Example Usage
<Input layout="flex" height="100" width="400" text="Text Input" fontSize="80" color="r: 1, g: 0, b: 0, a: 1" />
Related Trigger Function(s):
outline
Value type: boolean
⚠️Warning⚠️: This attribute was deprecated at editor version: 0.35.0, and will be removed after 90 days.
Supports data binding
Description
The text outline status for the input frame, where true
enables the text outline.
Note that this doesn't actually work. Outline is only supported for Text frames.
Example Usage
<Input layout="flex" height="100" width="400" text="Text Input" fontSize="80" color="r: 1, g: 0, b: 0, a: 1" outline="true" />
wrapping
Value type: boolean
Supports data binding
Description
The font wrapping status for the input frame, where true
enables font wrapping. Font wrapping will wrap text to the next line if it would exceed the current line. By default, this value is false for input frames.
Example Usage
<Input layout="flex" height="300" width="200" text="Text Input" fontSize="80" color="r: 1, g: 0, b: 0, a: 1" wrapping="true" />
Related Trigger Function(s):
placeholder
Value type: string
Supports data binding
Description
The placeholder text that appears whenever the input frame is empty. This text is bolded and italicized by default.
Example Usage
<Input layout="flex" height="40" width="200" placeholder="Text Input" />
Related Trigger Function(s):
placeholderTranslationKey
Value type: string
Supports data binding
Description
The translation key for the placeholder text. This uses a translation key declared in the Data Window (Localization tab) to display text across different languages.
Example Usage
<Input layout="flex" height="40" width="200" placeholder="Text Input" placeholderTranslationKey="key" />
Related Trigger Function(s):
placeholderFontSize
Value type: number
Supports data binding
Description
The placeholder text font size for the input frame.
Example Usage
<Input layout="flex" height="90" width="400" placeholder="Text Input" placeholderFontSize="60"/>
Related Trigger Function(s):
placeholderColor
Value type: color
Supports data binding
Description
The placeholder text color for the input frame.
Example Usage
<Input layout="flex" height="90" width="400" placeholder="Text Input" placeholderFontSize="60" placeholderColor="r: 0, g: 0, b: 1, a: 1" />
Related Trigger Function(s):
placeholderOutline
Value type: boolean
Supports data binding
Description
The placeholder text outline status for the input frame, where true
enables the text outline. The outline is always black.
Example Usage
<Input layout="flex" height="90" width="400" placeholder="Text Input" placeholderFontSize="60" placeholderColor="r: 1, g: 1, b: 0, a: 1" placeholderOutline="true" />