Building Forms in Jetpack Compose: TextField, Validation, and Submission

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

1. Use OutlinedTextField for modern Material Design
2. Hoist state to separate concerns
3. Validate early and show errors immediately
4. Use ViewModel for complex forms
5. Respect keyboard options (email, password types)
6. Disable submit button when form is invalid
7. Test validation logic thoroughly
8. 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