Merge pull request #1628 from sheinsight/feat/checkbox-radio-vertical-align

saint3347 · web-flow · commit 76cc7702fb2c · 2026-02-11T17:18:38.000+08:00
feat: Checkbox、Radio 新增 verticalAlign 属性，支持指示器顶对齐
diff --git a/docs/markdown/shineout/changelog-common.md b/docs/markdown/shineout/changelog-common.md
@@ -1,8 +1,3 @@
-## 3.9.9-beta.10
-2026-02-03
-### 💅 Style
-- 优化 `Checkbox`、`Radio` 的文本对齐方式为顶对齐 ([#1612](https://github.com/sheinsight/shineout-next/pull/1612))
-
 ## 3.9.9-beta.6
 2026-01-30
 ### 💅 Style
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "sheinx",
   "private": true,
-  "version": "3.9.9-beta.14",
+  "version": "3.9.9-beta.15",
   "description": "A react library developed with sheinx",
   "module": "dist/index.js",
   "types": "dist/index.d.ts",
diff --git a/packages/base/src/checkbox/checkbox.type.ts b/packages/base/src/checkbox/checkbox.type.ts
@@ -25,6 +25,7 @@ export interface CheckboxClasses {
   darkIndicatorWrapper: string;
   desc: string;
   input: string;
+  wrapperTop: string;
   group: string;
   groupBlock: string;
 }
@@ -59,6 +60,14 @@ export interface SimpleCheckboxProps
    * @private 内部属性
    */
   needStopPropagation?: boolean;
+
+  /**
+   * @en Vertical align of checkbox indicator
+   * @cn 勾选框指示器的垂直对齐方式
+   * @default "middle"
+   * @version 3.9.9
+   */
+  verticalAlign?: 'middle' | 'top';
 }
 
 export interface CheckboxProps<T>
diff --git a/packages/base/src/checkbox/simple-checkbox.tsx b/packages/base/src/checkbox/simple-checkbox.tsx
@@ -7,7 +7,7 @@ import { FormFieldContext } from '../form/form-field-context';
 const { getDataAttribute } = util;
 
 const Checkbox = (props: SimpleCheckboxProps) => {
-  const { jssStyle, className, style, children, renderFooter, size, theme, ...rest } = props;
+  const { jssStyle, className, style, children, renderFooter, size, theme, verticalAlign, ...rest } = props;
   const mouseEvents = util.extractProps(rest, 'mouse');
   const { fieldId } = useContext(FormFieldContext);
   const checkboxStyle = jssStyle?.checkbox?.();
@@ -26,6 +26,7 @@ const Checkbox = (props: SimpleCheckboxProps) => {
     !!disabled && checkboxStyle?.wrapperDisabled,
     !!checked && checkboxStyle?.wrapperChecked,
     props.checked === 'indeterminate' && checkboxStyle?.wrapperIndeterminate,
+    verticalAlign === 'top' && checkboxStyle?.wrapperTop,
   );
 
   const indicatorClass = classNames(
diff --git a/packages/base/src/radio/radio.type.ts b/packages/base/src/radio/radio.type.ts
@@ -24,6 +24,7 @@ export interface RadioClasses {
   indicatorWrapper: string;
   indicator: string;
   desc: string;
+  wrapperTop: string;
   // 组
   group: string;
   groupBlock: string;
@@ -61,6 +62,14 @@ export interface SimpleRadioProps
    * @private 内部属性用于控制热区样式
    */
   theme?: 'dark';
+
+  /**
+   * @en Vertical align of radio indicator
+   * @cn 单选框指示器的垂直对齐方式
+   * @default "middle"
+   * @version 3.9.9
+   */
+  verticalAlign?: 'middle' | 'top';
 }
 
 export interface RadioProps<T> extends Omit<SimpleRadioProps, 'onChange' | 'checked' | 'theme' | 'disabled'> {
diff --git a/packages/base/src/radio/simple-radio.tsx b/packages/base/src/radio/simple-radio.tsx
@@ -5,7 +5,7 @@ import { SimpleRadioProps } from './radio.type';
 import { FormFieldContext } from '../form/form-field-context';
 
 const Radio = (props: SimpleRadioProps) => {
-  const { jssStyle, className, style, children, renderWrapper, size, theme, ...rest } = props;
+  const { jssStyle, className, style, children, renderWrapper, size, theme, verticalAlign, ...rest } = props;
   const mouseEvents = util.extractProps(rest, 'mouse');
   const { fieldId } = useContext(FormFieldContext);
   const radioClasses = jssStyle?.radio?.();
@@ -20,6 +20,7 @@ const Radio = (props: SimpleRadioProps) => {
     !!checked && radioClasses?.wrapperChecked,
     size === 'small' && radioClasses?.wrapperSmall,
     size === 'large' && radioClasses?.wrapperLarge,
+    verticalAlign === 'top' && radioClasses?.wrapperTop,
   ]);
 
   const indicatorClass = classNames(
diff --git a/packages/shineout-style/src/checkbox/checkbox.ts b/packages/shineout-style/src/checkbox/checkbox.ts
@@ -9,7 +9,7 @@ const checkboxStyle: JsStyles<keyof CheckboxClasses> = {
   wrapper: {
     display: 'inline-flex',
     position: 'relative',
-    alignItems: 'var(--soui-checkbox-align-items, flex-start)',
+    alignItems: 'center',
     cursor: 'pointer',
     boxSizing: 'border-box',
     marginRight: token.checkboxGap,
@@ -20,6 +20,12 @@ const checkboxStyle: JsStyles<keyof CheckboxClasses> = {
   },
   wrapperSmall: {},
   wrapperLarge: {},
+  wrapperTop: {
+    alignItems: 'flex-start',
+    '& $indicatorWrapper': {
+      marginTop: token.checkboxIndicatorMarginTop,
+    },
+  },
   input: {},
   wrapperChecked: {},
   wrapperIndeterminate: {},
@@ -32,7 +38,7 @@ const checkboxStyle: JsStyles<keyof CheckboxClasses> = {
     boxSizing: 'border-box',
     width: token.checkboxIconSize,
     height: token.checkboxIconSize,
-    marginTop: 'var(--soui-checkbox-indicator-margin-top, 4px)',
+    // marginTop: token.checkboxIndicatorMarginTop,
     flexShrink: 0,
     '$wrapperSmall &': {
       width: token.checkboxSmallIconSize,
diff --git a/packages/shineout-style/src/list/list.ts b/packages/shineout-style/src/list/list.ts
@@ -12,8 +12,6 @@ const listStyle: JsStyles<ListClassType> = {
     maxHeight: '100%',
     display: 'flex',
     flexDirection: 'column',
-    '--soui-checkbox-indicator-margin-top': 0,
-    '--soui-checkbox-align-items': 'center',
   },
   wrapperBordered: {
     border: `${token.listBorderWidth} solid ${token.listBorderColor}`,
diff --git a/packages/shineout-style/src/radio/radio.ts b/packages/shineout-style/src/radio/radio.ts
@@ -9,7 +9,7 @@ const radioStyle: JsStyles<keyof RadioClasses> = {
   wrapper: {
     display: 'inline-flex',
     position: 'relative',
-    alignItems: 'flex-start',
+    alignItems: 'center',
     cursor: 'pointer',
     boxSizing: 'border-box',
     marginRight: token.radioGap,
@@ -36,6 +36,12 @@ const radioStyle: JsStyles<keyof RadioClasses> = {
       padding: `${token.radioLargeButtonPaddingY} ${token.radioLargeButtonPaddingX}`,
     }
   },
+  wrapperTop: {
+    alignItems: 'flex-start',
+    '& $indicatorWrapper': {
+      marginTop: token.radioIndicatorMarginTop,
+    },
+  },
   wrapperChecked: {},
   wrapperDisabled: {
     cursor: 'not-allowed',
@@ -47,7 +53,6 @@ const radioStyle: JsStyles<keyof RadioClasses> = {
     width: token.radioIconWidth,
     minWidth: token.radioIconWidth,
     height: token.radioIconWidth,
-    marginTop: 4,
     '$wrapperSmall &': {
       width: token.radioSmallIconWidth,
       minWidth: token.radioSmallIconWidth,
diff --git a/packages/shineout-style/src/tree/tree.ts b/packages/shineout-style/src/tree/tree.ts
@@ -287,7 +287,6 @@ const treeStyle: JsStyles<TreeClassType> = {
   checkbox: {
     '&[class*="checkbox-wrapper"]': {
       marginRight: Token.treeCheckboxMarginX,
-      '--soui-checkbox-indicator-margin-top': '0px',
     },
   },
   text: {
diff --git a/packages/shineout/src/checkbox/__doc__/changelog.cn.md b/packages/shineout/src/checkbox/__doc__/changelog.cn.md
@@ -1,80 +1,54 @@
-## 3.8.0-beta.34
-2025-08-14
-
+## 3.9.9-beta.15
+2026-02-11
+### 🆕 Feature
+- `Checkbox` 新增 `verticalAlign` 属性：支持指示器和文字的顶对齐 ([#1628](https://github.com/sheinsight/shineout-next/pull/1628))
 
 
+## 3.8.0-beta.34
+2025-08-14
 ### 🐞 BugFix
-
 - 修复 `Checkbox` 外层套 `<label>` 标签时双重触发导致无法正常勾选的问题 ([#1307](https://github.com/sheinsight/shineout-next/pull/1307))
 
 
 ## 3.6.0
 2025-02-14
-
-
-
 ### 🐞 BugFix
-
 - 修复 `Checkbox` 在Form中使用且传了name时, Checkbox的onChange会触发两次的问题（Regression: since v3.4.3）([#955](https://github.com/sheinsight/shineout-next/pull/955))
 
 
 ## 3.5.8
 2025-02-13
-
-
-
 ### 🐞 BugFix
-
 - 修复 `Checkbox` 触发两次 `onChange` 的问题（Regression: since v3.5.6） ([#929](https://github.com/sheinsight/shineout-next/pull/929))
 
 
 ## 3.5.6
 2025-01-06
-
-
-
 ### 🐞 BugFix
-
 - 修复 `Checkbox.Group` 在嵌套情况下影响内部选中状态的问题 ([#907](https://github.com/sheinsight/shineout-next/pull/907))
 
 
 ## 3.4.4
 2024-10-28
-
-
-
 ### 🐞 BugFix
-
 - 修复 `Checkbox.Group` 在React 18.3.0以上版本中报defaultProps告警的问题 ([#725](https://github.com/sheinsight/shineout-next/pull/725))
 
 
 ## 3.4.3
 2024-10-14
-
-
-
 ### 🐞 BugFix
-
 - 修复`Checkbox`在createPortal中使用时，无法改变勾选状态的问题 ([#710](https://github.com/sheinsight/shineout-next/pull/710))
 - 修复 `Checkbox.Group` 在未传递 `data` 情况下使用 Checkbox 时 disabled 属性失效的问题
  ([#697](https://github.com/sheinsight/shineout-next/pull/697))
 
 
 ## 3.3.7
 2024-09-04
-
-
-
 ### 🐞 BugFix
-
 - 修复 `Checkbox.Group` 的children中的 `Checkbox` 的onChange不触发的问题 ([#638](https://github.com/sheinsight/shineout-next/pull/638))
 
 
 ## 3.3.0
 2024-07-23
-
-
-
 ### 🐞 BugFix
-
 - 修复 `Checkbox.Group` 设置 `size` 属性不生效的问题 ([#582](https://github.com/sheinsight/shineout-next/pull/582))
diff --git a/packages/shineout/src/checkbox/__example__/010-vertical-align.tsx b/packages/shineout/src/checkbox/__example__/010-vertical-align.tsx
@@ -0,0 +1,20 @@
+/**
+ * cn - 指示器顶对齐
+ *    -- 设置 `verticalAlign` 为 "top"，实现指示器和文字顶对齐
+ * en - Vertical Align
+ *    -- Set `verticalAlign` to "top" to achieve vertical align.
+ */
+import React from 'react';
+import { Checkbox } from 'shineout';
+
+const App: React.FC = () => {
+  return (
+    <div>
+      <Checkbox verticalAlign={"top"}>
+        <div style={{ width: 200 }}>Checkbox Checkbox Checkbox Checkbox </div>
+      </Checkbox>
+    </div>
+  );
+};
+
+export default App;
diff --git a/packages/shineout/src/radio/__doc__/changelog.cn.md b/packages/shineout/src/radio/__doc__/changelog.cn.md
@@ -1,3 +1,9 @@
+## 3.9.9-beta.15
+2026-02-11
+### 🆕 Feature
+- `Radio` 新增 `verticalAlign` 属性：支持指示器和文字的顶对齐 ([#1628](https://github.com/sheinsight/shineout-next/pull/1628))
+
+
 ## 3.9.4-beta.8
 2025-12-18
 ### 🆕 Feature
diff --git a/packages/shineout/src/radio/__example__/010-vertical-align.tsx b/packages/shineout/src/radio/__example__/010-vertical-align.tsx
@@ -0,0 +1,20 @@
+/**
+ * cn - 指示器顶对齐
+ *    -- 设置 `verticalAlign` 为 "top"，实现指示器和文字顶对齐
+ * en - Vertical Align
+ *    -- Set `verticalAlign` to "top" to achieve vertical align.
+ */
+import React from 'react';
+import { Radio } from 'shineout';
+
+const App: React.FC = () => {
+  return (
+    <div>
+      <Radio verticalAlign={"top"}>
+        <div style={{ width: 100 }}>Radio Radio Radio Radio </div>
+      </Radio>
+    </div>
+  );
+};
+
+export default App;
diff --git a/packages/theme/src/checkbox/checkbox.ts b/packages/theme/src/checkbox/checkbox.ts
@@ -28,6 +28,7 @@ const checkboxTokens: CheckboxTokens = {
   checkboxLabelFontColor: 'Neutral-text-5',
   checkboxLabelFontSize: 'Font-14',
   checkboxLabelDisabledFontColor: 'Neutral-text-2',
+  checkboxIndicatorMarginTop: 'Spacing-4',
   checkboxGap: 'Spacing-24',
   checkboxBlockGap: 'Spacing-12',
   checkboxSmallIconSize: 'Font-12',
diff --git a/packages/theme/src/checkbox/token.ts b/packages/theme/src/checkbox/token.ts
@@ -60,6 +60,11 @@ const checkboxTokenExtraValue = {
     font: { color: 'Neutral-text-5', size: 'Font-14' },
     disabled: { font: { color: 'Neutral-text-2' } },
   },
+  indicator: {
+    margin: {
+      top: 'Spacing-4',
+    }
+  },
   gap: 'Spacing-24',
   block: { gap: 'Spacing-12' },
   small: {
diff --git a/packages/theme/src/checkbox/type.ts b/packages/theme/src/checkbox/type.ts
@@ -146,6 +146,12 @@ export interface CheckboxTokens {
    * @description 单选框标签禁用时的字体颜色
    */
   checkboxLabelDisabledFontColor: string;
+  /**
+   * @type {string}
+   * @token Spacing-4
+   * @description 单选框undefined外边距undefined
+   */
+  checkboxIndicatorMarginTop: string;
   /**
    * @type {string}
    * @token Spacing-24
diff --git a/packages/theme/src/radio/radio.ts b/packages/theme/src/radio/radio.ts
@@ -22,6 +22,7 @@ const radioTokens: RadioTokens = {
   radioIconCheckedDisabledColor: 'Brand-3',
   radioIconWrapperFill: 'Neutral-fill-2',
   radioIconWrapperDark: 'Neutral-fill-3',
+  radioIndicatorMarginTop: 'Spacing-4',
   radioPaddingY: 'Spacing-4',
   radioButtonPaddingY: 'Spacing-4',
   radioButtonPaddingX: 'Spacing-12',
diff --git a/packages/theme/src/radio/token.ts b/packages/theme/src/radio/token.ts
@@ -47,6 +47,11 @@ const radioTokenExtraValue = {
     },
     wrapper: { fill: 'Neutral-fill-2', dark: 'Neutral-fill-3' },
   },
+  indicator: {
+    margin: {
+      top: 'Spacing-4',
+    }
+  },
   padding: { y: 'Spacing-4' },
   button: {
     padding: { y: 'Spacing-4', x: 'Spacing-12' },
@@ -72,6 +77,7 @@ const radioTokenExtraValue = {
     font: { color: 'Neutral-text-5', size: 'Font-14' },
     disabled: { font: { color: 'Neutral-text-2' } },
   },
+
 };
 
 module.exports = {
diff --git a/packages/theme/src/radio/type.ts b/packages/theme/src/radio/type.ts
@@ -110,6 +110,12 @@ export interface RadioTokens {
    * @description 单选框图标包裹层暗色模式
    */
   radioIconWrapperDark: string;
+  /**
+   * @type {string}
+   * @token Spacing-4
+   * @description 单选框undefined外边距undefined
+   */
+  radioIndicatorMarginTop: string;
   /**
    * @type {string}
    * @token Spacing-4

Original file line number	Diff line number	Diff line change
`@@ -1,7 +1,7 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "sheinx",`
`3`	`3`	`"private": true,`
`4`		`- "version": "3.9.9-beta.14",`
	`4`	`+ "version": "3.9.9-beta.15",`
`5`	`5`	`"description": "A react library developed with sheinx",`
`6`	`6`	`"module": "dist/index.js",`
`7`	`7`	`"types": "dist/index.d.ts",`