Checkbox in Jetpack Compose

What is Check box?

Checkboxes are just like the buttons that allow the users to select one or more options from a set. We use checkbox options in a vertical list.

It can also be used to turn an option on or off for instance to on or off the flash light of our smartphones.

Checkbox is a two-states button checked (selected) or unchecked (not selected).

Checkboxes can have a parent-child relationship with other checkboxes. It means When the parent checkbox is checked, all the child checkboxes are checked. If a parent checkbox is unchecked, all child checkboxes are unchecked. If some, but not all, child checkboxes are checked, the parent checkbox becomes an indeterminate checkbox.

Also Read Floating Action Button in Jetpack Compose

Steps :

Create a New Project and select Empty Activity In my case, application name is Coding Bihar you can use any other name.

Also Read Radio Button in Jetpack Compose

   MainActivity

Copy this code →

package com.example.codingbihar
import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
import androidx.compose.ui.Modifier
import com.example.codingbihar.ui.theme.CodingBiharTheme

class MainActivity : ComponentActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            CodingBiharTheme {
                // A surface container using the 'background' color from the theme
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colorScheme.background
                ) {
                    Checkboxes()                
            }
        }
    }
}

Create a separate file for Checkbox and named it as  CheckBox

CheckBox

Copy this code →

package com.example.codingbihar
import android.widget.Toast
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.Checkbox
import androidx.compose.material3.CheckboxDefaults
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.unit.dp

@Composable
fun Checkboxes() {
    val checkboxList: List = listOf("Checkbox 1", "Checkbox 2", "Checkbox 3","Checkbox 4")

        val context = LocalContext.current.applicationContext

        Column(horizontalAlignment = Alignment.Start) {
            checkboxList.forEach { optionName ->
                var checked by remember {
                    mutableStateOf(false)
                }
                Row(verticalAlignment = Alignment.CenterVertically) {
                    Checkbox(
                        checked = checked,
                        onCheckedChange = { checked_ ->
                            checked = checked_
                            Toast.makeText(context, "$optionName $checked_", Toast.LENGTH_SHORT)
                                .show()
                        },
                                colors = CheckboxDefaults.colors(
                                checkedColor = Color.Magenta)
                    )
                    Text(
                        modifier = Modifier.padding(start = 2.dp),
                        text = optionName
                    )
                }
            }
        }
    }

OUTPUT :

*******************End**********************************