JetpackTextFiled
A Jetpack Compose text field with customizable appearance and optional error message display.
This component automatically handles:
Error state: Red border and error message display when errorMessage is not null
Animated error: Error message appears/disappears with animation
Rounded shape: Uses 50% rounded corners for a pill-shaped appearance
Usage example:
var email by remember { mutableStateOf("") }
var emailError by remember { mutableStateOf<String?>(null) }
JetpackTextFiled(
value = email,
onValueChange = { email = it },
label = { Text("Email") },
leadingIcon = { Icon(Icons.Default.Email, contentDescription = null) },
keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Email),
errorMessage = emailError,
modifier = Modifier.fillMaxWidth(),
)See also:
JetpackPasswordFiled for password input with visibility toggle
Use with TextFieldData for integrated state management
Parameters
The current text value of the text field.
The callback invoked when the text value changes.
A composable function that represents the label of the text field.
A composable function that represents the leading icon of the text field.
The modifier for this text field.
The keyboard options for the text field (e.g., email, number).
A composable function that represents the trailing icon of the text field.
The error message to display below the text field. Shows red border when not null.