Day 13: Handling User Input in Jetpack Compose

✅ Introduction

In any real-world Android app, handling user input is critical—whether it’s capturing text, responding to clicks, or navigating based on user actions. With Jetpack Compose, this process becomes declarative, intuitive, and clean. In this post, we’ll explore how to handle text, button input, and gestures with.

📌 What You’ll Learn:

How to use TextField to capture user input
How to use Button to handle click events
Managing input state with remember and mutableStateOf
Validating user input in Compose
Best practices for clean input handling

🧩 Jetpack Compose Input Basics

Jetpack Compose simplifies UI by using composable functions. Input widgets like TextField, OutlinedTextField, and Button are core components in user interaction.

🔤 Example: TextField

@Composable
fun UserInputScreen() {
    var name by remember { mutableStateOf("") }

    Column(modifier = Modifier.padding(16.dp)) {
        Text(text = "Enter your name:")
        TextField(
            value = name,
            onValueChange = { name = it },
            label = { Text("Name") }
        )
        Spacer(modifier = Modifier.height(8.dp))
        Button(onClick = {
            Log.d("Input", "Hello, $name!")
        }) {
            Text("Submit")
        }
    }
}

Explanation:

TextField accepts a value and onValueChange.
remember and mutableStateOf keep track of the value locally.
Button handles click events and uses the name input.

🛡️ Validating Input in Jetpack Compose

You can easily add input validation before accepting the input:

if (name.isBlank()) {
    Text("Name cannot be empty", color = Color.Red)
}

Add this check before submitting to enforce rules like minimum length or format.

🧠 Best Practices

Always manage input state with remember or ViewModel for larger apps.
Avoid business logic inside composables—delegate to ViewModel.
Use keyboardOptions to guide user input type (e.g., numbers, emails).
Focus management can improve UX—use LocalFocusManager.

🔄 Compose Events & Reusability

Jetpack Compose also enables event-driven design through lambda callbacks. This makes it easier to build reusable input components.

@Composable
fun CustomInput(label: String, onSubmit: (String) -> Unit) {
    var text by remember { mutableStateOf("") }

    Column {
        OutlinedTextField(
            value = text,
            onValueChange = { text = it },
            label = { Text(label) }
        )
        Button(onClick = { onSubmit(text) }) {
            Text("Submit")
        }
    }
}

Use it like:

CustomInput(label = "Email") { email ->
    Log.d("Form", "User entered: $email")
}