Checkbox in KMP Kotlin Compose Multiplatform

In today’s tutorial, we will learn about Checkbox in KMP Kotlin Compose Multiplatform for both Android & iOS platforms. We will discuss creating a Checkbox in KMP(KMM), handling the Checkbox state, customizing Checkbox properties, and showing Checkbox selected items in the Text widget.

Checkbox in KMP Kotlin Compose Multiplatform:

A Checkbox is a UI widget allowing application users to select or deselect an option. It allows us to select multiple options from a list by checking and unchecking states. The checkbox is mainly used in applications for Remember Me, Accepting terms and conditions agreements, and giving the users multiple choice selection boxes.

Implement Checkbox in KMP:

In Kotlin Compose Multiplatform, a widget named Checkbox is given to create material style Checkbox for both Android & iOS.

    // State
    var isChecked by remember { mutableStateOf(false) }
    
    Checkbox(
        checked = isChecked,
        onCheckedChange = { isChecked = it }
    )

// State

var isChecked by remember { mutableStateOf(false) }

Checkbox(

checked = isChecked,

onCheckedChange = { isChecked = it }

)

Code explanation:

isChecked: State to hold the check and uncheck result in True and false format.
checked: the value of the Checkbox.
onCheckedChange: Calls every time the user checks or unchecks the Checkbox.

Source code:

package com.app.test

import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.material.Checkbox
import androidx.compose.material.MaterialTheme
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp

@Composable
fun App() {
    MaterialTheme {
        Box(modifier = Modifier.fillMaxSize().padding(16.dp)) {
            Column(Modifier.fillMaxWidth(),
                horizontalAlignment = Alignment.CenterHorizontally) {
                var isChecked by remember { mutableStateOf(false) }
                Checkbox(
                    checked = isChecked,
                    onCheckedChange = { isChecked = it }
                )
            }
        }
    }
}

package com.app.test

import androidx.compose.foundation.layout.Box

import androidx.compose.foundation.layout.Column

import androidx.compose.foundation.layout.fillMaxSize

import androidx.compose.foundation.layout.fillMaxWidth

import androidx.compose.foundation.layout.padding

import androidx.compose.material.Checkbox

import androidx.compose.material.MaterialTheme

import androidx.compose.runtime.*

import androidx.compose.ui.Alignment

import androidx.compose.ui.Modifier

import androidx.compose.ui.unit.dp

@Composable

