BootstrapVue — Radio Inputs

To make good looking Vue apps, we need to style our components.

To make our lives easier, we can use components with styles built-in.

In this article, we’ll look at how to add radio button inputs.

Radio Buttons

BootstrapVue comes with the b-form-radio-group component to let us add radio buttons to our forms.

For example, we can write:

<template>
  <div id="app">
    <b-form-radio v-model="selected" name="fruit" value="apple">apple</b-form-radio>
    <b-form-radio v-model="selected" name="fruit" value="orange">orange</b-form-radio>
    <p>{{selected}}</p>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      selected: ""
    };
  }
};
</script>

We have 2 radio buttons with the same name attribute value and binds to the same state.

Therefore, when we click a button, the selected state will update.

Grouped Radios

We can group them together by using the b-form-radio-group component.

This way, we don’t have to add each radio button individually.

For example, we can write:

<template>
  <div id="app">
    <b-form-radio-group v-model="selected" :options="options" name="fruit"></b-form-radio-group>
    <p>{{selected}}</p>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      selected: "",
      options: [
        { text: "Apple", value: "apple" },
        { text: "Orange", value: "orange" }
      ]
    };
  }
};
</script>

Then we can specify all the radio buttons in one component.

options has the options we want to render.

selected is the state we want to bind the value to.

We can mix and match the options prop and b-form-radio components in b-form-radio-group .

For example, we can write:

<template>
  <div id="app">
    <b-form-radio-group
      id="radio-slots"
      v-model="selected"
      :options="options"
      name="radio-options-slots"
    >
      <template v-slot:first>
        <b-form-radio value="grape">Grape</b-form-radio>
      </template>

      <b-form-radio :value="{ banana: 'banana' }">Banana</b-form-radio>
    </b-form-radio-group>
    <p>{{selected}}</p>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      selected: "",
      options: [
        { text: "Apple", value: "apple" },
        { text: "Orange", value: "orange" }
      ]
    };
  }
};
</script>

We added various kinds of radio buttons.

We have Apple and Orange added by specifying the options prop.

Banana is specified with the value prop.

And we added a template to add the Grape option. We specify that we want to populate the first slot, so it’ll appear first.

Now we’ll see the options when we click the buttons.

We can also add HTML content to the label with the html property.

Instead of the text property, we use the html property.

However, this may make our app vulnerable to cross-site scripting attacks since the text isn’t sanitized.

We can write:

<template>
  <div id="app">
    <b-form-radio-group
      v-model="selected"
      :options="options"
      name="fruits"
    >
    </b-form-radio-group>
    <p>{{selected}}</p>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      selected: "",
      options: [
        { html: "<b>Apple</b>", value: "apple" },
        { text: "Orange", value: "orange" }
      ]
    };
  }
};
</script>

Changing Option Field Names

The field property names can change according to our preference.

There’s the text-field prop that takes a property name of the option objecrt to display as the label text.

And the value-field prop lets us set the property name for the value field.

For instance, we can write:

<template>
  <div id="app">
    <b-form-radio-group
      v-model="selected"
      :options="options"
      value-field="item"
      text-field="name"
      name="fruits"
    >
    </b-form-radio-group>
    <p>{{selected}}</p>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      selected: "",
      options: [
        { name: "Apple", item: "apple" },
        { name: "Orange", item: "orange" }
      ]
    };
  }
};
</script>

then we change the field names with the props.

name is displayed and item is set as the value of selected .

Stacked or Inline

We can take our radio button group stacked or line.

By default, it’s inline.

We can add the stacked prop to make them stacked.

For example, we can write:

<template>
  <div id="app">
    <b-form-radio-group
      v-model="selected"
      :options="options"
      stacked
      name="fruits"
    >
    </b-form-radio-group>
    <p>{{selected}}</p>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      selected: "",
      options: [
        { text: "Apple", value: "apple" },
        { text: "Orange", value: "orange" }
      ]
    };
  }
};
</script>

and now they’re stacked.

Conclusion

We can create radio buttons individually or as a group.

As long as the name value of each is the same, we can bind it to the same state field.

There are also many other customization options with labels and text.