feat(design): add vertical layout support for CheckboxGroup and RadioGroup

packages/design/src/components/checkbox-group/CheckboxGroup.stories.tsx

@@ -47,3 +47,20 @@ export const Playground = {
         );
     },
 };
+
+export const CheckboxGroupVertical = {
+    render() {
+        const [value, setValue] = useState<string[]>([]);
+
+        function handleChange(value: Array<string | number | boolean>) {
+            setValue(value as string[]);
+        }
+
+        return (
+            <CheckboxGroup value={value} onChange={handleChange} direction="vertical">
+                <Checkbox value="test">test</Checkbox>
+                <Checkbox value="test1">test1</Checkbox>
+            </CheckboxGroup>
+        );
+    },
+};

packages/design/src/components/checkbox-group/CheckboxGroup.tsx

@@ -44,6 +44,12 @@ export interface ICheckboxGroupProps {
      */
     disabled?: boolean;
 
+    /**
+     * Direction of the radio group
+     * @default 'horizontal'
+     */
+    direction?: 'horizontal' | 'vertical';
+
     /**
      * The callback function triggered when switching options
      */
@@ -54,7 +60,7 @@ export interface ICheckboxGroupProps {
  * CheckboxGroup Component
  */
 export function CheckboxGroup(props: ICheckboxGroupProps) {
-    const { children, className, style, value, disabled, onChange } = props;
+    const { children, className, style, value, disabled, direction = 'horizontal', onChange } = props;
 
     const handleChange = (item: string | number | boolean) => {
         if (value.includes(item)) {
@@ -64,7 +70,9 @@ export function CheckboxGroup(props: ICheckboxGroupProps) {
         }
     };
 
-    const _className = clsx(className, styles.checkboxGroup);
+    const _className = clsx(className, styles.checkboxGroup, {
+        [styles.checkboxGroupDirectionVertical]: direction === 'vertical',
+    });
 
     return (
         <div className={_className} style={style}>

packages/design/src/components/checkbox-group/index.module.less

@@ -1,4 +1,10 @@
 .checkbox-group {
     display: flex;
     gap: var(--margin-sm);
+
+    &-direction {
+        &-vertical {
+            flex-direction: column;
+        }
+    }
 }

packages/design/src/components/radio-group/RadioGroup.stories.tsx

@@ -47,3 +47,20 @@ export const Playground = {
         );
     },
 };
+
+export const RadioGroupVertical = {
+    render() {
+        const [value, setValue] = useState('');
+
+        function handleChange(value: string | number | boolean) {
+            setValue(value as string);
+        }
+
+        return (
+            <RadioGroup value={value} onChange={handleChange} direction="vertical">
+                <Radio value="test">test</Radio>
+                <Radio value="test1">test1</Radio>
+            </RadioGroup>
+        );
+    },
+};

packages/design/src/components/radio-group/RadioGroup.tsx

@@ -16,12 +16,23 @@
 
 import React from 'react';
 
+import clsx from 'clsx';
 import type { IRadioProps } from '../radio/Radio';
 import styles from './index.module.less';
 
 export interface IRadioGroupProps {
     children: React.ReactNode[];
 
+    /**
+     * The class name of the checkbox group
+     */
+    className?: string;
+
+    /**
+     * The style of the checkbox group
+     */
+    style?: React.CSSProperties;
+
     /**
      * Define which radio is selected
      */
@@ -33,6 +44,12 @@ export interface IRadioGroupProps {
      */
     disabled?: boolean;
 
+    /**
+     * Direction of the radio group
+     * @default 'horizontal'
+     */
+    direction?: 'horizontal' | 'vertical';
+
     /**
      * The callback function triggered when switching options
      */
@@ -43,14 +60,18 @@ export interface IRadioGroupProps {
  * RadioGroup Component
  */
 export function RadioGroup(props: IRadioGroupProps) {
-    const { children, value, disabled = false, onChange } = props;
+    const { children, className, style, value, disabled = false, direction = 'horizontal', onChange } = props;
 
     const handleChange = (value: string | number | boolean) => {
         onChange(value);
     };
 
+    const _className = clsx(className, styles.radioGroup, {
+        [styles.radioGroupDirectionVertical]: direction === 'vertical',
+    });
+
     return (
-        <div className={styles.radioGroup}>
+        <div className={_className} style={style}>
             {React.Children.map(children, (child, index) => {
                 if (React.isValidElement<IRadioProps>(child)) {
                     return React.cloneElement(child, {

packages/design/src/components/radio-group/index.module.less

@@ -1,4 +1,10 @@
 .radio-group {
     display: flex;
     gap: var(--margin-sm);
+
+    &-direction {
+        &-vertical {
+            flex-direction: column;
+        }
+    }
 }