BootstrapVue — Switch Style Checkboxes

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 create switch style checkboxes in BootstrapVue.

Grouped Switch Style Checkboxes

To make a group os switch style checkboxes, we can add the switches prop to b-form-checkbox-group .

For example, we can write:

<template>
  <div id="app">
    <b-form-checkbox-group v-model="selected" :options="options" switches></b-form-checkbox-group>
    {{selected}}
  </div>
</template>
<script>
export default {
  name: "App",
  data() {
    return {
      selected: [],
      options: ["apple", "orange", "grape"]
    };
  }
};
</script>

Because of the switches prop on b-form-checkbox-group , we have a group of checkboxes that look like toggle switches.

options sets the checkbox options.

Then when we toggle the switches on and off, we see the selected choices displayed below it.

Switch Sizing

The size prop lets us adjust the size.

So we can write:

<template>
  <div id="app">
    <b-form-checkbox switch size="sm">Small</b-form-checkbox>
  </div>
</template>
<script>
export default {
  name: "App"
};
</script>

We can see an extra small switch because we have size='sm' .

Alternatively, we can write size='lg' to make an extra-large switch.

Plain Check Inputs

We can disable the Bootstrap styling for the checkboxes with the plain prop.

For instance, we can write:

<template>
  <div id="app">
    <b-form-checkbox-group v-model="selected" :options="options" plain></b-form-checkbox-group>
  </div>
</template>
<script>
export default {
  name: "App",
  data() {
    return {
      selected: [],
      options: ["apple", "orange", "grape"]
    };
  }
};
</script>

We have the plain prop on b-form-checkbox-group , so we have the browser native checkbox displayed.

Contextual States

We can add a state prop to display the validation state to the user.

The prop should be added to b-form-checkbox-group , b-form-invalid-feedback , and b-form-valid-feedaback components.

For example, we can write:

<template>
  <div id="app">
    <b-form-checkbox-group
      v-model="selected"
      :options="options"
      :state="state"
      name="checkbox-validation"
    >
      <b-form-invalid-feedback :state="state">please select 1 or more</b-form-invalid-feedback>
      <b-form-valid-feedback :state="state">looks good</b-form-valid-feedback>
    </b-form-checkbox-group>
  </div>
</template>
<script>
export default {
  name: "App",
  data() {
    return {
      selected: [],
      options: ["apple", "orange", "grape"]
    };
  },
  computed: {
    state() {
      return this.selected.length > 0;
    }
  }
};
</script>

We added the state prop to all 3 components.

The state value is computed by checking this.state.length .

If we didn’t select anything, we see that everything is displayed in red and we see ‘please select 1 or more’.

Otherwise, we see ‘looks good’ and everything displayed in green.

Tri-State Support

We can add an indeterminate state to our checkbox.

For instance, we can write:

<template>
  <div id="app">
    <b-form-checkbox v-model="checked" :indeterminate="indeterminate">click me</b-form-checkbox>
    <b-button @click="indeterminate  = !indeterminate ">toggle indeterminate</b-button>
    <p>{{checked}}</p>
  </div>
</template>
<script>
export default {
  name: "App",
  data() {
    return {
      checked: false,
      indeterminate: false
    };
  }
};
</script>

We have the indeterminate prop which is set to the indeterminate field.

If we click ‘toggle indeterminate’, we would see that a dash is displayed in the checkbox.

That indicates that the checkbox is in an indeterminate state.

Conclusion

We can make a tristate checkbox with the indeterminate prop.

Also, we can make a group of switch style checkboxes.