Buttons and User Input
User input is how an app listens rather than merely speaks. In Jetpack Compose, interactive elements such as Button, IconButton, TextField, Checkbox, and Switch are composables that accept a lambda callback — usually onClick or onValueChange — which fires when the user interacts with the widget. Unlike the imperative View system where you attach a listener to a reference obtained via findViewById, Compose wires the callback directly into the function call, and the composable itself is stateless: it renders based on parameters you pass in and reports events back out. This callback-driven, parameter-in/event-out shape is the foundation of every interactive screen you will build.
Cricket analogy: A bowler doesn't act alone; the umpire signals wide or no-ball back to him, just as Compose's onClick lambda reports the tap back to the app instead of the button deciding anything itself.
The Button Composable and Its Variants
Button is the most common clickable composable. It takes an onClick lambda as a required parameter and a content lambda (usually a Text) as its trailing lambda. Compose also ships OutlinedButton, TextButton, ElevatedButton, and FilledTonalButton, which share the same API but differ in Material 3 styling. All of them expose an enabled parameter that, when false, both disables the click ripple and greys out the content automatically — you do not need to manage that visual state yourself.
Cricket analogy: Just as a batter's finishing role varies across ODIs, T20s, and Tests while sharing the same core technique, Compose's Button, OutlinedButton, TextButton, and ElevatedButton share one onClick API but differ in Material 3 styling.
@Composable
fun SubmitOrderButton(
isLoading: Boolean,
canSubmit: Boolean,
onSubmit: () -> Unit
) {
Button(
onClick = onSubmit,
enabled = canSubmit && !isLoading,
modifier = Modifier.fillMaxWidth()
) {
if (isLoading) {
CircularProgressIndicator(
modifier = Modifier.size(18.dp),
strokeWidth = 2.dp,
color = MaterialTheme.colorScheme.onPrimary
)
} else {
Text("Place Order")
}
}
}TextField and Capturing Typed Input
TextField (and its Material 3 sibling OutlinedTextField) is a controlled component: it does not hold its own text internally in a way you can forget about. You must supply the current value and an onValueChange callback that updates that value, typically backed by a remember { mutableStateOf("") } or a ViewModel-held StateFlow. Forgetting to update the backing state inside onValueChange results in a field that visually refuses to accept keystrokes, because Compose re-renders the TextField with the same unchanged value on every keystroke.
Cricket analogy: A scoreboard operator must manually update the total after every ball; forget it and the board keeps showing the old score, just like a TextField that ignores keystrokes if onValueChange never updates the backing state.
@Composable
fun EmailInputField() {
var email by remember { mutableStateOf("") }
OutlinedTextField(
value = email,
onValueChange = { newValue -> email = newValue },
label = { Text("Email address") },
singleLine = true,
keyboardOptions = KeyboardOptions(
keyboardType = KeyboardType.Email,
imeAction = ImeAction.Done
),
modifier = Modifier.fillMaxWidth()
)
}Gesture Modifiers Beyond Simple Clicks
Not every interaction fits neatly into a pre-built composable. The Modifier.clickable modifier turns any composable — a Box, a Row, an Image — into a clickable target, complete with a ripple indication and accessibility semantics for free. For richer gestures, pointerInput with detectTapGestures, detectDragGestures, or detectTransformGestures gives you raw access to press, long-press, double-tap, drag, and pinch events, which is how custom sliders, swipe-to-dismiss rows, and drawing canvases are built.
Cricket analogy: A fielder anywhere on the boundary can still take a catch without a designated 'catcher' role, just as Modifier.clickable turns any composable — a Box or Image — into a tappable target with ripple and accessibility built in.
Think of clickable as a 'gesture recognizer for free' modifier: adding it to any Box or Row instantly gives that composable a ripple animation, a semantics role of Button, and keyboard/D-pad focus support — three things you would otherwise implement by hand.
A common pitfall is nesting a clickable Row inside another clickable composable (for example a clickable list item that also contains a Button). Compose does not automatically prevent the inner click from also triggering the outer one; you need to stop propagation deliberately, often by giving the inner element its own clickable with a no-op indication or by restructuring the layout so click targets do not overlap.
- Interactive composables like Button and TextField are stateless — they render from parameters and emit events via callbacks such as onClick and onValueChange.
- TextField is a controlled component: you must feed back the new value from onValueChange or the field appears frozen.
- Button's enabled parameter automatically handles disabled styling and disables the click ripple.
- Modifier.clickable adds ripple, accessibility semantics, and focus support to any composable in one line.
- pointerInput with detectTapGestures/detectDragGestures gives low-level access for custom gestures beyond simple taps.
- Overlapping clickable regions can both fire on a single tap unless you explicitly design around it.
Practice what you learned
1. Why does a TextField appear to stop accepting keystrokes if you don't handle onValueChange correctly?
2. What does adding Modifier.clickable to a Box provide automatically?
3. What happens when you set enabled = false on a Button?
4. Which API would you use to detect a custom drag gesture that Button or clickable does not support?
5. What risk exists when a clickable Row contains a nested clickable Button?
Was this page helpful?
You May Also Like
State and remember
Understand how Compose tracks mutable values across recompositions using the remember function, and why state that isn't remembered gets lost.
State Hoisting
Learn the Compose pattern of moving state up to a caller so composables become stateless, reusable, and easier to test.
mutableStateOf and Recomposition
Dive into how mutableStateOf creates observable state that triggers recomposition, and how Compose determines which composables need to redraw.
Modifiers in Compose
Modifiers are immutable, chainable objects that decorate or configure a composable's layout, appearance, and behavior — Compose's answer to layout params, styling, and gesture handling.