Jetpack Compose Tidbits — Series I: Text input — Part I

Are you new to Jetpack Compose and wanna make a screen with a text input? Well, Compose has a built-in composable called TextField.

At a minimum, the TextField composable offers the following parameters:

value — the value currently in the text field. This can either be a TextFieldValue or a String. For the text field to actually be editable, this value needs to be a MutableState object. Typically, the value variable is declared as:

var name by remember { mutableStateOf("") }

but it could also be declared as:

var name by remember { mutableStateOf(TextFieldValue()) }

onValueChanged — a function to be executed whenever the value in the text field changes.

Of course, it is useful to have a label, which is a composable for showing some text naming the field to guide the user what information is being requested in that field.

Example code:

TextField(
  value = name,
  onValueChange = { name = it },
  label = { Text(text = "Name") }
)

Here is a screenshot of the resulting text input field

#Extra marks

In a future article, we will talk about what TextFieldValue is and why you would want to use it.