Cuando tenemos una lista de elementos y queremos que un usuario nos seleccione uno o más de esos elementos de nuestra lista, ya sea como resultado de una pregunta o como acción antes de borrarlos por ejemplo, lo normal es usar un componente como un checkbox que suelen aparecer a la izquierda del item tal como se refleja en la imagen.

Jetpack Compose ya viene con este tipo de componentes construidos y su utilización por nuestra parte es bastante sencilla aunque al mismo tiempo nos brinda una gran variedad de opciones para customizarlos y adecuarlos a nuestro uso particular.

Como crear un checkbox en Jetpack Compose

Su uso es tan simple como crear una variable para recordar sus estado. Este componente por su naturaleza, puede cambiar de estado, estar seleccionado o no.

val checkedState = remember { mutableStateOf(true) }

Y una vez que tenemos donde guardar su estado, solo resta instanciarlo como un componente más de Jetpack Compose.

Checkbox(
    checked = checkedState.value,
    onCheckedChange = { checkedState.value = it }
)

En el evento onCheckedChange es donde cambiamos el estado de nuestra variable al nuevo estado que tenga el componente.

Además de estas propiedades, el CheckBox tiene otras más:

@Composable
fun Checkbox(
    checked: Boolean!,
    onCheckedChange: ((Boolean) -> Unit)?,
    modifier: Modifier! = Modifier,
    enabled: Boolean! = true,
    interactionSource: MutableInteractionSource! = remember { MutableInteractionSource() },
    colors: CheckboxColors! = CheckboxDefaults.colors()
): Unit

enabled: Nos sirve para mostrar este componente como activo o no, puede que queremos que el componente se muestre en pantalla pero no esté activo para su uso hasta que el usuario puse en cierta parte, por ejemplo.

colors: Esta propiedad es de tipo CheckboxColors y con ella podemos construir un objeto de este tipo donde definimos los colores del borde, del background y de la marca que se dibuja al cllickarlo.

Checkbox(
        checked = initialState,
        onCheckedChange = {
            checkedState.value = it
        }, enabled = enabled,
        colors = CheckboxDefaults.colors(
            checkedColor = Color.Red,
            checkmarkColor = Color.Blue,
            uncheckedColor = Color.Green
        )
    )

Nos crearía una fantástico CheckBox como el siguiente: