Jetpack Compose: Disable Interaction with TextField

Question

Is there a way to disable all interaction for Jetpack Compose's TextField?

Answer 1

With 1.0.0-beta04 you can use the enabled attribute:

enabled : controls the enabled state of the TextField. When false, the text field will be neither editable nor focusable, the input of the text field will not be selectable, visually text field will appear in the disabled UI state

Something like:

var text by rememberSaveable { mutableStateOf("Text") }

TextField(
    value = text,
    onValueChange = { text = it },
    enabled = false,
    label = { Text("Label") },
    singleLine = true
)

Answer 2

My project is on alpha08 atm. Hopefully they add some built in way of doing this soon but in the meantime I've been doing this:

val textState = remember { mutableStateOf(TextFieldValue()) }
val disabled = remember { mutableStateOf(true) }
Box {
  TextField(value = textState.value, onValueChange = {
    textState.value = it
  })
  if (disabled.value) {
    // Set alpha(0f) to hide click animation
    Box(modifier = Modifier.matchParentSize().alpha(0f).clickable(onClick = {}))
  }
}

So yeah, drawing an invisible clickable Box that's the same size over the TextField. You can resize the TextField to whatever you'd want, calling .matchParentSize() on the invisible Box will make it match the TextField due to them being the only children in the parent Box.

You can toggle the disabled state by setting disabled.value = true/false wherever is appropriate.