How to suffix text to OutlinedTextField

Question

Hello I have a OutlinedTextField, and I want to add text to end of it so it is always there.

   OutlinedTextField(
                    value = screenState.batterySize.toString(),
                    onValueChange = onBatterySizeChange,
                    keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Number),
                    textStyle = MaterialTheme.typography.subtitle1.copy(
                        color = MaterialTheme.colors.primary,
                        textAlign = TextAlign.Center
                    )
                )

I tried Suffix but that did not work.

lets if the user types 200, km should be there always, so should look "200 km"

any suggestions on how I can achieve that please thank you R

EDIT

how I tried to add suffix when I added suffix like this:

  OutlinedTextField(
                value = screenState.batterySize.toString(),
                onValueChange = onBatterySizeChange,
                suffix = Text(text = "test"),
                keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Number),
                textStyle = MaterialTheme.typography.subtitle1.copy(
                    color = MaterialTheme.colors.primary,
                    textAlign = TextAlign.Center
                )
            )

I get this error:

None of the following functions can be called with the arguments supplied.
OutlinedTextField(TextFieldValue, (TextFieldValue) → Unit, Modifier = ..., Boolean = ..., Boolean = ..., TextStyle = ..., (() → Unit)? = ..., (() → Unit)? = ..., (() → Unit)? = ..., (() → Unit)? = ..., Boolean = ..., VisualTransformation = ..., KeyboardOptions = ..., KeyboardActions = ..., Boolean = ..., Int = ..., MutableInteractionSource = ..., Shape = ..., TextFieldColors = ...) defined in androidx.compose.material
OutlinedTextField(String, (String) → Unit, Modifier = ..., Boolean = ..., Boolean = ..., TextStyle = ..., (() → Unit)? = ..., (() → Unit)? = ..., (() → Unit)? = ..., (() → Unit)? = ..., Boolean = ..., VisualTransformation = ..., KeyboardOptions = ..., KeyboardActions = ..., Boolean = ..., Int = ..., MutableInteractionSource = ..., Shape = ..., TextFieldColors = ...) defined in androidx.compose.material

This might be helpful - [how-to-add-uneditable-postfix-suffix-to-textfield-in-jetpack-compose](https://stackoverflow.com/questions/74543500/how-to-add-uneditable-postfix-suffix-to-textfield-in-jetpack-compose) — Nitish, Jun 01 '23 at 07:42
Make sure you are using material 3, version 1.1.0 or above. And `suffix` takes a Composable, not a String. — Ricky Mo, Jun 01 '23 at 08:22
@RickyMo I tried `suffix = Text(text = "test")` as well but same error, I am using material 2, is that an issue, — BRDroid, Jun 01 '23 at 12:22
@BRDroid material 2 doesn't have the `suffix` parameter. See the post in the first comment. — Ricky Mo, Jun 01 '23 at 15:57

score -1 · Answer 1 · answered Jun 01 '23 at 08:27

you can use a combination of OutlinedTextField and a separate Text component.

Row(
    modifier = Modifier.padding(16.dp),
    verticalAlignment = Alignment.CenterVertically
) {
    var textFieldValue by remember { mutableStateOf("") }
    
    OutlinedTextField(
        value = textFieldValue,
        onValueChange = { textFieldValue = it },
        keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Number),
        textStyle = MaterialTheme.typography.subtitle1.copy(
            color = MaterialTheme.colors.primary,
            textAlign = TextAlign.Center
        ),
        modifier = Modifier.weight(1f)
    )
    
    Text(
        text = "km",
        style = MaterialTheme.typography.subtitle1,
        modifier = Modifier.padding(start = 8.dp)
    )
}

we use a Row layout to place the OutlinedTextField and Text components side by side. The OutlinedTextField is assigned a value and an onValueChange callback to manage the input text. The Text component is used to display the constant "km" text. By adjusting the Modifier.padding and other styling attributes, you can further customize the appearance of the components to fit your needs.

Why you should use a Text outside the OutlinedTextField instead of using the suffix attribure? — Gabriele Mariotti, Jun 01 '23 at 08:38

How to suffix text to OutlinedTextField

EDIT

1 Answers1