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:
image

text

Value type: string

Supports data binding

Description


The text in the input frame.

Example Usage

<Input layout="flex" height="30" width="200" text="Text Input" />

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" />

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" />

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" />

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" />

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" />

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" />

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"/>

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" />

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" />