TextField()

What's TextField?

TextField is a user interface control that is used to allow the user to enter the text. This widget is used to get the data from the user as numbers or text.

A simple example of TextField is Login page.

We get the username and password using TextField widget.

❗

If you are an Android developer, "It's EditText"

What are options available in TextField?

Following arguments available in TextField function:


@Composable
fun TextField(
    value: TextFieldValue,
    onValueChange: (TextFieldValue) -> Unit,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    readOnly: Boolean = false,
    textStyle: TextStyle = LocalTextStyle.current,
    label: @Composable (() -> Unit)? = null,
    placeholder: @Composable (() -> Unit)? = null,
    leadingIcon: @Composable (() -> Unit)? = null,
    trailingIcon: @Composable (() -> Unit)? = null,
    isError: Boolean = false,
    visualTransformation: VisualTransformation = VisualTransformation.None,
    keyboardOptions: KeyboardOptions = KeyboardOptions.Default,
    keyboardActions: KeyboardActions = KeyboardActions(),
    singleLine: Boolean = false,
    maxLines: Int = Int.MAX_VALUE,
    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
    shape: Shape =
        MaterialTheme.shapes.small.copy(bottomEnd = ZeroCornerSize, bottomStart = ZeroCornerSize),
    colors: TextFieldColors = TextFieldDefaults.textFieldColors()
)

1. Simple TextField


@Composable
fun SimpleTextField() {
    var text by remember { mutableStateOf(TextFieldValue("")) }    TextField(
        value = text,
        onValueChange = { newText ->
            text = newText
        }
    )
}

In this example, we created a variable text, it's mutableState TextFieldValue. mutableState - It return an observable value for Compose. If value changed UI get changed automatically. TextFieldValue - A class holding information about the editing state.

In TextField() function we use two arguments, value & onValueChange. value - We need to set the TextFieldValue. We created a variable (text) for this. And we assigned text to this argument.

onValueChange - It will return new value (TextFieldValue) when user enter the text.

We assign the newText to text, then only user entered text will set into TextField.

Output:

It creates a simple text box. But it doesn't have any labels. UI is also not so good.

We will see other options to improve this.

2. Label and PlaceHolder


@Composable
fun LabelAndPlaceHolder() {
    var text by remember { mutableStateOf(TextFieldValue("")) }  
    
      TextField(
        value = text,
        onValueChange = {text = it},
        label = { Text(text = "Your Label") },
        placeholder = { Text(text = "Your Placeholder/Hint") },
    )
}

label - If the textfield has focus then label will be floated to the top of the TextField. placeholder - It displays descriptive text within the box when TextField is empty.

Output:

3. Keyboard Options


@Composable
fun TextFieldWithInputType() {
    var text by remember { mutableStateOf(TextFieldValue("")) }    
    
    TextField(
        value = text,
        label = { Text(text = "Number Input Type") },
        keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Number),
        onValueChange = { it -> text = it}
        )
}

To get the number input from TextField , use keyboardOptions. We use number keyboard type. So it accepts only number input from the user.

Following Keyboard Types available in Compose:

KeyboardType.Text

KeyboardType.Ascii

KeyboardType.Number

KeyboardType.Phone

KeyboardType.Uri

KeyboardType.Email

KeyboardType.Password

KeyboardType.NumberPassword

4. OutLined TextField


@Composable
fun OutLineTextFieldSample() {
    var text by remember { mutableStateOf(TextFieldValue("")) }    
    
    OutlinedTextField(
        value = text,
        label = { Text(text = "Enter Your Name") },
        onValueChange = {text = it}
    )
}

It's jetpack material component. Instead of TextField() function we use OutlinedTextField().

It will create a beautiful outline border for your TextField. Just compare our first output with this, you will see a lot of enhancements.

Output:

5. TextField with Icons


@Composable
fun TextFieldWithIcons() {
    var text by remember { mutableStateOf(TextFieldValue("")) }    
    
    return OutlinedTextField(
        value = text,
        leadingIcon = { Icon(imageVector = Icons.Default.Email, contentDescription = "emailIcon") },
        //trailingIcon = { Icon(imageVector = Icons.Default.Add, contentDescription = null) },
        onValueChange = { text = it },
        label = { Text(text = "Email address") },
        placeholder = { Text(text = "Enter your e-mail") },
    )
}

leadingIcon - It will add an icon in the starting area

trailingIcon - It will add an icon in the ending area

Output: