Skip to main content

Text Input

Text Input Component

BRICKS TOOLS avatar
Written by BRICKS TOOLS
Updated over a week ago

  • Introduction

When a display device supports input capabilities, the Text Input component can be added to allow users to enter information such as email, name, phone number, or birthday.
​

The Text Input component supports multiple virtual keyboard formats.

  • Frame Block

The Frame attributes of this component are the same as those of the Rect component. For details, refer to the Rect component’s Frame section.

  • Properties Block

The Properties of the Text Input component inherit from both the Text component and the Rect component. For details, see the Rect component’s Properties section and the Text component’s Properties section.

Additional Properties

Property Name

Property Type

Description

Editable

Boolean

Boolean (Yes/No)

To specify whether editions are allowed on the Text Input Brick. "No" is mostly used in situations where property banks are involved.

Specifies whether editing is allowed. If set to No, the input field cannot be clicked or edited. Commonly used when controlled by variables.

Placeholder

String

String

The placeholder text shown inside the Text Input Brick when no text is being inputted.

Sets the placeholder text displayed inside the input box when no text is entered.

Placeholder Text Color

String

String

The color of the placeholder text. Users can select a color from the color panel or specify the color with HEX, RGBA, or HSLA.

Sets the placeholder text color. Can be configured directly using the color panel or by entering a HEX, RGBA, or HSLA value.

Max Length

Number

Number

The maximum character that can be filled in the Text Input Brick.

Sets the maximum number of characters that can be entered in the input field.

Keyboard Type

One Of

List

The virtual keyboard type that shows up when users tap on the Text Input Brick

  • default

  • number-pad

  • decimal-pad

  • numeric

  • email-address

  • phone-pad

Sets the type of virtual keyboard that opens when the input field is tapped.

  • default: System default keyboard

  • number-pad: Digits only, no decimal point

  • decimal-pad: Includes decimal point (locale-dependent)

  • numeric: Includes decimal point keyboard

  • email-address: Email input keyboard, includes @ by default

  • phone-pad: Dial pad including +, *, and #

Return Key Type

One Of

清單

The return key type of the default keyboard and the email-address keyboard

  • done

  • go

  • next

  • search

  • send

Sets the return key label for the default and email-address keyboards.

  • done: Done

  • go: Go

  • next: Next

  • search: Search

  • send: Send

  • Properties – Border Block

The border attributes are the same as those of the Rect component. For details, see the Rect component’s Border section.

  • Animations Block

The animation attributes are the same as those of the Rect component. For details, see the Rect component’s Animation section.

// Link to Animation tutorial

  • Events Block

The event attributes are the same as those of the Rect component. For details, see the Rect component’s Event section.

// Link to Event tutorial

NEXT - Image Component

Did this answer your question?