Text Field

Filled, outlined, error, password, search, and multi-line entry

Text fields let people enter and edit text. Material 3 offers filled and outlined styles with labels, placeholders, supporting text, error states, leading and trailing icons, keyboard options, and visual transformations.

View source Material docs All components

Text Field demos rendered in Compose Playground — Pixel-accurate preview · light theme

5 examples Filled Error & validation Password Search Multi-line

Filled

A filled field with label, placeholder, and a Clear action when filled.

var text by rememberSaveable { mutableStateOf("") }
TextField(
    value = text,
    onValueChange = { text = it },
    label = { Text("Name") },
    placeholder = { Text("Enter your name") },
    singleLine = true,
    trailingIcon = {
        if (text.isNotEmpty()) {
            IconButton(onClick = { text = "" }) {
                Icon(Icons.Filled.Clear, "Clear")
            }
        }
    }
)

Error & validation

An outlined field that flags an invalid email via isError and supportingText.

var email by rememberSaveable { mutableStateOf("") }
val isError = email.isNotEmpty() && !email.contains("@")
OutlinedTextField(
    value = email,
    onValueChange = { email = it },
    label = { Text("Email") },
    isError = isError,
    supportingText = {
        Text(if (isError) "Must contain @" else "We'll never share it")
    },
    keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Email),
    singleLine = true
)

Password

Toggle a visual transformation to show or hide the entry.

var password by rememberSaveable { mutableStateOf("") }
var visible by rememberSaveable { mutableStateOf(false) }
OutlinedTextField(
    value = password,
    onValueChange = { password = it },
    label = { Text("Password") },
    singleLine = true,
    visualTransformation = if (visible) {
        VisualTransformation.None
    } else {
        PasswordVisualTransformation()
    },
    keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Password),
    trailingIcon = {
        IconButton(onClick = { visible = !visible }) {
            Icon(
                if (visible) Icons.Filled.VisibilityOff else Icons.Filled.Visibility,
                if (visible) "Hide password" else "Show password"
            )
        }
    }
)

Search

A leading Search icon hints at the field's purpose.

var query by rememberSaveable { mutableStateOf("") }
OutlinedTextField(
    value = query,
    onValueChange = { query = it },
    label = { Text("Search") },
    leadingIcon = { Icon(Icons.Filled.Search, null) },
    singleLine = true
)

Multi-line

Set minLines to reserve room for several lines of input.

var notes by rememberSaveable { mutableStateOf("") }
OutlinedTextField(
    value = notes,
    onValueChange = { notes = it },
    label = { Text("Notes") },
    minLines = 3
)

Examples

Related components