How to Limit TextField Characters in Android Jetpack Compose

Setting a character limit on a TextField is essential in various Android app use-cases. It can help maintain the user experience by preventing excessive text input. In this updated tutorial, you’ll learn how to set a maximum character limit for a TextField in Android Jetpack Compose.

The Challenge with TextField Character Limit

Unlike some other Android components, Jetpack Compose’s TextField doesn’t have a built-in property to set the character limit. However, you can still limit the input characters with a simple logic tweak.

Use OnValueChange for Limiting Characters

You can set a condition within the onValueChange parameter to limit the characters. Below is a code snippet to demonstrate this:

@Composable
fun TextFieldExample() {
    var textInput by remember { mutableStateOf("")}
    val maxLength = 8
    TextField(value = textInput,
        onValueChange = {
            if (it.length <= maxLength)
                textInput = it },
            placeholder = { Text("Sample Text") },
            keyboardOptions = KeyboardOptions(autoCorrect = true),
            modifier = Modifier.fillMaxWidth()
                        .padding(10.dp))
}

In this example, maxLength is set to 8. The text will update only if its length is less than or equal to 8.

Complete Code Example

Here’s the complete code, which includes the main activity setup.

package com.codingwithrashid.myapplication

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.text.KeyboardOptions
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.material3.TextField
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import com.codingwithrashid.myapplication.ui.theme.MyApplicationTheme

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            MyApplicationTheme {
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colorScheme.background
                ) {
                    Column {
                        TextFieldExample()
                    }
                }
            }
        }
    }
}

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun TextFieldExample() {
    var textInput by remember { mutableStateOf("")}
    val maxLength = 8
    TextField(value = textInput,
        onValueChange = {
            if (it.length <= maxLength)
                textInput = it },
            placeholder = { Text("Sample Text") },
            keyboardOptions = KeyboardOptions(autoCorrect = true),
            modifier = Modifier.fillMaxWidth()
                        .padding(10.dp))
}

By following this example, you can easily set a maximum character limit for any TextField in your Jetpack Compose application.

Setting a maximum character limit for a TextField in Jetpack Compose can be achieved with a simple modification in the onValueChange parameter. This will enhance your app’s user experience by preventing unwanted long text inputs.