Jetpack Compose: Disable Interaction with TextField

Question

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

It's a known feature request currently: https://issuetracker.google.com/issues/166478534 — Saurabh Thorat, Dec 09 '20 at 14:31
this could help: https://stackoverflow.com/a/65699135/8362967 — LEGEND MORTAL, Apr 05 '21 at 22:54

Gabriele Mariotti · Accepted Answer · 2022-11-18T05:47:13.783

19

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
)

edited Nov 18 '22 at 05:47

answered Mar 21 '21 at 08:09

Gabriele Mariotti

320,139
94
887
841

1

`enabled ` will not act on `disabledTextColor`, is there a way to solve it? – gaohomway Feb 25 '22 at 05:04
Do you know some way to make TextField editable and focusable but not selectable? – tasjapr Nov 17 '22 at 23:49
To make text non-selectable, wrap the components within `DisableSelection { ... }` – simpleuser Apr 12 '23 at 21:41

score 8 · Answer 2 · answered Dec 18 '20 at 17:27

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.

score 2 · Answer 3 · answered Oct 12 '22 at 08:46

readOnly attribute can also work in case if you want focusable & selectable text field but not editable.

Like this:

   var value by remember { mutableStateOf("Hello World!") }

    TextField(
        value = value,
        onValueChange = { value = it },
        readOnly = true,
    )

Jetpack Compose: Disable Interaction with TextField

3 Answers3

Linked