# [CSA 0X: Para elegir opciones tenemos los `RadioButton`]

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

## La función `RadioButton`

El botón de opción es un clásico que permite a los usuarios seleccionar de un grupo de opciones requiriendo al menos seleccionar una de dichas opciones. Hablamos de una multiselección si es posible seleccionar más de una de ellas. Para crear un `RadioButton` simplemente necesitamos indicar su estado (seleccionado o no) y gestionar el evento de pulsación:

RadioButton(
        selected = true,
        onClick = { /*TODO*/ })

 

El resto de parámetros configurables en esta función son los siguientes:

fun RadioButton(
    selected: Boolean,
    onClick: (() -> Unit)?,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
    colors: RadioButtonColors = RadioButtonDefaults.colors()
)

- **selected**: Indica si el botón de opción está seleccionado.
- **onClick**: Función ejecutada tras un evento de pulsación.
- **modifier**: Modificador aplicado al botón de opción.
- **enabled**: Define si el botón de acción está habilitado o no.
- **interactionState**: Estados de interacción del botón de acción.
- **colors**: Colores aplicados al botón de acción. Por defecto será el color secundario de la aplicación el que se aplique.

En cuanto a la personalización de colores, la interfaz `RadioButtonColors` define los colores para los 3 estados que podremos configurar: seleccionado, no seleccionado y deshabilitado:

@Composable
fun ColouredRadioButtonExample() {
    RadioButton(
        selected = true,
        onClick = { /*TODO*/ },
        colors = RadioButtonDefaults.colors(
            selectedColor = Color.Red,
            disabledColor = Color.LightGray,
            unselectedColor = Color.Gray
        )
    )
}

 

## Gestionar el cambio de seleccionado a no seleccionado

De manera similar a `Switch` o `Checkbox`, para gestionar el estado declararemos una val `isSelected` usando la función `remember` pasándole a la lambda un estado de Boolean mutable. Cuando declaremos la función RadioButton, pasaremos como parámetro `selected` el `value` de `isSelected` y en el parámetro `onClick` pasamos la lamda que actualice el valor marcado devolviendo el contrario de `isSelected`.

@Composable
fun RadioButtonStateExample(){
    val isSelected = remember {
        mutableStateOf(false)
    }
    RadioButton(
        selected = isSelected.value,
        onClick = {
            isSelected.value = !isSelected.value
        }
    )
}


## Pongamos una etiqueta para dar contexto

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

@Composable
fun LabeledRadioButtonExample() {
    val isSelected = remember { mutableStateOf(false) }
    Row(modifier = Modifier.clickable(onClick = {
        isSelected.value = !isSelected.value
    })) {
        RadioButton(
            selected = isSelected.value,
            onClick = {
                isSelected.value = !isSelected.value
            }
        )
        Text(
            text = "Recibir notificaciones",
            modifier = Modifier.padding(start = 8.dp)
        )
    }
}


## ¿Dónde está `RadioGroup`?

Pues no existe en Compose como tal, por lo que, para implementar este comportamiento clásico, hay que apoyarse en la composición mediante contenedores, `RadioButton` y gestión del estado:

@Composable
fun RadioGroupExample(options: List<String>) {
    val state = remember { mutableStateOf("") }
    Column {
        options.forEach { option ->
            Row(
                modifier = Modifier
                    .padding(10.dp)
                    .clickable(onClick = {
                        state.value = option
                    })
            ) {
                RadioButton(
                    selected = state.value == option,
                    onClick = {
                        state.value = option
                    }
                )
                Text(
                    text = option,
                    modifier = Modifier.padding(start = 12.dp)
                )
            }
        }
    }
}

@Composable
fun RadioButtonPreview() {
    PoCComposeTheme {
        RadioGroupExample(listOf("Griffindor", "Hufflepuff" ,"Ravenclaw","Slytherin"))
    }
}