How can I use checkbox control in jetpack compose?

Question

I am try to use sign in for android jetpack compose, when I click the button it works, but I want to use the checkbox in my project for users accept the

I Agree to App Terms of Service and Privacy Policy.

privacy policy for my app, and if users uncheck the checkbox, they will not able to login, but if click the check, they can login, is there a way to control it for users, any idea?

@OptIn(ExperimentalComposeUiApi::class)
@Composable
fun LoginScreen(
    navController: NavController,

) {
    val email = remember { mutableStateOf(TextFieldValue()) }
    val password = remember { mutableStateOf(TextFieldValue()) }

    val passwordVisibility = remember { mutableStateOf(false) }

    Column(
        Modifier
            .fillMaxSize()
           
        ,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        val context = LocalContext.current

        OutlinedTextField(
            value = email.value,
            colors = TextFieldDefaults.textFieldColors(
                backgroundColor = white,
                focusedIndicatorColor = Grey,
                unfocusedIndicatorColor = Grey,
                focusedLabelColor = Grey,
                unfocusedLabelColor = Grey,
                cursorColor = custom,
                textColor = custom,

                ),
            onValueChange = { email.value = it },
            label = { Text(text = "Email Address") },
            placeholder = { Text(text = "Email Address") },
            singleLine = true,
            modifier = Modifier.fillMaxWidth(0.8f)

        )
        Spacer(modifier = Modifier.padding(2.dp))

        OutlinedTextField(
            value = password.value,
            colors = TextFieldDefaults.textFieldColors(
                backgroundColor = white,
                focusedIndicatorColor = Grey,
                unfocusedIndicatorColor = Grey,
                focusedLabelColor = Grey,
                unfocusedLabelColor = Grey,
                cursorColor = custom,
                textColor = custom,

                ),
            onValueChange = { password.value = it },
            label = { Text(text = "Password") },
            placeholder = { Text(text = "Password") },
            singleLine = true,
            modifier = Modifier.fillMaxWidth(0.8f),
            trailingIcon = {
                IconButton(onClick = {
                    passwordVisibility.value = !passwordVisibility.value
                }) {
                    Icon(
                        painter = painterResource(id = R.drawable.password_eye),
                        contentDescription = "",
                        tint = if (passwordVisibility.value) custom else Grey
                    )
                }
            },
            visualTransformation = if (passwordVisibility.value) VisualTransformation.None
            else PasswordVisualTransformation()
        )

        Spacer(modifier = Modifier.padding(10.dp))

        Row(
            horizontalArrangement = Arrangement.Center
        ) {
            val isChecked = remember { mutableStateOf(false) }

            Checkbox(
                checked = isChecked.value,
                onCheckedChange = { isChecked.value = it },
                enabled = true,
                colors = CheckboxDefaults.colors(custom),
                modifier = Modifier
                    .padding(5.dp)
                    .size(3.dp),
            )

            Spacer(modifier = Modifier.padding(2.dp))

            Text(
                "I Agree to  App Terms of Service and Privacy Policy.",
                modifier = Modifier.width(320.dp),
                textAlign = TextAlign.Center,
                fontSize = 12.sp,
                color = custom
            )
        }

        Spacer(modifier = Modifier.padding(20.dp))

        Button(
            modifier = Modifier
                .width(285.dp)
                .height(55.dp),
            onClick = {
                focus.clearFocus(force = true)
                model.onSignUpOne(
                    email.value.text,
                    password.value.text,

                )

            },
            colors = ButtonDefaults.buttonColors(
                backgroundColor = custom
            ),
            shape = RoundedCornerShape(30)
        ) {
            Text(
                text = "Login",
                style = TextStyle(
                    fontSize = 18.sp,
                    color = white,

                    )
            
        }
    }}}}

Answer 1

you can use isChecked value as condition.

Button(
                onClick = {
                    if(!isChecked.value){
                        // Please accept snackbar, warning etc.
                    }else{
                        // Login
                    }
                }
            ) {
                Text(text = "Login Button")
            }

Answer 2

Move isChecked out of Rowand add enabled = isChecked.value to login button, so now only if the Checkbox isChecked the login button will be enabled

@OptIn(ExperimentalComposeUiApi::class)
@Composable
fun LoginScreen(
    navController: NavController,

    ) {
    val email = remember { mutableStateOf(TextFieldValue()) }
    val password = remember { mutableStateOf(TextFieldValue()) }

    val passwordVisibility = remember { mutableStateOf(false) }

    Column(
        Modifier
            .fillMaxSize()

        ,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        val context = LocalContext.current

        OutlinedTextField(
            value = email.value,
            colors = TextFieldDefaults.textFieldColors(
                backgroundColor = white,
                focusedIndicatorColor = Grey,
                unfocusedIndicatorColor = Grey,
                focusedLabelColor = Grey,
                unfocusedLabelColor = Grey,
                cursorColor = custom,
                textColor = custom,

                ),
            onValueChange = { email.value = it },
            label = { Text(text = "Email Address") },
            placeholder = { Text(text = "Email Address") },
            singleLine = true,
            modifier = Modifier.fillMaxWidth(0.8f)

        )
        Spacer(modifier = Modifier.padding(2.dp))

        OutlinedTextField(
            value = password.value,
            colors = TextFieldDefaults.textFieldColors(
                backgroundColor = white,
                focusedIndicatorColor = Grey,
                unfocusedIndicatorColor = Grey,
                focusedLabelColor = Grey,
                unfocusedLabelColor = Grey,
                cursorColor = custom,
                textColor = custom,

                ),
            onValueChange = { password.value = it },
            label = { Text(text = "Password") },
            placeholder = { Text(text = "Password") },
            singleLine = true,
            modifier = Modifier.fillMaxWidth(0.8f),
            trailingIcon = {
                IconButton(onClick = {
                    passwordVisibility.value = !passwordVisibility.value
                }) {
                    Icon(
                        painter = painterResource(id = R.drawable.password_eye),
                        contentDescription = "",
                        tint = if (passwordVisibility.value) custom else Grey
                    )
                }
            },
            visualTransformation = if (passwordVisibility.value) VisualTransformation.None
            else PasswordVisualTransformation()
        )

        Spacer(modifier = Modifier.padding(10.dp))

        val isChecked = remember { mutableStateOf(false) }

        Row(
            horizontalArrangement = Arrangement.Center,
        ) {
            Checkbox(
                checked = isChecked.value,
                onCheckedChange = { isChecked.value = it },
                enabled = true,
                colors = CheckboxDefaults.colors(custom),
                modifier = Modifier
                    .padding(5.dp)
                    .size(3.dp),
            )

            Spacer(modifier = Modifier.padding(2.dp))

            Text(
                "I Agree to  App Terms of Service and Privacy Policy.",
                modifier = Modifier.width(320.dp),
                textAlign = TextAlign.Center,
                fontSize = 12.sp,
                color = custom
            )
        }

        Spacer(modifier = Modifier.padding(20.dp))

        Button(
            modifier = Modifier
                .width(285.dp)
                .height(55.dp),
            onClick = {
                focus.clearFocus(force = true)
                model.onSignUpOne(
                    email.value.text,
                    password.value.text,

                    )

            },
            colors = ButtonDefaults.buttonColors(
                backgroundColor = custom
            ),
            shape = RoundedCornerShape(30),
            enabled = isChecked.value
        ) {
            Text(
                text = "Login",
                style = TextStyle(
                    fontSize = 18.sp,
                    color = white,

                    )

        }
    }}}}