Add a hint/placeholder to a TextField in Compose

06.09.2022 — Android, Jetpack, Compose, Kotlin — 1 min read

Here's another quick Jetpack Compose tip. Are you confused about how you can add a hint or placeholder to one of your TextFields? Check out a short explanation in this post.

So just as a refresher, let's assume that you have a TextField already set up like this in your Composable:

1@OptIn(ExperimentalMaterial3Api::class)
2@Composable
3fun SomethingScreen() {
4    var input by remember {
5        mutableStateOf("")
6    }
7
8    Column {
9        TextField(
10            value = input,
11            onValueChange = { input = it }
12        )
13    }
14}

The above is really simple example, you might have something a little more complex going on. Anyway all you need to do to add a placeholder to the above is to use the placeholder parameter:

1@OptIn(ExperimentalMaterial3Api::class)
2@Composable
3fun SomethingScreen() {
4    var input by remember {
5        mutableStateOf("")
6    }
7
8    Column {
9        TextField(
10            value = input,
11            onValueChange = { input = it },
12            placeholder = {
13                Text("Enter some text...")
14            }
15        )
16    }
17}

The cool thing about this is it accepts a Composable which makes it really flexible, so you could use a Row instead for example:

1@OptIn(ExperimentalMaterial3Api::class)
2@Composable
3fun SomethingScreen() {
4    var input by remember {
5        mutableStateOf("")
6    }
7
8    Column {
9        TextField(
10            value = input,
11            onValueChange = { input = it },
12            placeholder = {
13                Row {
14                    Text("Enter some text...")
15                    Text("More text!")
16                }
17            }
18        )
19    }
20}

By the way, you might want to adjust the color or the font size of your placeholder. Anyway that's the quick tip for the day. Stay tuned for more!