Jetpack Compose Academy · Lesson

Labels, Placeholders & Leading Icons

Make inputs clear and friendly.

Make Inputs Friendly

A bare box leaves users guessing. Labels, placeholders, and icons turn a plain field into one that guides the user. 🧭

The label names the field. It sits inside when empty, then floats up to the border once the field is focused or filled.

OutlinedTextField(
    value = email,
    onValueChange = { email = it },
    label = { Text("Email") }
)