Textinput

Text Input component description and its attributes

What is it?

Input is a component that displays an editable text area for the user. These text fields are used to collect inputs that the user insert using the keyboard.

See how the structure is represented by the attributes below:

AttributeTypeRequiredDefinition
valueString or BindingItem referring to the input value that will be entered in the editable text area of the Text Input component.
placeholderString or BindingThe Placeholder is a text that is displayed when nothing has been entered in the editable text field.
disabledBooleanEnables or disables the field.
readOnlyBooleanCheck if the Input will be editable or read only.
hiddenBooleanEnables the component to be visible or not.
typeTextInputType or BindingThis attribute identifies the text type that it will receive in the editable field area. On Android and iOS, this field also attributes the type of keyboard that will be shown to the user.
styleIdStringThis attribute receives a key that is registered in the Design System of each platform that customizes the component.
onChangeList <Action>Actions array that this field can trigger when its value is altered. It is possible to define a customized action or any available action in the interface, for example, an action that shows an Alert message.

This attribute is optional, but if an action is defined here it needs to be configured in the fronted.
onBlurList <Action>Action array that this field can trigger when its focus is removed. It is possible to defined a customized action or any available action in the interface, for example, an action that shows an alert message (Alert). This attribute is optional, but if an action is defined here it needs to be configured in the fronted.
onFocusList <Action>Actions array that this field can trigger when this field is on focus. It is possible to defined a customized action or any available action in the interface, for example, an action that shows an alert message (Alert). This attribute is optional, but if an action is defined here it needs to be configured in the fronted.

TextInputType

It is an ENUM responsible to define which type of text input.

TypeDefinition
DATEData input is a date.
EMAILData input is an email.
PASSWORDData input is a password.
NUMBERData input only with numbers.
TEXTData input is a text.

How to use it?

See below an example of text input with the password type:

TextInput(
    value = "my value", 
    placeholder = "password", 
    type = TextInputType.PASSWORD, 
    styleId = "test.input.style",
    onChange = listOf(
        Alert(
            message = "Text value changed."
        )
    )
)

Last modified March 5, 2021: fix: change table docs (#385) (ea0ea742)