fun App() {

MaterialTheme {

Box(modifier = Modifier.fillMaxSize().padding(16.dp)) {

Column(Modifier.fillMaxWidth(),

horizontalAlignment = Alignment.CenterHorizontally) {

var isChecked by remember { mutableStateOf(false) }

Checkbox(

checked = isChecked,

onCheckedChange = { isChecked = it }

)

}

Screenshot

Adding Label to Checkbox in KMP:

To add a Label to CheckBox, we will wrap both Checkbox and Text into a Row widget. This will align both of them horizontally.

Row(
        verticalAlignment = Alignment.CenterVertically
    ) {
        Checkbox(
            checked = isChecked,
            onCheckedChange = { isChecked = it }
        )
        Text(
            text = "Google",
            modifier = Modifier.padding(start = 8.dp)
        )
    }

Row(

verticalAlignment = Alignment.CenterVertically

) {

Checkbox(

checked = isChecked,

onCheckedChange = { isChecked = it }

)

Text(

text = "Google",

modifier = Modifier.padding(start = 8.dp)

)

}

Source code:

package com.app.test

import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.material.Checkbox
import androidx.compose.material.MaterialTheme
import androidx.compose.material.Text
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp

@Composable
fun App() {
    MaterialTheme {
        Box(modifier = Modifier.fillMaxSize().padding(16.dp)) {
            Column(
                Modifier.fillMaxWidth(),
                horizontalAlignment = Alignment.CenterHorizontally
            ) {
                var isChecked by remember { mutableStateOf(false) }
                Row(
                    verticalAlignment = Alignment.CenterVertically
                ) {
                    Checkbox(
                        checked = isChecked,
                        onCheckedChange = { isChecked = it }
                    )
                    Text(
                        text = "Google",
                        modifier = Modifier.padding(start = 8.dp)
                    )
                }
                Text(
                    text = if (isChecked) "Checked" else "Unchecked",
                    modifier = Modifier.padding(start = 8.dp)
                )
            }
        }
    }
}

package com.app.test

import androidx.compose.foundation.layout.Box

import androidx.compose.foundation.layout.Column

import androidx.compose.foundation.layout.Row

import androidx.compose.foundation.layout.fillMaxSize

import androidx.compose.foundation.layout.fillMaxWidth

import androidx.compose.foundation.layout.padding

import androidx.compose.material.Checkbox

import androidx.compose.material.MaterialTheme

import androidx.compose.material.Text

import androidx.compose.runtime.*

import androidx.compose.ui.Alignment

import androidx.compose.ui.Modifier

import androidx.compose.ui.unit.dp

@Composable

fun App() {

MaterialTheme {

Box(modifier = Modifier.fillMaxSize().padding(16.dp)) {

Column(

Modifier.fillMaxWidth(),

horizontalAlignment = Alignment.CenterHorizontally

) {

var isChecked by remember { mutableStateOf(false) }

Row(

verticalAlignment = Alignment.CenterVertically

) {

Checkbox(

checked = isChecked,

onCheckedChange = { isChecked = it }

)

Text(

text = "Google",

modifier = Modifier.padding(start = 8.dp)

)

}

Text(

text = if (isChecked) "Checked" else "Unchecked",

modifier = Modifier.padding(start = 8.dp)

)

}

Screenshot:

Customizing Checkbox in KMP:

The Checkbox widget has color properties, such as CheckboxDefaults.colors(). It has 5 sub-properties: checkedColor, uncheckedColor, and checkmarkColor, disabledColor and disabledIndeterminateColor.

Checkbox(
    checked = isChecked,
    onCheckedChange = { isChecked = it },
    colors = CheckboxDefaults.colors(
        checkedColor = Color(0xFF00BFA5),
        uncheckedColor = Color.Gray,
        checkmarkColor = Color.White,
        disabledColor = Color.Gray,
        disabledIndeterminateColor = Color.Gray
    )
)

Checkbox(

checked = isChecked,

onCheckedChange = { isChecked = it },

colors = CheckboxDefaults.colors(

checkedColor = Color(0xFF00BFA5),

uncheckedColor = Color.Gray,

checkmarkColor = Color.White,

disabledColor = Color.Gray,

disabledIndeterminateColor = Color.Gray

)

Screenshot:

Checkbox with Multi-Selection Enabled in KMP:

Finally, we are creating multiple checkboxes with multiple selected enabled. We have a list of Strings with the list of checkbox enabled and disabled states. We show selected items in a Text on each selection and de-selection. With this, you can easily learn to get multiple selected items into a Single object in Checkbox.

 // States
 val tasks = listOf("Google", "Yahoo", "Bing")
 val checkedStates = remember { mutableStateListOf(false, false, false) }

 tasks.forEachIndexed { index, task ->
    Row(verticalAlignment = Alignment.CenterVertically) {
        Checkbox(
            checked = checkedStates[index],
            onCheckedChange = { checkedStates[index] = it }
        )
        Text(
            text = task,
            modifier = Modifier.padding(start = 8.dp),
            style = TextStyle(fontSize = 18.sp)
        )
    }
}

// States

val tasks = listOf("Google", "Yahoo", "Bing")

val checkedStates = remember { mutableStateListOf(false, false, false) }

tasks.forEachIndexed { index, task ->

Row(verticalAlignment = Alignment.CenterVertically) {

Checkbox(

checked = checkedStates[index],

onCheckedChange = { checkedStates[index] = it }

)

Text(

text = task,

modifier = Modifier.padding(start = 8.dp),

style = TextStyle(fontSize = 18.sp)

)

}

Code explanation:

tasks: Checkbox list items.
checkedStates: Checkbox selected items state.
tasks.forEachIndexed: To render Checkbox items from the list.

Complete source code for App.kt file:

package com.app.test

import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.material.Checkbox
import androidx.compose.material.CheckboxDefaults
import androidx.compose.material.MaterialTheme
import androidx.compose.material.Text
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp

@Composable
fun App() {
    MaterialTheme {
        val tasks = listOf("Google", "Yahoo", "Bing")
        val checkedStates = remember { mutableStateListOf(false, false, false) }

        Box(modifier = Modifier.fillMaxSize().padding(16.dp)) {

            Column {

                Text(
                    "Checkbox in KMP (KMM) Kotlin Compose Multiplatform",
                    style = TextStyle(fontSize = 24.sp),
                    textAlign = TextAlign.Center
                )

                Spacer(modifier = Modifier.height(16.dp))

                // Task List with Checkboxes
                tasks.forEachIndexed { index, task ->
                    Row(verticalAlignment = Alignment.CenterVertically) {
                        Checkbox(
                            checked = checkedStates[index],
                            onCheckedChange = { checkedStates[index] = it },
                            colors = CheckboxDefaults.colors(
                                checkedColor = Color(0xFF00BFA5),
                                uncheckedColor = Color.Gray,
                                checkmarkColor = Color.White,
                                disabledColor = Color.Gray,
                                disabledIndeterminateColor = Color.Gray
                            )
                        )
                        Text(
                            text = task,
                            modifier = Modifier.padding(start = 8.dp),
                            style = TextStyle(fontSize = 18.sp)
                        )
                    }
                }

                Spacer(modifier = Modifier.height(16.dp))

                // Display Selected Items
                val selectedTasks = tasks.filterIndexed { index, _ -> checkedStates[index] }
                Text(
                    text = if (selectedTasks.isNotEmpty())
                        "Selected: ${selectedTasks.joinToString(", ")}"
                    else "No items selected",
                    style = TextStyle(fontSize = 16.sp, fontWeight = FontWeight.Bold)
                )
            }
        }
    }
}

package com.app.test

import androidx.compose.foundation.layout.Box

import androidx.compose.foundation.layout.Column

import androidx.compose.foundation.layout.Row

import androidx.compose.foundation.layout.Spacer

import androidx.compose.foundation.layout.fillMaxSize

import androidx.compose.foundation.layout.height

import androidx.compose.foundation.layout.padding

import androidx.compose.material.Checkbox

import androidx.compose.material.CheckboxDefaults

import androidx.compose.material.MaterialTheme

import androidx.compose.material.Text

import androidx.compose.runtime.*

import androidx.compose.ui.Alignment

import androidx.compose.ui.Modifier

import androidx.compose.ui.graphics.Color

import androidx.compose.ui.text.TextStyle

import androidx.compose.ui.text.font.FontWeight

import androidx.compose.ui.text.style.TextAlign

import androidx.compose.ui.unit.dp

import androidx.compose.ui.unit.sp

@Composable

fun App() {

MaterialTheme {

val tasks = listOf("Google", "Yahoo", "Bing")

val checkedStates = remember { mutableStateListOf(false, false, false) }

Box(modifier = Modifier.fillMaxSize().padding(16.dp)) {

Column {

Text(

"Checkbox in KMP (KMM) Kotlin Compose Multiplatform",

style = TextStyle(fontSize = 24.sp),

textAlign = TextAlign.Center

)

Spacer(modifier = Modifier.height(16.dp))

// Task List with Checkboxes

tasks.forEachIndexed { index, task ->

Row(verticalAlignment = Alignment.CenterVertically) {

Checkbox(

checked = checkedStates[index],

onCheckedChange = { checkedStates[index] = it },

colors = CheckboxDefaults.colors(

checkedColor = Color(0xFF00BFA5),

uncheckedColor = Color.Gray,

checkmarkColor = Color.White,

disabledColor = Color.Gray,

disabledIndeterminateColor = Color.Gray

)

Text(

text = task,

modifier = Modifier.padding(start = 8.dp),

style = TextStyle(fontSize = 18.sp)

)

}

Spacer(modifier = Modifier.height(16.dp))

// Display Selected Items

val selectedTasks = tasks.filterIndexed { index, _ -> checkedStates[index] }

Text(

text = if (selectedTasks.isNotEmpty())

"Selected: ${selectedTasks.joinToString(", ")}"

else "No items selected",

style = TextStyle(fontSize = 16.sp, fontWeight = FontWeight.Bold)

)

}

Screenshots in Android device:

Screenshot in iOS device:

Checkbox in KMP Kotlin Compose Multiplatform

Checkbox in KMP Kotlin Compose Multiplatform:

Implement Checkbox in KMP:

Adding Label to Checkbox in KMP:

Customizing Checkbox in KMP:

Checkbox with Multi-Selection Enabled in KMP:

Comments

Leave a Reply Cancel reply