How to Capitalize TextField in Android Jetpack Compose

By Mohammed Rashid •  November 22nd, 2022 • 

TextField is an integral UI component of a mobile app. Sometimes, you may want to restrict users to enter input data in capital letters. Let’s check how to capitalize TextField in this Jetpack Compose tutorial.

TextField composable provides a parameter named keyboardOptions where KeyboardOptions class can be used. You can control capitalization using KeyboardOptions. With KeyboardCapitalization you can capitalize characters, words, sentences, etc.

@Composable
fun TextFieldExample() {
var value by remember { mutableStateOf("") }
TextField(
    value = value,
    singleLine = true,
    onValueChange = {
        value = it
    },
    label = { Text("Enter text") },
    keyboardOptions = KeyboardOptions(capitalization = KeyboardCapitalization.Characters),
    modifier = Modifier.padding(20.dp)
)
}

Now, the keyboard shows only capital letters. See the output given below.

textfield all caps jetpack compose
Following is the complete code for reference.
package com.example.myapplication

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.text.KeyboardOptions
import androidx.compose.material.*
import androidx.compose.runtime.*
import androidx.compose.ui.Modifier
import androidx.compose.ui.text.input.KeyboardCapitalization
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.example.myapplication.ui.theme.MyApplicationTheme

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

@Composable
fun TextFieldExample() {
var value by remember { mutableStateOf("") }
TextField(
    value = value,
    singleLine = true,
    onValueChange = {
        value = it
    },
    label = { Text("Enter text") },
    keyboardOptions = KeyboardOptions(capitalization = KeyboardCapitalization.Characters),
    modifier = Modifier.padding(20.dp)
)
}


@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
MyApplicationTheme {
    TextFieldExample()
}
}

I hope this tutorial to capitalize TextField with keyboard is helpful for you.

Mohammed Rashid

Keep Reading