How to Bind Variables with Radio Buttons in Svelte

In frontend development, radio buttons are a common selection control when dealing with form elements. In the Svelte framework, binding radio buttons is simple and intuitive. This article will demonstrate how to use the bind:group attribute to bind multiple radio buttons to the same variable and automatically update the variable based on the user’s selection.

Implementation Steps

1. Create a Variable

First, we need to define a variable in the <script> tag of the Svelte component to store the value of the selected radio button:

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

2. Set Up the Radio Buttons

Next, use the input tag in the HTML section to create multiple radio buttons, and bind them to the same variable selectedOption using bind:group={selectedOption}:

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

3. Display the Selected Value

Through Svelte’s two-way data binding mechanism, when the user selects a different radio button, the selectedOption variable is automatically updated to the selected value. We can display this value:

1
<p>Selected option: {selectedOption}</p>

Complete Example

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

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

18
<p>Selected option: {selectedOption}</p>

In this example, when the user selects different radio buttons, the selectedOption variable is automatically updated according to the selected value.

Conclusion

Svelte simplifies handling radio button selection and variable binding with the bind:group attribute. By using this approach, we can easily implement dynamic interaction and data synchronization in forms, significantly simplifying the development process.