Cómo enlazar variables con botones de radio en Svelte

En el desarrollo frontend, los botones radio son un componente común para opciones de selección. En el framework Svelte, la vinculación de los botones radio es simple e intuitiva. Este artículo mostrará cómo utilizar la propiedad bind:group para enlazar múltiples botones radio a una sola variable y actualizarla automáticamente según la opción seleccionada por el usuario.

Pasos para Implementar

1. Crear una Variable

Primero, necesitamos definir una variable en la etiqueta <script> del componente Svelte para almacenar el valor del botón radio seleccionado por el usuario:

1
<script>
2
    let selectedOption = "option1";
3
</script>

2. Configurar los Botones de Radio

Luego, en la parte HTML, usamos la etiqueta input para crear varios botones radio, y mediante bind:group={selectedOption}, los enlazamos a la misma variable selectedOption:

1
<label>
2
    <input type="radio" bind:group={selectedOption} value="option1">
3
    Opción 1
4
</label>
5
<label>
6
    <input type="radio" bind:group={selectedOption} value="option2">
7
    Opción 2
8
</label>
9
<label>
10
    <input type="radio" bind:group={selectedOption} value="option3">
11
    Opción 3
12
</label>

3. Mostrar el Valor Seleccionado

Gracias al mecanismo de vinculación bidireccional de Svelte, cuando el usuario selecciona un botón radio diferente, selectedOption se actualiza automáticamente con el valor seleccionado. Podemos mostrar ese valor de la siguiente manera:

1
<p>Opción seleccionada: {selectedOption}</p>

Ejemplo Completo

1
<script>
2
    let selectedOption = "option1";
3
</script>
4

5
<label>
6
    <input type="radio" bind:group={selectedOption} value="option1">
7
    Opción 1
8
</label>
9
<label>
10
    <input type="radio" bind:group={selectedOption} value="option2">
11
    Opción 2
12
</label>
13
<label>
14
    <input type="radio" bind:group={selectedOption} value="option3">
15
    Opción 3
16
</label>
17

18
<p>Opción seleccionada: {selectedOption}</p>

En este ejemplo, cuando el usuario selecciona un botón radio diferente, la variable selectedOption se actualiza automáticamente según el valor seleccionado.

Resumen

Con la propiedad bind:group, Svelte facilita la vinculación entre los botones radio y una variable. Usando esta técnica, podemos implementar fácilmente interacciones dinámicas en formularios y sincronización de datos, simplificando enormemente el desarrollo.