feat(CFormCheck): add reverse option

Author: mrholek

packages/coreui-react/src/components/form/CFormCheck.tsx

@@ -55,7 +55,7 @@ export interface CFormCheckProps
    */
   indeterminate?: boolean
   /**
-   * Group checkboxes or radios on the same horizontal row by adding.
+   * Group checkboxes or radios on the same horizontal row.
    */
   inline?: boolean
   /**
@@ -66,6 +66,12 @@ export interface CFormCheckProps
    * The element represents a caption for a component.
    */
   label?: string | ReactNode
+  /**
+   * Put checkboxes or radios on the opposite side.
+   *
+   * @sinve 4.7.0
+   */
+  reverse?: boolean
   /**
    * Specifies the type of component.
    */
@@ -92,6 +98,7 @@ export const CFormCheck = forwardRef<HTMLInputElement, CFormCheckProps>(
       inline,
       invalid,
       label,
+      reverse,
       type = 'checkbox',
       valid,
       ...rest
@@ -183,6 +190,7 @@ export const CFormCheck = forwardRef<HTMLInputElement, CFormCheckProps>(
               'form-check',
               {
                 'form-check-inline': inline,
+                'form-check-reverse': reverse,
                 'is-invalid': invalid,
                 'is-valid': valid,
               },
@@ -211,6 +219,7 @@ CFormCheck.propTypes = {
   indeterminate: PropTypes.bool,
   inline: PropTypes.bool,
   label: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+  reverse: PropTypes.bool,
   type: PropTypes.oneOf(['checkbox', 'radio']),
   ...CFormControlValidation.propTypes,
 }

packages/docs/content/forms/checkbox.mdx

@@ -60,6 +60,15 @@ 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.
+
+```jsx preview
+<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/content/forms/radio.mdx

@@ -53,6 +53,15 @@ 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 checkboxes on the opposite side by adding `reverse` boolean property.
+
+```jsx preview
+<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`).