# CSA0X: O hazlo con `Checkbox`

###### tags: `blog`, `compose`, `csa`

## La función `Checkbox`

Similar al conmutador, tenemos la clásica casilla de verificación es un componente muy usado en muchos escenarios. Podemos usar la función componible `Checkbox`, que nos proveerá la opción de alternar entre dos estados, marcado y no marcado. Para usarlo, deberemos indicar el estado inicial, además de la función que responderá al evento de cambiar de estado.

Checkbox(
    checked = true,
    onCheckedChange = { /*TODO*/ }
)


La lista de atributos de Checkbox es la que sigue:

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

- **checked**: Indica si está verificado o no.
- **onCheckedChange**: Evento que responde al cambio de estado entre verificado o no.
- **modifier**: Modificador aplicado al verificador.
- **enabled**: Define si el verificador está o no habilitado.
- **interactonState**: Estados de interacción del verificador.
- **colors**: Colores aplicados al verificador. Por defecto será el color secundario de la aplicación el que se aplique.

Cómo se puede apreciar, es exactamente igual a `Switch` salvo por el atributo `colors` que en este caso de un `CheckboxColors`

Por lo tanto, gestionar el cambio de estado de un Checkbox es idéntico al de un Switch

fun CheckBoxStateExample() {
    val isChecked = remember {
        mutableStateOf(false)
    }
    Checkbox(
        checked = isChecked.value,
        onCheckedChange = { checked ->
            isChecked.value = checked
        }
    )
}


## Coloreemos al gusto nuestro verificador

Podemos darle color a los diferentes estados del Checkbox además de el tick de verificación:

@Composable
fun CheckBoxColouredExample() {
    val isChecked = remember {
        mutableStateOf(false)
    }
    Checkbox(
        checked = isChecked.value,
        onCheckedChange = { checked ->
            isChecked.value = checked
        },
        colors = CheckboxDefaults.colors(
            checkedColor = Color.Blue,
            uncheckedColor = Color.Cyan,
            checkmarkColor = Color.Green,
            disabledColor = Color.LightGray,
        )
    )
}


## Pongamos una etiqueta para dar contexto

A diferencia del componente `XML`, `Checkbox` no tiene la posibilidad innata de incluirle una etiqueta para dar contexto de lo que se está verificando. Por lo tanto, es necesario componer un vista usando la función `Text` para ello:

@Composable
fun LabeledCheckboxExample(){
    val isChecked = remember { mutableStateOf(false) }
    Row (modifier = Modifier.clickable(onClick = {
        isChecked.value = !isChecked.value
    })) {
        Checkbox(
            checked = isChecked.value,
            onCheckedChange = { checked ->
                isChecked.value = checked
            }
        )
        Text(
            text = "Recibir notificaciones",
            modifier = Modifier.padding(start = 8.dp)
        )
    }
    
}