Building Forms in Jetpack Compose: TextField, Validation, and Submission
Forms are a cornerstone of mobile applications. Whether you're collecting user feedback, processing sign-ups, or handling user preferences, you need robust form components. Jetpack Compose, Google's modern declarative UI toolkit for Android, provides powerful tools to build interactive forms with minimal boilerplate. In this comprehensive guide, we'll explore how to construct production-ready forms using TextField, state hoisting, validation patterns, and more.
Why Forms Matter in Mobile
Users interact with forms daily—logging in, checking out, filling surveys, updating profiles. A well-designed form reduces friction, prevents errors early, and improves user satisfaction. Compose makes it easier than ever to build these forms while maintaining clean, testable code.
BasicTextField: The Foundation
The most basic form element is TextField. Let's start simple:
@Composable
fun SimpleLoginForm() {
var email by remember { mutableStateOf("") }
var password by remember { mutableStateOf("") }
Column(modifier = Modifier.padding(16.dp)) {
TextField(
value = email,
onValueChange = { email = it },
label = { Text("Email") },
modifier = Modifier.fillMaxWidth()
)
TextField(
value = password,
onValueChange = { password = it },
label = { Text("Password") },
visualTransformation = PasswordVisualTransformation(),
modifier = Modifier.fillMaxWidth()
)
Button(onClick = { /* handle login */ }) {
Text("Login")
}
}
}
This works, but mixing UI state with business logic isn't scalable. That's where OutlinedTextField and state hoisting come in.
OutlinedTextField: A More Polished Look
OutlinedTextField provides a Material Design outlined style, preferred in modern apps:
@Composable
fun ModernLoginForm() {
var email by remember { mutableStateOf("") }
var password by remember { mutableStateOf("") }
Column(modifier = Modifier.padding(16.dp)) {
OutlinedTextField(
value = email,
onValueChange = { email = it },
label = { Text("Email Address") },
modifier = Modifier.fillMaxWidth(),
keyboardOptions = KeyboardOptions(
keyboardType = KeyboardType.Email,
imeAction = ImeAction.Next
)
)
Spacer(modifier = Modifier.height(8.dp))
OutlinedTextField(
value = password,
onValueChange = { password = it },
label = { Text("Password") },
visualTransformation = PasswordVisualTransformation(),
modifier = Modifier.fillMaxWidth(),
keyboardOptions = KeyboardOptions(
keyboardType = KeyboardType.Password,
imeAction = ImeAction.Done
)
)
Spacer(modifier = Modifier.height(16.dp))
Button(
onClick = { /* validate and submit */ },
modifier = Modifier.fillMaxWidth()
) {
Text("Sign In")
}
}
}
State Hoisting: The Professional Approach
State hoisting is a pattern where you move state up the composition tree. This separates UI concerns from business logic:
data class LoginFormState(
val email: String = "",
val password: String = ""
)
@Composable
fun LoginFormScreen(
onSubmit: (email: String, password: String) -> Unit
) {
var formState by remember { mutableStateOf(LoginFormState()) }
LoginForm(
state = formState,
onEmailChange = { formState = formState.copy(email = it) },
onPasswordChange = { formState = formState.copy(password = it) },
onSubmit = { onSubmit(formState.email, formState.password) }
)
}
@Composable
fun LoginForm(
state: LoginFormState,
onEmailChange: (String) -> Unit,
onPasswordChange: (String) -> Unit,
onSubmit: () -> Unit
) {
Column(modifier = Modifier.padding(16.dp)) {
OutlinedTextField(
value = state.email,
onValueChange = onEmailChange,
label = { Text("Email") },
modifier = Modifier.fillMaxWidth()
)
OutlinedTextField(
value = state.password,
onValueChange = onPasswordChange,
label = { Text("Password") },
visualTransformation = PasswordVisualTransformation(),
modifier = Modifier.fillMaxWidth()
)
Button(onClick = onSubmit, modifier = Modifier.fillMaxWidth()) {
Text("Submit")
}
}
}
Input Validation Patterns
Validation prevents bad data before submission. Here's a comprehensive validation approach:
sealed class ValidationResult {
object Valid : ValidationResult()
data class Invalid(val errorMessage: String) : ValidationResult()
}
object FormValidator {
fun validateEmail(email: String): ValidationResult {
return if (email.contains("@") && email.contains(".")) {
ValidationResult.Valid
} else {
ValidationResult.Invalid("Invalid email format")
}
}
fun validatePassword(password: String): ValidationResult {
return when {
password.length < 8 -> ValidationResult.Invalid("Password must be 8+ characters")
!password.any { it.isUpperCase() } -> ValidationResult.Invalid("Password must contain uppercase")
!password.any { it.isDigit() } -> ValidationResult.Invalid("Password must contain numbers")
else -> ValidationResult.Valid
}
}
}
@Composable
fun ValidatedLoginForm(onSubmit: (String, String) -> Unit) {
var email by remember { mutableStateOf("") }
var password by remember { mutableStateOf("") }
var emailError by remember { mutableStateOf<String?>(null) }
var passwordError by remember { mutableStateOf<String?>(null) }
Column(modifier = Modifier.padding(16.dp)) {
OutlinedTextField(
value = email,
onValueChange = {
email = it
val result = FormValidator.validateEmail(it)
emailError = if (result is ValidationResult.Invalid) result.errorMessage else null
},
label = { Text("Email") },
isError = emailError != null,
modifier = Modifier.fillMaxWidth()
)
if (emailError != null) {
Text(emailError!!, color = Color.Red, fontSize = 12.sp)
}
Spacer(modifier = Modifier.height(8.dp))
OutlinedTextField(
value = password,
onValueChange = {
password = it
val result = FormValidator.validatePassword(it)
passwordError = if (result is ValidationResult.Invalid) result.errorMessage else null
},
label = { Text("Password") },
visualTransformation = PasswordVisualTransformation(),
isError = passwordError != null,
modifier = Modifier.fillMaxWidth()
)
if (passwordError != null) {
Text(passwordError!!, color = Color.Red, fontSize = 12.sp)
}
Spacer(modifier = Modifier.height(16.dp))
Button(
onClick = { onSubmit(email, password) },
enabled = emailError == null && passwordError == null && email.isNotEmpty() && password.isNotEmpty(),
modifier = Modifier.fillMaxWidth()
) {
Text("Login")
}
}
}
DropdownMenu for Selections
Many forms include dropdown selections. Here's a clean implementation:
@Composable
fun CountrySelectionForm() {
var selectedCountry by remember { mutableStateOf("United States") }
var expanded by remember { mutableStateOf(false) }
val countries = listOf("United States", "Canada", "Mexico", "United Kingdom", "Germany")
Column(modifier = Modifier.padding(16.dp)) {
OutlinedTextField(
value = selectedCountry,
onValueChange = {},
label = { Text("Country") },
readOnly = true,
modifier = Modifier.fillMaxWidth(),
trailingIcon = {
Icon(
imageVector = if (expanded) Icons.Filled.KeyboardArrowUp else Icons.Filled.KeyboardArrowDown,
contentDescription = null,
modifier = Modifier.clickable { expanded = !expanded }
)
}
)
DropdownMenu(
expanded = expanded,
onDismissRequest = { expanded = false },
modifier = Modifier.fillMaxWidth(0.9f)
) {
countries.forEach { country ->
DropdownMenuItem(
text = { Text(country) },
onClick = {
selectedCountry = country
expanded = false
}
)
}
}
}
}
DatePicker Integration
Date selection is common in forms like birthday, appointment, or event scheduling:
@Composable
fun DatePickerForm() {
var selectedDate by remember { mutableStateOf<Long?>(null) }
var showDatePicker by remember { mutableStateOf(false) }
val dateFormat = SimpleDateFormat("MM/dd/yyyy", Locale.US)
val displayText = selectedDate?.let { dateFormat.format(Date(it)) } ?: "Select Date"
Column(modifier = Modifier.padding(16.dp)) {
OutlinedTextField(
value = displayText,
onValueChange = {},
label = { Text("Event Date") },
readOnly = true,
modifier = Modifier
.fillMaxWidth()
.clickable { showDatePicker = true }
)
if (showDatePicker) {
DatePickerDialog(
onDateSelected = {
selectedDate = it
showDatePicker = false
},
onDismiss = { showDatePicker = false }
)
}
}
}
@Composable
fun DatePickerDialog(
onDateSelected: (Long) -> Unit,
onDismiss: () -> Unit
) {
val datePickerState = rememberDatePickerState()
DatePickerDialog(
onDismissRequest = onDismiss,
confirmButton = {
TextButton(onClick = {
datePickerState.selectedDateMillis?.let { onDateSelected(it) }
}) {
Text("OK")
}
},
dismissButton = {
TextButton(onClick = onDismiss) {
Text("Cancel")
}
}
) {
DatePicker(state = datePickerState)
}
}
Form Submission with ViewModel
For production apps, handle form logic in a ViewModel:
class LoginViewModel : ViewModel() {
private val _formState = MutableStateFlow(LoginFormState())
val formState: StateFlow<LoginFormState> = _formState.asStateFlow()
private val _submitEvent = MutableSharedFlow<Result<Unit>>()
val submitEvent: SharedFlow<Result<Unit>> = _submitEvent.asSharedFlow()
fun updateEmail(email: String) {
_formState.update { it.copy(email = email) }
}
fun updatePassword(password: String) {
_formState.update { it.copy(password = password) }
}
fun submitForm() {
viewModelScope.launch {
val state = _formState.value
val emailValidation = FormValidator.validateEmail(state.email)
val passwordValidation = FormValidator.validatePassword(state.password)
if (emailValidation is ValidationResult.Valid && passwordValidation is ValidationResult.Valid) {
try {
// Make API call or database operation
_submitEvent.emit(Result.success(Unit))
} catch (e: Exception) {
_submitEvent.emit(Result.failure(e))
}
}
}
}
}
@Composable
fun LoginScreen(viewModel: LoginViewModel = viewModel()) {
val formState by viewModel.formState.collectAsState()
val context = LocalContext.current
LaunchedEffect(Unit) {
viewModel.submitEvent.collect { result ->
result.onSuccess {
Toast.makeText(context, "Login successful!", Toast.LENGTH_SHORT).show()
}
result.onFailure {
Toast.makeText(context, "Login failed: ${it.message}", Toast.LENGTH_SHORT).show()
}
}
}
Column(modifier = Modifier.padding(16.dp)) {
OutlinedTextField(
value = formState.email,
onValueChange = viewModel::updateEmail,
label = { Text("Email") },
modifier = Modifier.fillMaxWidth()
)
OutlinedTextField(
value = formState.password,
onValueChange = viewModel::updatePassword,
label = { Text("Password") },
visualTransformation = PasswordVisualTransformation(),
modifier = Modifier.fillMaxWidth()
)
Button(onClick = viewModel::submitForm, modifier = Modifier.fillMaxWidth()) {
Text("Login")
}
}
}
Best Practices Summary
Use OutlinedTextField for modern Material Design
Hoist state to separate concerns
Validate early and show errors immediately
Use ViewModel for complex forms
Respect keyboard options (email, password types)
Disable submit button when form is invalid
Test validation logic thoroughly
Accessibility matters—use proper labels and error announcements
Conclusion
Jetpack Compose makes form building intuitive and flexible. By combining TextField, state hoisting, validation patterns, and ViewModel architecture, you can create robust, user-friendly forms that scale with your application's complexity. The declarative approach reduces boilerplate and makes your code more maintainable.
My 8 templates include various form patterns. https://myougatheax.gumroad.com
SOCIAL SHARE CARD GENERATOR