Creating a form with radio buttons

Radio buttons let you choose only one option among many. When the user selects a radio button, any previously selected radio button is deselected. A common example of its use is when you are creating a registration form and you choose between male and female.

Getting ready

This recipe will resemble the Creating a form with checkboxes recipe because we are using a similar technique. I suggest you to complete both the recipes to become a black belt in Vue forms.

How to do it...

First of all, we need something to choose from, so we write an array in our Vue instance:

new Vue({ 
  el: '#app', 
  data: { 
    genders: ['male', 'female', 'alien'], 
    gender: undefined 
  } 
})

We will use the variable gender (singular) to hold the value of the chosen option. From here, we can set up a form in just a few lines:

<div id="app"> 
  <form> 
    <fieldset> 
      <legend>Choose your gender</legend> 
      <label> 
        <input type...