How to make TextField unclickable/unfocusable?

Question

I have a simple OutlinedTextField with a label and text. By the design, it should not be focused and/or typeable. On the click event, the app should open a "picker" dialog and on a pick, the value of TextField should be updated.

So, as a result, the TextField, shouldn't:

be focusable
open keyboard
accept text insertion or input It should:
be clickable

As a backup option, I tried to make a simple Text look like an OutlinedTextField I think it is more difficult to make it look the same as OutlinedTextField.

Any suggestions?

Gabriele Mariotti · Accepted Answer · 2021-08-11T16:51:43.717

4

Add enabled = false to the OutlinedTextField

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

OutlinedTextField(
    value = text,
    onValueChange = {
        text = it
    },
    enabled = false
)

If you want to set custom colors for the disabled state just add:

    colors =  TextFieldDefaults.outlinedTextFieldColors(
        disabledTextColor = LocalContentColor.current.copy(LocalContentAlpha.current),
        disabledBorderColor =  MaterialTheme.colors.onSurface.copy(alpha = ContentAlpha.disabled),
        disabledLabelColor = MaterialTheme.colors.onSurface.copy(ContentAlpha.medium)
    )

edited Aug 11 '21 at 16:51

answered Aug 11 '21 at 16:44

Gabriele Mariotti

320,139
94
887
841

In this case, it will look like disabled text? grey out? I don't want that – Demigod Aug 11 '21 at 16:45
@Demigod just use the `colors` attribute to set your favorite colors – Gabriele Mariotti Aug 11 '21 at 16:46
can you please advise how to change colors for material3? There are some changes... – Demigod May 30 '23 at 13:16

score 0 · Answer 2 · answered Aug 18 '23 at 03:34

For Material 3 it could be like this:

colors = OutlinedTextFieldDefaults.colors(
        disabledBorderColor = Color.LightGray,
        disabledTextColor = Color.LightGray,
        disabledLabelColor = Color.Gray,
        unfocusedBorderColor = Color.Gray,
        focusedBorderColor = Color.Black,
    )

How to make TextField unclickable/unfocusable?

2 Answers2