feat(CFormCheck): add a reverse property to allow put checkboxes and radios to the opposite side

Author: mrholek

packages/coreui-vue/src/components/form/CFormCheck.ts

@@ -83,6 +83,12 @@ const CFormCheck = defineComponent({
       type: [Boolean, String],
       value: undefined,
     },
+    /**
+     * Put checkboxes or radios on the opposite side.
+     *
+     * @sinve 4.8.0
+     */
+    reverse: Boolean,
     /**
      * Display validation feedback in a styled tooltip.
      *
@@ -126,6 +132,7 @@ const CFormCheck = defineComponent({
       'form-check',
       {
         'form-check-inline': props.inline,
+        'form-check-reverse': props.reverse,
         'is-invalid': props.invalid,
         'is-valid': props.valid,
       },

packages/docs/forms/checkbox.md

@@ -73,6 +73,19 @@ Group checkboxes on the same horizontal row by adding `inline` boolean property
 <CFormCheck inline id="inlineCheckbox3" value="option3" label="3 (disabled)" disabled/>
 ```
 
+## Reverse 
+
+Put your checkboxes on the opposite side by adding `reverse` boolean property.
+
+::: demo
+<CFormCheck reverse id="reverseCheckbox1" value="option1" label="Reverse checkbox"/>
+<CFormCheck reverse id="reverseCheckbox2" value="option2" label="Disabled reverse checkbox" disabled/>
+:::
+```vue
+<CFormCheck reverse id="reverseCheckbox1" value="option1" label="Reverse checkbox"/>
+<CFormCheck reverse id="reverseCheckbox2" value="option2" label="Disabled reverse checkbox" disabled/>
+```
+
 ## Without labels
 
 Remember to still provide some form of accessible name for assistive technologies (for instance, using `aria-label`).

packages/docs/forms/radio.md

@@ -63,6 +63,19 @@ Group radios on the same horizontal row by adding `inline` boolean property to a
 <CFormCheck inline type="radio" name="inlineRadioOptions" id="inlineCheckbox3" value="option3" label="3 (disabled)" disabled/>
 ```
 
+## Reverse 
+
+Put your radios on the opposite side by adding `reverse` boolean property.
+
+::: demo
+<CFormCheck reverse type="radio" id="reverseOption1" value="option1" label="Reverse radio"/>
+<CFormCheck reverse type="radio" id="reverseOption2" value="option2" label="Disabled reverse radio" disabled/>
+:::
+```vue
+<CFormCheck reverse type="radio" id="reverseOption1" value="option1" label="Reverse radio"/>
+<CFormCheck reverse type="radio" id="reverseOption2" value="option2" label="Disabled reverse radio" disabled/>
+```
+
 ## Without labels
 
 Remember to still provide some form of accessible name for assistive technologies (for instance, using `aria-label`).