Merge pull request #1624 from sheinsight/feat/form-keep-error-above

feat: Form 新增 keepErrorAbove 属性，错误信息显示在提示信息上方

Author: saint3347

docs/api/shineout/form.ts

@@ -1,7 +1,7 @@
 {
   "name": "sheinx",
   "private": true,
-  "version": "3.9.9-beta.15",
+  "version": "3.9.9-beta.16",
   "description": "A react library developed with sheinx",
   "module": "dist/index.js",
   "types": "dist/index.d.ts",

package.json

@@ -12,7 +12,7 @@ const FormItem = (props: FormItemProps) => {
   const { children, jssStyle, className, style, label, tip, required, ...rest } = props;
   const formItemClasses = jssStyle?.formItem?.() as FormItemClasses;
   const { Provider: FormItemContextProvider, ProviderValue, labelConfig, errors, showError, attributes } = useFormItem();
-  const { labelWidth, labelAlign, labelVerticalAlign, inline, keepErrorHeight, keepErrorBelow, colon } = {
+  const { labelWidth, labelAlign, labelVerticalAlign, inline, keepErrorHeight, keepErrorBelow, keepErrorAbove, colon } = {
     ...labelConfig,
     ...rest,
   };
@@ -131,9 +131,11 @@ const FormItem = (props: FormItemProps) => {
       >
         <FormItemContextProvider value={{ ...ProviderValue, label: labelText }}>{children}</FormItemContextProvider>
 
-        {!!tip && (!showError || keepErrorBelow) && <div ref={labelTipRef} className={formItemClasses?.tip}>{tip}</div>}
+        {keepErrorAbove && renderError()}
 
-        {renderError()}
+        {!!tip && (!showError || keepErrorBelow || keepErrorAbove) && <div ref={labelTipRef} className={formItemClasses?.tip}>{tip}</div>}
+
+        {!keepErrorAbove && renderError()}
       </div>
     </div>
   );

packages/base/src/form/form-item.tsx

@@ -87,6 +87,14 @@ export interface FormLabelConfig {
    * @version 3.7.0
    */
   keepErrorBelow?: boolean;
+
+  /**
+   * @en Whether to keep the error message above the tip of the form item, the default is false. Controls the display position of error messages. When enabled, error messages are always displayed above the tip property of the form item. The opposite of keepErrorBelow. Suitable for scenarios where error messages need to be displayed closer to the input. Note: When enabled, keepErrorHeight becomes invalid
+   * @cn 是否保持错误信息在提示信息上方。控制错误信息的显示位置。开启后错误信息始终显示在表单项的 tip 属性上方。与 keepErrorBelow 相反。适用于错误信息需要更靠近输入框的场景。注意：开启后会使 keepErrorHeight 失效
+   * @default false
+   * @version 3.9.9
+   */
+  keepErrorAbove?: boolean;
   /**
    * @en When inline is true, the form is horizontal layout. Arranges form items horizontally, suitable for simple single-line forms or filter forms. When enabled, form items will be displayed on the same line with automatic line wrapping. Usually used for search conditions, filters and other scenarios that need to save vertical space
    * @cn 是否水平布局。将表单项横向排列，适用于简单的单行表单或筛选表单。开启后表单项会在同一行显示，自动换行。通常用于搜索条件、筛选器等需要节省垂直空间的场景

packages/hooks/src/components/use-form/use-form.type.ts

@@ -1,3 +1,9 @@
+## 3.9.9-beta.16
+2026-02-14
+### 🆕 Feature
+- `Form` 新增 `keepErrorAbove` 属性，错误信息独占一行，不再覆盖提示信息 ([#1624](https://github.com/sheinsight/shineout-next/pull/1624))
+
+
 ## 3.9.8-beta.1
 2026-01-09
 ### 🆕 Feature

packages/shineout/src/form/__doc__/changelog.cn.md

@@ -1,10 +1,10 @@
 /**
  * cn - 校验样式
  *    -- 使用 `keepErrorHeight` 使得单行错误提示不会撑开页面高度
- *    -- 使用 `keepErrorBelow` 同时出现提示信息和校验错误信息时，提示信息不会被遮挡
+ *    -- 使用 `keepErrorAbove` 同时出现提示信息和校验错误信息时，错误信息显示在提示信息上方
  * en - validate style
  *    -- Use `keepErrorHeight` so that a single-line error prompt will not stretch the page height
- *    -- Use `keepErrorBelow` so that when both prompt information and validation error information appear, the prompt information will not be blocked
+ *    -- Use `keepErrorAbove` so that when both prompt information and validation error information appear, the error message is displayed above the tip
  */
 
 import React, { useState } from 'react';
@@ -147,7 +147,7 @@ const App: React.FC = () => {
         style={{ maxWidth: 500 }}
         onSubmit={(d) => console.log(d)}
       >
-        <Form.Item required label='Email' tip='88888' keepErrorBelow>
+        <Form.Item required label='Email' tip='88888' keepErrorAbove>
           <Input name='email' title='Email' rules={[rules.required, rules.email]} clearable />
         </Form.Item>
 
@@ -159,7 +159,7 @@ const App: React.FC = () => {
           required
           label='Password'
           tip='At least one letter, one numeral, and 6 - 20 characters.'
-          keepErrorBelow
+          keepErrorAbove
         >
           <Input
             name='password'
@@ -170,7 +170,7 @@ const App: React.FC = () => {
           />
         </Form.Item>
 
-        <Form.Item required label='Age' tip='between 18 and 60' keepErrorBelow>
+        <Form.Item required label='Age' tip='between 18 and 60' keepErrorAbove>
           <Input
             name='age'
             title='Age'
@@ -198,7 +198,7 @@ const App: React.FC = () => {
           required
           label='Favorite Colors'
           tip='select your favorite colors'
-          keepErrorBelow
+          keepErrorAbove
         >
           <Checkbox.Group
             name='colors'