Forms

val focusManager = LocalFocusManager.current
LazyColumn(modifier = Modifier.widthIn(max = 480.dp), verticalArrangement = Arrangement.spacedBy(12.dp), contentPadding = PaddingValues(vertical = 24.dp)) {
    item {
        Column(modifier = Modifier.fillMaxWidth(), horizontalAlignment = Alignment.CenterHorizontally, verticalArrangement = Arrangement.spacedBy(12.dp)) {
            Surface(onClick = { /* TODO */ }, color = MaterialTheme.colorScheme.surfaceVariant, shape = CircleShape) {
                Box(modifier = Modifier.size(96.dp), contentAlignment = Alignment.Center) {
                    Icon(imageVector = Icons.Outlined.CameraAlt, contentDescription = null, tint = MaterialTheme.colorScheme.onSurfaceVariant)
                }
            }
            Text("Add photo")
        }
    }
    item {
        var imageUrl = remember { mutableStateOf<String?>(null) }
        Box(Modifier.fillMaxWidth()) {
            AsyncImage(model = imageUrl, contentDescription = null)
        }
    }
    item {
        var text by remember { mutableStateOf("") }
        TextField(modifier = Modifier.fillMaxWidth().padding(horizontal = 16.dp), label = { Text("First name") }, value = text, onValueChange = { text = it }, singleLine = true, trailingIcon = {
            AnimatedVisibility(visible = text.isNotBlank(), enter = fadeIn(), exit = fadeOut()) {
                IconButton(onClick = { text = "" }) {
                    Icon(Icons.Outlined.Cancel, "Clear")
                }
            }
        }, keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Text, imeAction = ImeAction.Next, capitalization = KeyboardCapitalization.Words), keyboardActions = KeyboardActions {
            focusManager.moveFocus(FocusDirection.Next)
        })

    }
    item {
        var text by remember { mutableStateOf("") }
        TextField(modifier = Modifier.fillMaxWidth().padding(horizontal = 16.dp), label = { Text("Last name") }, value = text, onValueChange = { text = it }, singleLine = true, trailingIcon = {
            AnimatedVisibility(visible = text.isNotBlank(), enter = fadeIn(), exit = fadeOut()) {
                IconButton(onClick = { text = "" }) {
                    Icon(Icons.Outlined.Cancel, "Clear")
                }
            }
        }, keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Text, imeAction = ImeAction.Next, capitalization = KeyboardCapitalization.Words), keyboardActions = KeyboardActions {
            focusManager.moveFocus(FocusDirection.Next)
        })
    }
    item { Spacer(Modifier.height(4.dp)) }
    item {
        var text by remember { mutableStateOf("") }
        TextField(
            modifier = Modifier.fillMaxWidth().padding(horizontal = 16.dp),
            label = { Text("Phone number") },
            value = text,
            onValueChange = { text = it },
            trailingIcon = {
                AnimatedVisibility(visible = text.isNotBlank(), enter = fadeIn(), exit = fadeOut()) {
                    IconButton(onClick = { text = "" }) {
                        Icon(Icons.Outlined.Cancel, "Clear")
                    }
                }
            },
            keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Phone, imeAction = ImeAction.Next),
            keyboardActions = KeyboardActions {
                focusManager.moveFocus(FocusDirection.Next)
            },
            singleLine = true,
        )
    }
    item { Spacer(Modifier.height(4.dp)) }
    item {
        var text by remember { mutableStateOf("") }
        TextField(
            modifier = Modifier.fillMaxWidth().padding(horizontal = 16.dp),
            label = { Text("Email") },
            value = text,
            onValueChange = { text = it },
            trailingIcon = {
                AnimatedVisibility(visible = text.isNotBlank(), enter = fadeIn(), exit = fadeOut()) {
                    IconButton(onClick = { text = "" }) {
                        Icon(Icons.Outlined.Cancel, "Clear")
                    }
                }
            },
            keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Email, imeAction = ImeAction.Done),
            keyboardActions = KeyboardActions {
                focusManager.clearFocus()
            },
            singleLine = true,
        )
    }
    item { Spacer(Modifier.height(4.dp)) }
    item {
        var text by remember { mutableStateOf("") }
        TextField(
            modifier = Modifier.fillMaxWidth().padding(horizontal = 16.dp),
            value = text,
            onValueChange = {
                text = it
            },
            label = { Text("Country") },
            trailingIcon = {
                AnimatedVisibility(visible = text.isNotBlank(), enter = fadeIn(), exit = fadeOut()) {
                    IconButton(onClick = { text = "" }) {
                        Icon(Icons.Outlined.Cancel, "Clear")
                    }
                }
            },
        )
    }
    item {
        var text by remember { mutableStateOf("") }
        TextField(
            modifier = Modifier.fillMaxWidth().padding(horizontal = 16.dp),
            label = { Text("Street address") },
            value = text,
            onValueChange = { text = it },
            keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Text, imeAction = ImeAction.Next),
            keyboardActions = KeyboardActions {
                focusManager.moveFocus(FocusDirection.Next)
            },
            singleLine = true,
            trailingIcon = {
                AnimatedVisibility(visible = text.isNotBlank(), enter = fadeIn(), exit = fadeOut()) {
                    IconButton(onClick = { text = "" }) {
                        Icon(Icons.Outlined.Cancel, "Clear")
                    }
                }
            },
        )
    }
    item {
        var text by remember { mutableStateOf("") }
        TextField(
            modifier = Modifier.fillMaxWidth().padding(horizontal = 16.dp),
            label = { Text("City") },
            value = text,
            onValueChange = { text = it },
            keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Text, imeAction = ImeAction.Next),
            keyboardActions = KeyboardActions {
                focusManager.moveFocus(FocusDirection.Next)
            },
            singleLine = true,
            trailingIcon = {
                AnimatedVisibility(visible = text.isNotBlank(), enter = fadeIn(), exit = fadeOut()) {
                    IconButton(onClick = { text = "" }) {
                        Icon(Icons.Outlined.Cancel, "Clear")
                    }
                }
            },
        )
    }
    item {
        var text by remember { mutableStateOf("") }
        TextField(
            modifier = Modifier.fillMaxWidth().padding(horizontal = 16.dp),
            label = { Text("Zip/postal code") },
            value = text,
            onValueChange = { text = it },
            keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Text, imeAction = ImeAction.Done),
            keyboardActions = KeyboardActions {
                focusManager.clearFocus()
            },
            singleLine = true,
            trailingIcon = {
                AnimatedVisibility(visible = text.isNotBlank(), enter = fadeIn(), exit = fadeOut()) {
                    IconButton(onClick = { text = "" }) {
                        Icon(Icons.Outlined.Cancel, "Clear")
                    }
                }
            },
        )
    }
    item {
        Text(text = "Groups", style = MaterialTheme.typography.titleMedium, modifier = Modifier.padding(start = 16.dp, end = 16.dp, top = 24.dp, bottom = 8.dp))
    }
    item {
        var selected by remember { mutableStateOf<Int?>(null) }
        val options = listOf("Family", "Friends", "Work", "Other")
        Column {
            options.forEachIndexed { i, option ->
                Row(verticalAlignment = Alignment.CenterVertically, horizontalArrangement = Arrangement.spacedBy(24.dp), modifier = Modifier.clickable { selected = i }.fillMaxWidth().padding(16.dp)) {
                    RadioButton(selected = selected == i, onClick = null)
                    Text(text = option)
                }

            }
        }
    }
    item {
        Text(text = "Notification Options", style = MaterialTheme.typography.titleMedium, modifier = Modifier.padding(start = 16.dp, end = 16.dp, top = 24.dp, bottom = 8.dp))
    }
    item {
        var selected by remember { mutableStateOf(false) }
        Row(verticalAlignment = Alignment.CenterVertically, horizontalArrangement = Arrangement.spacedBy(24.dp), modifier = Modifier.clickable { selected = selected.not() }.fillMaxWidth().padding(16.dp)) {
            Checkbox(checked = selected, onCheckedChange = null)
            Text(text = "Override 'Do not Disturb'")
        }
    }
    item {
        var selected by remember { mutableStateOf(false) }
        Row(verticalAlignment = Alignment.CenterVertically, horizontalArrangement = Arrangement.spacedBy(24.dp), modifier = Modifier.clickable { selected = selected.not() }.fillMaxWidth().padding(16.dp)) {
            Checkbox(checked = selected, onCheckedChange = null)
            Text(text = "Block calls from this contact")
        }
    }
}

@Composable
fun NiceTry(){
    Column {
        BasicText("Nice try. Use code COMPOSE10 for a 10% discount on checkout ;)")
    }
}

@Composable
fun NiceTry(){
    Column {
        BasicText("Nice try. Use code COMPOSE10 for a 10% discount on checkout ;)")
    }
}

@Composable
fun NiceTry(){
    Column {
        BasicText("Nice try. Use code COMPOSE10 for a 10% discount on checkout ;)")
    }
}