Textinput

Text Input component description and its attributes

What is it?

The Text Input is a component that displays an editable text area for the user. These text inputs are used to collect data inputs from users using a keyboard.

This component has the following attributes:

AttributeTypeRequiredDefinition
valueString or BindingItem referring to the input value that will be entered in the Text Input component editable text field area.
placeholderString or BindingThe Placeholder is a text that is displayed when nothing has been entered in the editable text field.
enabledBooleanEnables or disables a text field
readOnlyBooleanSet the text field to be read only when set to true.
typeTextInputType or BindingThis attribute identifies the text type that it will feed the text field area. On Android and iOS, this field also attributes the type of keyboard that will shown.
styleIdStringThis attribute sets a String key to map this component in a Design System on the front end and set an style to it.
errorString or BindingThis attribute defines the TextInput error message.
showErrorBoolean or BindingEnables the error message to be visible when set to true.
onFocusList<Action>Sets a List of Actions that are triggered when the text field gains focus
onChangeList<Action>Sets a List of Actions that are triggered when the text field value changes
onBlurList<Action>Sets a List of Actions that are triggered when the text field looses focus

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."
        )
    )
)