Jetpack compose: Add drawable to start of TextField

Question

In the code shown below, I have a TextField that accepts user input. How do I add a drawable to the start or end of the TextField? I can't find any attribute for setting drawableStart or drawableEnd.

var text by rememberSaveable{ mutableStateOf("") }

TextField(
    value = text,
    modifier = Modifier
        .fillMaxWidth(1f)
        .padding(30.dp),
    onValueChange = { text = it },
    placeholder = { Text(text = "Email") },
    keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Email)
)

Does this answer your question? [drawableStart equivalent in TextField of Jetpack compose](https://stackoverflow.com/questions/67182717/drawablestart-equivalent-in-textfield-of-jetpack-compose) — Gabriele Mariotti, Jun 06 '21 at 12:04

score 5 · Accepted Answer · answered Jun 06 '21 at 00:42

There is a leadingIcon and trailingIcon attribute in the TextField documentation. Use leadingIcon in place of drawableStart and trailingIcon in place of drawableEnd. Find below a sample implementation:

var text by rememberSaveable{ mutableStateOf("") }

TextField(
    value = text,
    modifier = Modifier
        .fillMaxWidth(1f)
        .padding(30.dp),
    onValueChange = { text = it },
    placeholder = { Text(text = "Email") },
    keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Email),
    leadingIcon = { Icon(Icons.Filled.Favorite, contentDescription = "Localized description") },
    trailingIcon = { Icon(Icons.Filled.Info, contentDescription = "Localized description") }
)

Jetpack compose: Add drawable to start of TextField

1 Answers1