Checkboxes

Use BoostrapVue's checkbox:

<b-form-checkbox
  v-model="isBar"
>

Bar

</b-form-checkbox>

Confusingly, it can also be <b-checkbox> (src).

Tab navigation. See Tab Key Navigation section. To navigate away from the dropdown, define the keydown event handler:

private onKeyDownFooCheckbox(e: KeyboardEvent) 
	{
  this.emulateTab(
e,
    () => {
      (this.$refs.barField as any).$el.focus();
      (this.$refs.barField as any).$el.select();
    },
    () => {
      (this.$refs.bazField as any).$el.focus();
      (this.$refs.bazField as any).$el.select();
    });
  }

Then add @keydown="onKeyDownFooCheckbox" define a method to set the keydown event listener on the checkbox and call it in mounted() callback:

private initializeKeyDownEvents() {
  (this.$refs.fooCheckbox as any).$el.parentNode.removeEventListener('keydown', this.onKeyDownFooCheckbox);
  (this.$refs.fooCheckbox as any).$el.parentNode.addEventListener('keydown', this.onKeyDownFooCheckbox);
}

Return to Programming Guide