Jetpack Compose Tidbits — Series I: Text input — Part III — Password entry

Continuing with my series on text input in Jetpack Compose, you might be wondering how you would create a password entry field that masks the password being entered.

Enter VisualTransformation. An example should make it clear how this is used:

var password by remember { mutableStateOf("") }
TextField(
  value = password,
  onValueChange = { password = it },
  label = { Text(text = "Password") },
  visualTransformation = PasswordVisualTransformation()
)

The result:

TextField before typing the password

TextField with visual transformation applied, while typing the password

#Extra marks

You can also specify your own mask, e.g.

…
visualTransformation = PasswordVisualTransformation('+')
…

resulting in:

Look out for more articles in this text input series as we continue our journey to Compose proficiency! See you in the next one.