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:
Attribute | Type | Required | Definition |
---|---|---|---|
value | String or Binding | ✓ | Item referring to the input value that will be entered in the Text Input component editable text field area. |
placeholder | String or Binding | The Placeholder is a text that is displayed when nothing has been entered in the editable text field. | |
enabled | Boolean | Enables or disables a text field | |
readOnly | Boolean | Set the text field to be read only when set to true . | |
type | TextInputType or Binding | This 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. | |
styleId | String | This attribute sets a String key to map this component in a Design System on the front end and set an style to it. | |
error | String or Binding | This attribute defines the TextInput error message. | |
showError | Boolean or Binding | Enables the error message to be visible when set to true . | |
onFocus | List<Action> | Sets a List of Actions that are triggered when the text field gains focus | |
onChange | List<Action> | Sets a List of Actions that are triggered when the text field value changes | |
onBlur | List<Action> | Sets a List of Actions that are triggered when the text field looses focus |
a1e8cf44… updates the text input info, attribute details and table structure
It is an ENUM
responsible to define which type of text input.
Type | Definition |
---|---|
DATE | Data input is a date. |
Data input is an email. | |
PASSWORD | Data input is a password. |
NUMBER | Data input only with numbers. |
TEXT | Data input is a text. |
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."
)
)
)
Was this page helpful?
Glad to hear it! Please tell us how we can improve.
Sorry to hear that. Please tell us how we can improve.