# CSA0X: Y sino te has decidido todavía, `TriStateCheckbox`

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

## La función `TriStateCheckbox`

La casilla de verificación con tres estados quiere solucionar el concepto de indiferencia o no determinación de la desición del usuario, por lo que a diferencia del verificador clásico, tenemos tres estados diferentes:

- **activado**: la casilla de verificación está marcada como seleccionada
- **desactivado**: la casilla de verificación está desmarcada
- **indeterminado**: representa el estado de no verificación

Podemos usar la función componible `TriStateCheckbox`, que nos proveerá la opción de alternar entre estos tres. Para usarlo, deberemos indicar el estado inicial (indeterminado, activo o inactivo), además de la función que responderá al evento de cambiar de estado.

@Composable
fun TriStateCheckboxBasicExample(){
    TriStateCheckbox(
        state = ToggleableState.Indeterminate,
        onClick = { /*TODO*/ })
}


Además de estos, la lista de parámetros de la función son:

- **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.

Por lo tanto, sólo cambia con respecto a `Checkbox` el parámetro `state` que tiene que contemplar el estado de indeterminación. Además, los colores se pueden configurar exactamente igual que `Checkbox`.

## Gestionando los cambios de estado

Gestionar el cambio de estado de un TriStateCheckbox es similar a Checkbox y a Switch, salvo por que el estado no es binario, sino terciario y viene definido por un enumerador:

enum class ToggleableState {
    On,
    Off,
    Indeterminate
}

Así, lo habitual es inicializar el estado como indeterminado y una vez el usuario interactue con el componente ya si irémos pasando por los estados de verificado o no.

@Composable
fun TriStateCheckboxStateExample() {
    var checkboxState = remember { mutableStateOf(ToggleableState.Indeterminate) }
    TriStateCheckbox(
        state = checkboxState.value,
        onClick = {
            checkboxState.value = when (checkboxState.value) {
                ToggleableState.On -> ToggleableState.Off
                ToggleableState.Off -> ToggleableState.On
                ToggleableState.Indeterminate -> ToggleableState.On
            }
        })
}