Option to allow label to be positioned on the left of checkboxes and radios

Is your feature request related to a problem? Please describe…

There are certain cases with checkboxes/radios where a left-aligned label is useful. For example, when dealing with switches that are right aligned to a card.

Describe the solution you’d like

Add a label-position prop to <b-form-checkbox>, <b-form-checkbox-group>, <b-form-radio>, <b-form-radio-group>. This prop could be set to left or right but defaults to right. This would do exactly what it says and render the label to either the left or right hand side of the checkbox/radio.

Describe alternatives you’ve considered

We might be able to get away with a flexbox order css trick if the checkbox and label lived inside a flex container.

This can be done manually in HTML but requires abandoning most of the work that the Bootstrap Vue components are doing.

Additionally, the prop could just be a boolean called label-position-opposite or something. This would be potentially beneficial for localization reasons with right-to-left languages. However, this would require considerable awareness from the bootstrap library to make this seamless to toggle between different localizations.

[tmorehouse]

An alternative is to do this:

<div class="d-flex">
  <h4 class="mb-0">LIABILITIES</h4>
  <label for="switch_1" class="ml-auto mb-0">Itemize</label>
  <b-form-checkbox id="switch_1" v-model="itemize" switch class="ml-2 mr-n2"></b-form-checkbox>
</div>

See working fiddle here: https://jsfiddle.net/8od9zucb/

[tmorehouse]

Bootstrap v5 will be changing how the “custom” checks and radios are rendered (using custom styles on the input rather than the label).

Closing as this should be available in bootstrap v5 when released (BootstrapVue v3.x)