Checkboxes

Use BoostrapVue's checkbox:

<b-form-checkbox v-model="isBar" ><nowiki> Bar <nowiki></b-form-checkbox><nowiki> Confusingly, it can also be <b-checkbox> (src). <strong>Tab navigation.</strong> See Tab Key Navigation section. To navigate away from the dropdown, define the keydown event handler: <nowiki>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); }