diff --git a/packages/opendesign/src/_components/provide.ts b/packages/opendesign/src/_components/provide.ts
new file mode 100644
index 0000000000000000000000000000000000000000..b793f43238627e4b62c690873e7f7a3051051e0a
--- /dev/null
+++ b/packages/opendesign/src/_components/provide.ts
@@ -0,0 +1,5 @@
+import { InjectionKey } from 'vue';
+
+export const innerComponentInjectKey: InjectionKey<{
+  isInnerInput: Boolean;
+}> = Symbol('provide-inner-component');
diff --git a/packages/opendesign/src/_utils/helper.ts b/packages/opendesign/src/_utils/helper.ts
index 119942b065599ba77a0eb0c4c41d72ee6c6e4750..4f8e7fdd649ea92a668d5aaeb7f8db9190be26bf 100644
--- a/packages/opendesign/src/_utils/helper.ts
+++ b/packages/opendesign/src/_utils/helper.ts
@@ -1,3 +1,4 @@
+import { isObject, isUndefined } from './is';
 // 防抖 时间为一个一帧
 export function debounceRAF<T extends (...args: Array<unknown>) => any>(fn: T) {
   let handle = 0;
@@ -98,3 +99,76 @@ export function chunk(arr: any[] = [], size = 1) {
     (v, i) => arr.slice(i * size, i * size + size)
   );
 }
+
+/**
+ * 异步some
+ * @param array 遍历数组
+ * @param judgeFn 判断函数
+ */
+export async function asyncSome<T>(array: Array<T>, judgeFn: (arrayItem: T) => Promise<boolean | undefined>) {
+  for (const iterator of array) {
+    try {
+      if (await judgeFn(iterator)) {
+        return true;
+      }
+    } catch (error) {
+      return false;
+    }
+  }
+  return false;
+}
+
+/**
+ * 根据path从对象中获取值
+ */
+export function getValueByPath(obj: object, path: string) {
+  if (!obj || !path) {
+    return;
+  }
+
+  const keys = path.split('.');
+  if (keys.length === 0) {
+    return;
+  }
+
+  let temp = obj;
+  for (let i = 0; i < keys.length; i++) {
+    if (!isObject(temp)) {
+      return;
+    }
+    temp = temp[keys[i] as keyof typeof temp];
+    if (i === keys.length - 1) {
+      return temp;
+    }
+  }
+}
+
+/**
+ * 根据path设置对象中的值
+ */
+export function setValueByPath(obj: { [k: string]: any }, path: string, value: any) {
+  if (!obj || !path) {
+    return;
+  }
+
+  const keys = path.split('.');
+  if (keys.length === 0) {
+    return;
+  }
+
+  let temp = obj;
+  for (let i = 0; i < keys.length; i++) {
+    if (!isObject(temp)) {
+      throw new TypeError(`Cannot set properties of non-object (setting '${keys[i]}')!`);
+    }
+    const k = keys[i] as keyof typeof temp;
+    if (i === keys.length - 1) {
+      temp[k] = value;
+    } else {
+      if (isUndefined(temp[k])) {
+        temp[k] = Number(keys[i + 1]) ? [] : {};
+      }
+      temp = temp[k];
+    }
+  }
+}
diff --git a/packages/opendesign/src/_utils/is.ts b/packages/opendesign/src/_utils/is.ts
index a956c90fac1353b619bee3f9892d00015e836c33..d16231b11c372cad196899fdaf4f7a235c07346f 100644
--- a/packages/opendesign/src/_utils/is.ts
+++ b/packages/opendesign/src/_utils/is.ts
@@ -27,6 +27,14 @@ export function isFunction(val: unknown): val is Function {
 export function isArray(val: unknown): val is Array<any> {
   return Array.isArray(val);
 }
+
+export function isEmptyArray(val: unknown): val is Array<any> {
+  return isArray(val) && val.length === 0;
+}
+
+export function isEmptyObject(val: unknown): val is {} {
+  return opt.call(val) === '[object object]' && Object.keys(val as Object).length === 0;
+}
 /**
  * 判断日期是否合法
  * @param d
diff --git a/packages/opendesign/src/_utils/typeHelp.ts b/packages/opendesign/src/_utils/typeHelp.ts
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/packages/opendesign/src/_utils/types.ts b/packages/opendesign/src/_utils/types.ts
index d22b38dc3724ea5bfe2f5e6afbf3fa84a10362c7..83eec4249d3ec6438c32156142df4a592faf8508 100644
--- a/packages/opendesign/src/_utils/types.ts
+++ b/packages/opendesign/src/_utils/types.ts
@@ -37,5 +37,6 @@ export type VariantT = (typeof VariantTypes)[number];
 export const ColorTypes = ['normal', 'primary', 'success', 'warning', 'danger'] as const;
 export type ColorT = (typeof ColorTypes)[number];
 
+// 颜色 表单元素
 export const Color2Types = ['normal', 'success', 'warning', 'danger'] as const;
 export type Color2T = (typeof ColorTypes)[number];
diff --git a/packages/opendesign/src/button/OButton.vue b/packages/opendesign/src/button/OButton.vue
index cb7fc5e67c97056cb8d9c2fe0ed63566dae756ac..676cbf040fd7d68abb78a6e404852524d449dfaa 100644
--- a/packages/opendesign/src/button/OButton.vue
+++ b/packages/opendesign/src/button/OButton.vue
@@ -5,6 +5,7 @@ import { getRoundClass } from '../_utils/style-class';
 import { buttonProps } from './types';
 import HtmlTag from '../_components/html-tag';
 import { isEmptySlot } from '../_utils/vue-utils';
+import { computed } from 'vue';
 
 const props = defineProps(buttonProps);
 
@@ -12,6 +13,8 @@ const emit = defineEmits<{
   (e: 'click', evt: MouseEvent): void;
 }>();
 
+const tag = computed(() => (!!props.href ? 'a' : props.tag));
+
 const round = getRoundClass(props, 'btn');
 
 const onClick = (e: MouseEvent) => {
@@ -23,9 +26,9 @@ const onClick = (e: MouseEvent) => {
 </script>
 <template>
   <HtmlTag
-    :tag="!!props.href ? 'a' : props.tag"
+    :tag="tag"
     :href="props.href"
-    type="button"
+    :type="tag === 'button' ? 'button' : ''"
     class="o-btn"
     :class="[
       `o-btn-${props.color}`,
diff --git a/packages/opendesign/src/checkbox-group/OCheckboxGroup.vue b/packages/opendesign/src/checkbox-group/OCheckboxGroup.vue
index 8fd0af07a2115a6d54e4c6d6e74813675f520fac..b719b77c75abdc2f190570956aec3798438c3649 100644
--- a/packages/opendesign/src/checkbox-group/OCheckboxGroup.vue
+++ b/packages/opendesign/src/checkbox-group/OCheckboxGroup.vue
@@ -1,9 +1,11 @@
 <script lang="ts" setup>
-import { computed, provide, ref, toRef, watch } from 'vue';
+import { computed, provide, ref, toRef, watch, inject } from 'vue';
 import { checkboxGroupProps } from './types';
 import { checkboxGroupInjectKey } from './provide';
 import { isArray, isUndefined } from '../_utils/is';
 
+import { formItemInjectKey } from '../form/provide';
+
 const props = defineProps(checkboxGroupProps);
 
 const emits = defineEmits<{
@@ -13,6 +15,9 @@ const emits = defineEmits<{
 
 const realValue = ref(isArray(props.modelValue) ? props.modelValue : props.defaultValue);
 
+// 表单注入，用于规则校验
+const formItemInjection = inject(formItemInjectKey, null);
+
 watch(
   () => props.modelValue,
   (val) => {
@@ -33,6 +38,7 @@ const updateModelValue = (val: Array<string | number>) => {
 
 const onChange = (val: Array<string | number>, ev: Event) => {
   emits('change', val, ev);
+  formItemInjection?.fieldHandlers.onChange?.(val);
 };
 
 provide(checkboxGroupInjectKey, {
diff --git a/packages/opendesign/src/checkbox-group/style/index.scss b/packages/opendesign/src/checkbox-group/style/index.scss
index 18afaab94705d1b9675339023397d1f29fc3bdf8..fe3754c0ddb3d27930cc73488d428bc9b017fac1 100644
--- a/packages/opendesign/src/checkbox-group/style/index.scss
+++ b/packages/opendesign/src/checkbox-group/style/index.scss
@@ -4,6 +4,7 @@
 .o-checkbox-group {
   display: inline-flex;
   flex-wrap: wrap;
+  vertical-align: middle;
 }
 
 .o-checkbox-group-h {
diff --git a/packages/opendesign/src/dialog/ODialog.vue b/packages/opendesign/src/dialog/ODialog.vue
index bd261ad1b2bd7b12e61d338661836d7a017dffad..bc04a68bb18aef0d1ed9b8861832a3c87d4a24f4 100644
--- a/packages/opendesign/src/dialog/ODialog.vue
+++ b/packages/opendesign/src/dialog/ODialog.vue
@@ -16,6 +16,7 @@ const emits = defineEmits<{
   (e: 'change', visible: boolean): void;
   (e: 'update:visible', value: boolean, evt?: MouseEvent): void;
 }>();
+
 const layerRef = ref<InstanceType<typeof OLayer> | null>(null);
 
 const onCloseClick = () => {
@@ -72,10 +73,23 @@ defineExpose({
     <div v-if="$slots.header" class="o-dlg-header">
       <slot name="header"></slot>
     </div>
-    <OScroller v-if="isBodyScroller" class="o-dlg-body" size="small" show-type="hover" v-bind="bodyScrollerOptions">
+    <OScroller
+      v-if="isBodyScroller"
+      class="o-dlg-body"
+      size="small"
+      show-type="hover"
+      v-bind="bodyScrollerOptions"
+      :class="{ 'with-footer': $slots.footer || props.actions }"
+    >
       <slot></slot>
     </OScroller>
-    <div v-else class="o-dlg-body">
+    <div
+      v-else
+      class="o-dlg-body"
+      :class="{
+        'with-footer': $slots.footer || props.actions,
+      }"
+    >
       <slot></slot>
     </div>
     <div v-if="$slots.footer || props.actions" class="o-dlg-footer">
diff --git a/packages/opendesign/src/dialog/__demo__/DialogBasic.vue b/packages/opendesign/src/dialog/__demo__/DialogBasic.vue
index dc4f900e90289e0fc7872b3268de166623000c26..c3fe1a08aaa3296ffa60e605232f042a1d9200c2 100644
--- a/packages/opendesign/src/dialog/__demo__/DialogBasic.vue
+++ b/packages/opendesign/src/dialog/__demo__/DialogBasic.vue
@@ -87,7 +87,7 @@ const onChane = (v: boolean) => {
   <h4>基本</h4>
   <OButton @click="toggleHeadOrFoot('head')">show Header</OButton>
   <OButton @click="toggleHeadOrFoot('foot')">show Footer</OButton>
-  <OButton @click="toggleHalfFull('foot')">Phone half full</OButton>
+  <OButton @click="toggleHalfFull()">Phone half full</OButton>
 
   <section class="wrap">
     <OButton @click="toggle(true, 'auto')">Open auto</OButton>
diff --git a/packages/opendesign/src/dialog/style/style.scss b/packages/opendesign/src/dialog/style/style.scss
index df29cf7f0c2fb7315f2f07b5f72655a288cd4f4c..502b42841d009cbab72cbd36e888bf5211e6fd12 100644
--- a/packages/opendesign/src/dialog/style/style.scss
+++ b/packages/opendesign/src/dialog/style/style.scss
@@ -59,7 +59,7 @@
     border-top-right-radius: 0;
     padding-top: var(--dlg-padding-body-top);
   }
-  &:has(+ .o-dlg-footer) {
+  &.with-footer {
     border-bottom-left-radius: 0;
     border-bottom-right-radius: 0;
     padding-bottom: var(--dlg-padding-body-bottom);
diff --git a/packages/opendesign/src/form/OForm.vue b/packages/opendesign/src/form/OForm.vue
index d288ca86cbe1511f747c351f566cb9599cfc1cdb..21c4e7fa7819e7f873b40ed66311ef505cf834f2 100644
--- a/packages/opendesign/src/form/OForm.vue
+++ b/packages/opendesign/src/form/OForm.vue
@@ -1,4 +1,84 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { provide, computed } from 'vue';
+import { formInjectKey } from './provide';
+import { formProps, FiledInfoT } from './types';
+import { getFlexValue } from './form';
+import { isFunction } from '../_utils/is';
+const props = defineProps(formProps);
+
+const align = computed(() => getFlexValue(props.labelAlign));
+const justify = computed(() => getFlexValue(props.labelJustify));
+
+const filedList: FiledInfoT[] = [];
+
+const addFiled = (filedItem: FiledInfoT) => {
+  filedList.push(filedItem);
+};
+const removeFiled = (filed: string) => {
+  const idx = filedList.findIndex((item) => item.filed === filed);
+  filedList.splice(idx, 1);
+};
+
+const doValidate = (filed?: string | string[]) => {
+  const filedNames = filed ? ([] as string[]).concat(filed) : [];
+
+  filedList.forEach((item) => {
+    if (filedNames.length === 0 || (item.filed && filedNames.includes(item.filed))) {
+      item?.validate?.('change');
+    }
+  });
+};
+const clearValidate = (filed?: string | string[], onClear?: (filed: FiledInfoT) => void) => {
+  const filedNames = filed ? ([] as string[]).concat(filed) : [];
+  filedList.forEach((item) => {
+    if (filedNames.length === 0 || (item.filed && filedNames.includes(item.filed))) {
+      item.clearValidate();
+      if (isFunction(onClear)) {
+        onClear(item);
+      }
+    }
+  });
+};
+const resetFields = (filed?: string | string[]) => {
+  clearValidate(filed, (item: FiledInfoT) => {
+    // 重置表单
+    item.resetFiled();
+  });
+};
+
+const onSubmit = () => {
+  doValidate();
+};
+
+provide(formInjectKey, {
+  model: props.model,
+  addFiled,
+  removeFiled,
+});
+
+defineExpose({
+  validate: doValidate,
+  resetFields,
+  clearValidate,
+});
+</script>
 <template>
-  <div class="o-form"></div>
+  <form
+    class="o-form"
+    :class="[
+      {
+        'o-form-has-required': props.hasRequired,
+      },
+      `o-form-layout-${props.layout}`,
+    ]"
+    :style="{
+      '--form-label-width': props.labelWidth,
+      '--form-label-align': props.labelAlign,
+      '--form-label-justify': justify,
+      '--form-item-align': align,
+    }"
+    @submit.prevent="onSubmit"
+  >
+    <slot></slot>
+  </form>
 </template>
diff --git a/packages/opendesign/src/form/OFormItem.vue b/packages/opendesign/src/form/OFormItem.vue
new file mode 100644
index 0000000000000000000000000000000000000000..5792a1b600d32d83d24f64ad3d8361bd34fa84df
--- /dev/null
+++ b/packages/opendesign/src/form/OFormItem.vue
@@ -0,0 +1,181 @@
+<script setup lang="ts">
+import { computed, ref, provide, inject, onMounted, onBeforeUnmount } from 'vue';
+import { RequiredRuleT, formItemProps, TriggerT, FieldResultT } from './types';
+import { formItemInjectKey, formInjectKey, formCtx } from './provide';
+import { getFlexValue, normalizeRules } from './form';
+import { isArray } from '../_utils/is';
+import { asyncSome, getValueByPath, setValueByPath } from '../_utils/helper';
+import logger from '../_utils/log';
+
+const requireSymbol = '*';
+
+const props = defineProps(formItemProps);
+
+const formInject = inject<Partial<formCtx>>(formInjectKey, {});
+
+const align = computed(() => getFlexValue(props.labelAlign));
+const justify = computed(() => getFlexValue(props.labelJustify));
+const isRequired = computed(() => {
+  if (props.required) {
+    return true;
+  } else if (isArray(props.rules)) {
+    return props.rules.some((item) => (item as RequiredRuleT).required === true);
+  }
+  return false;
+});
+
+const rules = computed(() => normalizeRules(props.rules, props.required));
+const ruleTriggers = computed(() => {
+  let triggers: TriggerT[] = [];
+  rules.value.forEach((item) => {
+    if (item.triggers) {
+      triggers = triggers.concat(item.triggers);
+    }
+  });
+  return Array.from(new Set(triggers));
+});
+
+const fieldResult = ref<FieldResultT | null>(null);
+
+const initialVal = formInject.model && props.field ? getValueByPath(formInject.model, props.field) : void 0;
+
+const runValidate = (trigger: TriggerT = 'change') => {
+  if (!props.field || !formInject.model) {
+    return;
+  }
+  // 判断该事件是否存在校验规则
+  if (!ruleTriggers.value.includes(trigger)) {
+    return;
+  }
+  const value = getValueByPath(formInject.model, props.field);
+  // logger.info(trigger, props.field, value);
+
+  fieldResult.value = null;
+  return asyncSome(rules.value, async (item) => {
+    if (item.triggers?.includes(trigger)) {
+      if (!item.validator) {
+        return false;
+      }
+      try {
+        const rlt = await item.validator?.(value);
+        if (rlt?.type === 'danger') {
+          fieldResult.value = {
+            type: 'danger',
+            message: rlt.message ? [rlt.message] : [],
+          };
+          return true;
+        } else if (rlt?.type === 'warning') {
+          if (!fieldResult.value) {
+            fieldResult.value = {
+              type: 'warning',
+              message: rlt.message ? [rlt.message] : [],
+            };
+          } else if (rlt.message) {
+            fieldResult.value.message?.push(rlt.message);
+          }
+          return false;
+        }
+      } catch (e) {
+        logger.error('failed to validate rules');
+      }
+
+      return false;
+    }
+  });
+};
+
+const clearValidate = () => {
+  if (!props.field || !formInject.model) {
+    return;
+  }
+  fieldResult.value = null;
+};
+
+const resetFiled = () => {
+  if (formInject.model && props.field) {
+    setValueByPath(formInject.model, props.field, initialVal);
+  }
+};
+
+const fieldHandlers = {
+  onChange() {
+    runValidate('change');
+  },
+  onFocus() {
+    runValidate('focus');
+  },
+  onBlur() {
+    runValidate('blur');
+  },
+};
+
+onMounted(() => {
+  if (props.field) {
+    formInject.addFiled?.({
+      filed: props.field,
+      validate: runValidate,
+      clearValidate,
+      resetFiled,
+    });
+    // logger.info('addFiled', props.field);
+  }
+});
+
+onBeforeUnmount(() => {
+  if (props.field) {
+    formInject.removeFiled?.(props.field);
+    // logger.info('removeFiled', props.field);
+  }
+});
+provide(formItemInjectKey, {
+  fieldHandlers,
+  fieldResult,
+});
+</script>
+<template>
+  <div
+    class="o-form-item"
+    :class="[
+      {
+        'o-form-item-required': isRequired,
+        'o-form-item-danger': fieldResult?.type === 'danger',
+        'o-form-item-warning': fieldResult?.type === 'warning',
+      },
+    ]"
+    :style="{
+      '--form-label-width': props.labelWidth,
+      '--form-label-align': align,
+      '--form-label-justify': justify,
+    }"
+  >
+    <div class="o-form-item-label">
+      <span
+        class="o-form-require-symbol"
+        :class="{
+          visible: isRequired,
+        }"
+      >
+        <slot name="symbol">{{ requireSymbol }}</slot>
+      </span>
+      <slot name="label">
+        <span>{{ props.label }}</span>
+      </slot>
+    </div>
+    <div class="o-form-item-main">
+      <div class="o-form-item-main-wrap">
+        <slot></slot>
+      </div>
+      <div v-if="fieldResult?.message" class="o-form-item-message" :class="`type-${fieldResult.type}`">
+        <slot name="message" :message="fieldResult?.message" :type="fieldResult?.type">
+          <div v-if="!isArray(fieldResult?.message)">{{ fieldResult?.message }}</div>
+          <template v-else>
+            <div v-for="item in fieldResult?.message" :key="item">{{ item }}</div>
+          </template>
+        </slot>
+      </div>
+      <div v-if="$slots.extra" class="o-form-item-extra">
+        <slot name="extra"> </slot>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/packages/opendesign/src/form/__demo__/FormBasic.vue b/packages/opendesign/src/form/__demo__/FormBasic.vue
index af2f495ff8874f22388cae6639ca47dec1effb4e..8b59aaecd5193550782ffb047902dbc75c1286bd 100644
--- a/packages/opendesign/src/form/__demo__/FormBasic.vue
+++ b/packages/opendesign/src/form/__demo__/FormBasic.vue
@@ -1,5 +1,88 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { ref } from 'vue';
+import { OForm, OFormItem } from '../index';
+import '../../input/style';
+import { OInput } from '../../input';
+import '../../select/style';
+import { OSelect } from '../../select';
+import '../../option/style';
+import { OOption } from '../../option';
+import '../../textarea/style';
+import { OTextarea } from '../../textarea';
+
+const options = [
+  { label: 'option 1', value: 'opt1' },
+  { label: 'long long long long long long long long long long long long text option 2', value: 'opt2' },
+  { label: 'option 3', value: 'opt3' },
+  { label: 'option 4', value: 'opt4' },
+];
+const layout = ref<'h' | 'v' | 'inline'>('h');
+const changeLayout = (l: 'h' | 'v' | 'inline') => {
+  layout.value = l;
+};
+const labelAlign = ref<'top' | 'bottom' | 'center'>('top');
+const changelabelAlign = (l: 'top' | 'bottom' | 'center') => {
+  labelAlign.value = l;
+};
+const labelJustify = ref<'left' | 'right' | 'center'>('left');
+const changelabelJustify = (l: 'left' | 'right' | 'center') => {
+  labelJustify.value = l;
+};
+const labelWidth = ref<string>('30%');
+const changelabelWidth = (l: '30%' | '15%' | '200px') => {
+  labelWidth.value = l;
+};
+</script>
 <template>
-  <div class="page-demo"></div>
+  <h4>基本</h4>
+
+  <section>
+    <div class="row">
+      Layout:
+      <span class="link" :class="{ current: layout === 'h' }" @click="changeLayout('h')">水平</span>
+      <span class="link" :class="{ current: layout === 'v' }" @click="changeLayout('v')">垂直</span>
+      <span class="link" :class="{ current: layout === 'inline' }" @click="changeLayout('inline')">行内</span>
+
+      Label Align:
+      <span class="link" :class="{ current: labelAlign === 'top' }" @click="changelabelAlign('top')">顶部对齐</span>
+      <span class="link" :class="{ current: labelAlign === 'bottom' }" @click="changelabelAlign('bottom')">底部对齐</span>
+      <span class="link" :class="{ current: labelAlign === 'center' }" @click="changelabelAlign('center')">居中</span>
+
+      Label Justify:
+      <span class="link" :class="{ current: labelJustify === 'left' }" @click="changelabelJustify('left')">左对齐</span>
+      <span class="link" :class="{ current: labelJustify === 'right' }" @click="changelabelJustify('right')">右对齐</span>
+      <span class="link" :class="{ current: labelJustify === 'center' }" @click="changelabelJustify('center')">居中</span>
+    </div>
+    <div class="row">
+      Label Width:
+      <span class="link" :class="{ current: labelWidth === '30%' }" @click="changelabelWidth('30%')">30%</span>
+      <span class="link" :class="{ current: labelWidth === '15%' }" @click="changelabelWidth('15%')">15%</span>
+      <span class="link" :class="{ current: labelWidth === '200px' }" @click="changelabelWidth('200px')">200px</span>
+    </div>
+    <OForm class="form" has-required :layout="layout" :label-align="labelAlign" :label-justify="labelJustify" :label-width="labelWidth">
+      <OFormItem label="标题文本1" required>
+        <OInput />
+      </OFormItem>
+      <OFormItem label="标题文本2标题文本2标题文本2标题文本2标题文本2标题文本2标题文本2">
+        <OSelect>
+          <OOption v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
+        </OSelect>
+      </OFormItem>
+      <OFormItem label="标题文本2 width：20%" label-width="20%">
+        <OTextarea />
+      </OFormItem>
+    </OForm>
+  </section>
 </template>
-<style lang="scss"></style>
+<style lang="scss">
+.form {
+  width: 100%;
+}
+.link {
+  cursor: pointer;
+  color: var(--o-color-success1);
+  &.current {
+    color: var(--o-color-danger1);
+  }
+}
+</style>
diff --git a/packages/opendesign/src/form/__demo__/FormRules.vue b/packages/opendesign/src/form/__demo__/FormRules.vue
new file mode 100644
index 0000000000000000000000000000000000000000..7f6aa017cf0500369b35617057699b4e0efbf08b
--- /dev/null
+++ b/packages/opendesign/src/form/__demo__/FormRules.vue
@@ -0,0 +1,280 @@
+<script setup lang="ts">
+import { ref, reactive, computed } from 'vue';
+import { OForm, OFormItem } from '../index';
+import { RulesT } from '../types';
+import '../../input/style';
+import { OInput } from '../../input';
+import '../../input-number/style';
+import { OInputNumber } from '../../input-number';
+import '../../select/style';
+import { OSelect } from '../../select';
+import '../../option/style';
+import { OOption } from '../../option';
+import '../../textarea/style';
+import { OTextarea } from '../../textarea';
+import '../../checkbox/style';
+import { OCheckbox } from '../../checkbox';
+import '../../checkbox-group/style';
+import { OCheckboxGroup } from '../../checkbox-group';
+import '../../radio/style';
+import { ORadio } from '../../radio';
+import '../../radio-group/style';
+import { ORadioGroup } from '../../radio-group';
+import '../../upload/style';
+import { OUpload, UploadFileT } from '../../upload';
+import '../../button/style';
+import { OButton } from '../../button';
+
+const options = [
+  { label: 'option 1', value: 1 },
+  { label: 'option 2', value: 2 },
+  { label: 'option 3', value: 3 },
+  { label: 'option 4', value: 4 },
+];
+
+const submit = () => {
+  console.log('submit');
+};
+
+const formModel = reactive({
+  a: {
+    input1: '',
+  },
+  inputNumber: 1,
+  input2: '123',
+  select1: '',
+  textarea1: '',
+  checkbox: [],
+  radio: '',
+  upload: [],
+});
+
+const inputRules: RulesT[] = [
+  {
+    required: true,
+    message: 'required message',
+    triggers: ['blur', 'change'],
+  },
+  {
+    validator: (value?: any) => {
+      if (value === '123') {
+        return {
+          type: 'danger',
+          message: '不能输入123',
+        };
+      }
+    },
+  },
+  {
+    validator: (value?: any) => {
+      if (isNaN(Number(value))) {
+        return {
+          type: 'danger',
+          message: '需要输入数字',
+        };
+      }
+    },
+  },
+
+  {
+    validator: (value?: any) => {
+      const n = Number(value);
+      if (n > 10) {
+        return {
+          type: 'warning',
+          message: '需要小于10数字',
+        };
+      }
+    },
+  },
+  {
+    validator: (value?: any) => {
+      const n = Number(value);
+      if (n % 2 !== 0) {
+        return {
+          type: 'warning',
+          message: '需要输入偶数',
+        };
+      }
+    },
+  },
+];
+const selectRules: RulesT[] = [
+  {
+    required: true,
+    message: 'required message',
+  },
+  {
+    validator: (value?: any) => {
+      if (value !== 1) {
+        return {
+          type: value > 3 ? 'success' : 'warning',
+          message: '建议大于3',
+        };
+      } else {
+        return {
+          type: 'danger',
+          message: '不能小于2',
+        };
+      }
+    },
+  },
+];
+
+const inputNumberRules: RulesT[] = [
+  {
+    validator: (value: number) => {
+      if (value % 2 === 0) {
+        return {
+          type: 'danger',
+          message: '必须是奇数',
+        };
+      }
+      if (value > 10) {
+        return {
+          type: 'warning',
+          message: '数字建议小于10',
+        };
+      }
+    },
+  },
+];
+
+const checkboxRules: RulesT[] = [
+  {
+    required: true,
+    message: 'required message',
+  },
+  {
+    validator: (value?: any[]) => {
+      if (!value?.includes(1)) {
+        return {
+          type: 'danger',
+          message: '1必选',
+        };
+      }
+      if (!value?.includes(2)) {
+        return {
+          type: 'warning',
+          message: '建议选择2',
+        };
+      }
+    },
+  },
+];
+
+const radioRules: RulesT[] = [
+  {
+    required: true,
+    message: 'required message',
+  },
+  {
+    validator: (value: number) => {
+      if (value < 3) {
+        return {
+          type: 'warning',
+          message: '建议选项小于3',
+        };
+      }
+    },
+  },
+];
+
+const uploadRules: RulesT[] = [
+  {
+    required: true,
+    message: '请至少上传一个文件',
+  },
+  {
+    validator: (value: UploadFileT[]) => {
+      if (value.length <= 2) {
+        return {
+          type: 'warning',
+          message: '建议上传多与2个文件',
+        };
+      }
+    },
+  },
+];
+const onUploadChange = (value: UploadFileT[]) => {
+  (formModel.upload as UploadFileT[]) = value;
+};
+
+const values = computed(() =>
+  Object.keys(formModel).map((k) => {
+    return `${k}: ${JSON.stringify(formModel[k as keyof typeof formModel])}`;
+  })
+);
+console.log(values);
+
+const formRef = ref<InstanceType<typeof OForm>>();
+const reset = () => {
+  formRef.value?.resetFields();
+};
+const clear = () => {
+  formRef.value?.clearValidate();
+};
+</script>
+<template>
+  <h4>校验</h4>
+
+  <section>
+    <OForm ref="formRef" class="form" has-required :model="formModel">
+      <OFormItem label="必选文本1" required field="input2">
+        <OInput v-model="formModel.input2" />
+        <template #message="{ type, message }"> type: {{ type }} | message: {{ message.join('|') }} </template>
+      </OFormItem>
+      <OFormItem label="标题文本1" :rules="inputRules" field="a.input1">
+        <OInput v-model="formModel.a.input1" />
+      </OFormItem>
+      <OFormItem label="标题文本1" :rules="inputNumberRules" field="inputNumber">
+        <OInputNumber v-model="formModel.inputNumber" />
+      </OFormItem>
+      <OFormItem label="标题文本2" :rules="selectRules" field="select1">
+        <OSelect v-model="formModel.select1" clearable>
+          <OOption v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
+        </OSelect>
+      </OFormItem>
+      <OFormItem label="标题文本3" :rules="inputRules" field="textarea1">
+        <OTextarea v-model="formModel.textarea1" />
+      </OFormItem>
+      <OFormItem label="标题文本3" :rules="checkboxRules" field="checkbox">
+        <OCheckboxGroup v-model="formModel.checkbox">
+          <OCheckbox ref="checkBoxRef2" :value="1">选项1</OCheckbox>
+          <OCheckbox :value="2">选项2</OCheckbox>
+          <OCheckbox :value="3">选项3</OCheckbox>
+        </OCheckboxGroup>
+      </OFormItem>
+      <OFormItem label="标题文本3" :rules="radioRules" field="radio">
+        <ORadioGroup v-model="formModel.radio">
+          <ORadio ref="ORadioRef2" :value="1">选项1</ORadio>
+          <ORadio :value="2">选项2</ORadio>
+          <ORadio :value="3">选项3</ORadio>
+        </ORadioGroup>
+      </OFormItem>
+      <OFormItem label="标题文本3" :rules="uploadRules" field="upload">
+        <OUpload btn-label="上传(单选)" multiple color="normal" variant="solid" @select="onUploadChange" />
+      </OFormItem>
+      <div>
+        <OButton type="submit">提交</OButton>
+        <OButton @click="reset">重置</OButton>
+        <OButton @click="clear">清除校验</OButton>
+      </div>
+      <div class="values">
+        <p v-for="item in values" :key="item">{{ item }}</p>
+      </div>
+    </OForm>
+  </section>
+</template>
+<style lang="scss">
+.form {
+  width: 100%;
+}
+.link {
+  cursor: pointer;
+  color: var(--o-color-success1);
+  &.current {
+    color: var(--o-color-danger1);
+  }
+}
+</style>
diff --git a/packages/opendesign/src/form/__demo__/FormSlots.vue b/packages/opendesign/src/form/__demo__/FormSlots.vue
new file mode 100644
index 0000000000000000000000000000000000000000..e948e5061f3ccffb23f69e9457e774f4add86feb
--- /dev/null
+++ b/packages/opendesign/src/form/__demo__/FormSlots.vue
@@ -0,0 +1,58 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { OForm, OFormItem } from '../index';
+import '../../input/style';
+import { OInput } from '../../input';
+import '../../select/style';
+import { OSelect } from '../../select';
+import '../../option/style';
+import { OOption } from '../../option';
+import '../../textarea/style';
+import { OTextarea } from '../../textarea';
+
+const options = [
+  { label: 'option 1', value: 'opt1' },
+  { label: 'long long long long long long long long long long long long text option 2', value: 'opt2' },
+  { label: 'option 3', value: 'opt3' },
+  { label: 'option 4', value: 'opt4' },
+];
+</script>
+<template>
+  <h4>插槽</h4>
+  <section>
+    <div class="row">
+      <OForm class="form" has-required layout="h">
+        <OFormItem label="标题文本1" required>
+          <template #label> 自定义label</template>
+          <OInput />
+          <template #extra> 这是一段额外的消息 </template>
+        </OFormItem>
+        <OFormItem label="标题文本1" required>
+          <OInput />
+          <template #extra> 这是一段额外的消息 </template>
+        </OFormItem>
+        <OFormItem label="标题文本2标题文本2标题文本2标题文本2标题文本2标题文本2标题文本2">
+          <OSelect>
+            <OOption v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
+          </OSelect>
+        </OFormItem>
+        <OFormItem label="标题文本2 ">
+          <OTextarea />
+          <template #extra> 这是一段额外的消息 </template>
+        </OFormItem>
+      </OForm>
+    </div>
+  </section>
+</template>
+<style lang="scss">
+.form {
+  width: 100%;
+}
+.link {
+  cursor: pointer;
+  color: var(--o-color-success1);
+  &.current {
+    color: var(--o-color-danger1);
+  }
+}
+</style>
diff --git a/packages/opendesign/src/form/__demo__/IndexForm.vue b/packages/opendesign/src/form/__demo__/TheIndex.vue
similarity index 44%
rename from packages/opendesign/src/form/__demo__/IndexForm.vue
rename to packages/opendesign/src/form/__demo__/TheIndex.vue
index 8bc968ef82cb015567eddcc78abb779cb2f0d2a1..bb167a9253abaadb7a4c491108d8848d2937d2cf 100644
--- a/packages/opendesign/src/form/__demo__/IndexForm.vue
+++ b/packages/opendesign/src/form/__demo__/TheIndex.vue
@@ -1,12 +1,15 @@
 <script setup lang="ts">
 import '../style';
-import '../../option/style';
 
-import InputBasic from './InputBasic.vue';
+import FormBasic from './FormBasic.vue';
+import FormSlots from './FormSlots.vue';
+import FormRules from './FormRules.vue';
 </script>
 <template>
   <div class="page-demo">
-    <InputBasic />
+    <FormRules />
+    <FormBasic />
+    <FormSlots />
   </div>
 </template>
 <style lang="scss"></style>
diff --git a/packages/opendesign/src/form/form.ts b/packages/opendesign/src/form/form.ts
index 66b05bed5942a55826be60be77db818031547dea..168a3287876bba3eb34cbfe86b033e3642e4c47b 100644
--- a/packages/opendesign/src/form/form.ts
+++ b/packages/opendesign/src/form/form.ts
@@ -1,4 +1,5 @@
-import { isNull, isUndefined } from '../_utils/is';
+import { isArray, isEmptyArray, isEmptyObject, isFunction, isNull, isUndefined } from '../_utils/is';
+import { RequiredRuleT, RulesT, TypeRuleT, ValidatorRuleT } from './types';
 
 export function toInputString(val: unknown): string {
   if (isUndefined(val) || isNull(val) || (typeof val === 'number' && isNaN(val as number))) {
@@ -6,3 +7,54 @@ export function toInputString(val: unknown): string {
   }
   return String(val);
 }
+
+export function getFlexValue(val?: 'top' | 'center' | 'bottom' | 'left' | 'center' | 'right'): string {
+  if (!val) {
+    return '';
+  }
+  if (['top', 'left'].includes(val)) {
+    return 'flex-start';
+  } else if (['bottom', 'right'].includes(val)) {
+    return 'flex-end';
+  } else if ('center' === val) {
+    return 'center';
+  }
+  return '';
+}
+
+export function normalizeRules(rules?: RulesT[], required?: boolean): Array<ValidatorRuleT> {
+  const _rules = rules || [];
+  if (required && (_rules.length == 0 || _rules.some((item) => !(item as RequiredRuleT).required))) {
+    _rules.unshift({
+      required: true,
+      message: 'required',
+    });
+  }
+  return _rules.map((item) => {
+    const triggers = isArray(item.triggers) ? item.triggers : [item.triggers ?? 'change'];
+    if ((item as RequiredRuleT).required) {
+      return {
+        triggers,
+        validator: (value: any) => ({
+          type: !isNull(value) && !isUndefined(value) && value !== '' && !isEmptyArray(value) && !isEmptyObject(value) ? 'success' : 'danger',
+          message: (item as RequiredRuleT).message,
+        }),
+      };
+    } else if ((item as TypeRuleT).type) {
+      return {
+        triggers,
+        validator: (value: any) => ({
+          type: typeof value === (item as TypeRuleT).type ? 'success' : 'danger',
+          message: (item as TypeRuleT).message,
+        }),
+      };
+    } else if (isFunction((item as ValidatorRuleT).validator)) {
+      return {
+        triggers,
+        validator: (item as ValidatorRuleT).validator,
+      };
+    } else {
+      return {};
+    }
+  });
+}
diff --git a/packages/opendesign/src/form/index.ts b/packages/opendesign/src/form/index.ts
index 02f3334b803fe8b4991f0de43b40dc1131d97d59..9720410421ef8925abaf9c0d9ad7a5e05476d0a4 100644
--- a/packages/opendesign/src/form/index.ts
+++ b/packages/opendesign/src/form/index.ts
@@ -1,9 +1,11 @@
 import _OForm from './OForm.vue';
+import OFormItem from './OFormItem.vue';
 import type { App } from 'vue';
 
 const OForm = Object.assign(_OForm, {
+  OFormItem,
   install(app: App) {
     app.component(_OForm.name, _OForm);
   },
 });
-export { OForm };
+export { OForm, OFormItem };
diff --git a/packages/opendesign/src/form/provide.ts b/packages/opendesign/src/form/provide.ts
new file mode 100644
index 0000000000000000000000000000000000000000..4ad612b68ef9af6d66e0c441314cf1a965e262af
--- /dev/null
+++ b/packages/opendesign/src/form/provide.ts
@@ -0,0 +1,22 @@
+import { InjectionKey, Ref } from 'vue';
+import { FieldResultT, FiledInfoT } from './types';
+
+type FieldHandlersT = {
+  onChange?: (value: any, event?: Event) => void;
+  onInput?: (value: any, event?: Event) => void;
+  onFocus?: (value: any, event?: FocusEvent) => void;
+  onBlur?: (value: any, event?: FocusEvent) => void;
+};
+export interface formCtx {
+  // labelWidth?: ComputedRef<string | undefined>;
+  model?: object;
+  addFiled: (filed: FiledInfoT) => void;
+  removeFiled: (filed: string) => void;
+}
+
+export const formInjectKey: InjectionKey<formCtx> = Symbol('provide-form');
+export interface formItemCtx {
+  fieldHandlers: FieldHandlersT;
+  fieldResult: Ref<FieldResultT | null>;
+}
+export const formItemInjectKey: InjectionKey<formItemCtx> = Symbol('provide-form-item');
diff --git a/packages/opendesign/src/form/style/index.scss b/packages/opendesign/src/form/style/index.scss
index b06313985df79360d953f71fe2bc2a669660667b..504d59c44eea7243e3faa4e454b7675ea8b98768 100644
--- a/packages/opendesign/src/form/style/index.scss
+++ b/packages/opendesign/src/form/style/index.scss
@@ -1,11 +1,2 @@
-@use '../../_styles/mixin.scss' as *;
-@use './var.scss';
-
-.o-form {
-  cursor: pointer;
-  color: var(--input-color);
-  display: inline-flex;
-  height: var(--input-height);
-  font-size: var(--input-text-size);
-  line-height: var(--input-text-height);
-}
+@use './style.scss' as *;
+@use './media.scss' as *;
diff --git a/packages/opendesign/src/form/style/media.scss b/packages/opendesign/src/form/style/media.scss
new file mode 100644
index 0000000000000000000000000000000000000000..d7abf91f1e949bf9959bde6ccdcd704f5b68f0df
--- /dev/null
+++ b/packages/opendesign/src/form/style/media.scss
@@ -0,0 +1,5 @@
+@use '../../_styles/mixin.scss' as *;
+@use './var.scss';
+
+.o-form {
+}
diff --git a/packages/opendesign/src/form/style/style.scss b/packages/opendesign/src/form/style/style.scss
new file mode 100644
index 0000000000000000000000000000000000000000..775ef709d67a6ea2254d94a7d7760536b55683aa
--- /dev/null
+++ b/packages/opendesign/src/form/style/style.scss
@@ -0,0 +1,106 @@
+@use '../../_styles/mixin.scss' as *;
+@use './var.scss';
+
+.o-form-layout-inline {
+  display: flex;
+  flex-wrap: wrap;
+  .o-form-item {
+    margin: 0 var(--form-item-gap) var(--form-item-gap) 0;
+  }
+}
+.o-form-layout-h {
+  &.o-form-has-required {
+    .o-form-require-symbol {
+      display: block;
+    }
+  }
+}
+
+.o-form-layout-h,
+.o-form-layout-v {
+  .o-form-item {
+    margin-bottom: var(--form-item-gap);
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+}
+.o-form-item-danger,
+.o-form-item-warning {
+  &.o-form-item {
+    margin-bottom: 0;
+  }
+}
+.o-form-layout-v {
+  .o-form-item {
+    display: block;
+  }
+}
+.o-form-item {
+  display: var(--form-item-display, flex);
+  align-items: var(--form-item-align);
+}
+
+.o-form-item-label {
+  display: inline-flex;
+  align-items: center;
+  max-width: var(--form-label-max-width);
+  justify-content: var(--form-label-justify);
+  flex: 0 0 var(--form-label-width);
+  width: var(--form-label-width);
+  .o-form-layout-h &,
+  .o-form-layout-inline & {
+    margin: var(--form-label-gap-top) 0;
+
+    + .o-form-item-main {
+      margin-left: var(--form-label-main-gap);
+    }
+  }
+}
+
+.o-form-require-symbol {
+  color: var(--o-color-danger1);
+  font-size: var(--o-font_size-tip2);
+  line-height: 1;
+  margin-right: 4px;
+  font-family: monospace;
+  opacity: 0;
+  transition: opacity var(--o-easing-linear) var(--o-duration-m3);
+  display: none;
+  font-weight: bold;
+  &.visible {
+    opacity: 1;
+    display: block;
+  }
+}
+
+.o-form-item-main {
+  flex: 1;
+}
+.o-form-item-main-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  width: 100%;
+  min-height: 32px;
+}
+
+.o-form-item-extra {
+  margin-top: 4px;
+  font-size: var(--o-font_size-tip2);
+  line-height: var(--o-line_height-tip2);
+  color: var(--o-color-info3);
+}
+.o-form-item-message {
+  padding-top: 4px;
+  font-size: var(--o-font_size-tip2);
+  line-height: var(--o-line_height-tip2);
+  color: var(--o-color-info3);
+  min-height: var(--form-item-gap);
+  &.type-warning {
+    color: var(--o-color-warning1);
+  }
+  &.type-danger {
+    color: var(--o-color-danger1);
+  }
+}
diff --git a/packages/opendesign/src/form/style/var.scss b/packages/opendesign/src/form/style/var.scss
index 447b3517ff17b483ae4bc3b79ea36e91e1de1148..c9fd2faa8a7f9f8eb1f8406401baa26689903122 100644
--- a/packages/opendesign/src/form/style/var.scss
+++ b/packages/opendesign/src/form/style/var.scss
@@ -1,2 +1,15 @@
 .o-form {
+  --form-item-display: flex;
+  --form-item-gap: 24px;
+  --form-label-main-gap: 32px;
+  --form-label-gap-top: 4px;
+}
+.o-form-layout-h {
+  --form-label-width: 20%;
+  --form-label-max-width: 240px;
+  --form-item-align: flex-start;
+}
+.o-form-layout-v {
+  --form-label-width: 100%;
+  --form-label-justify: flex-start;
 }
diff --git a/packages/opendesign/src/form/types.ts b/packages/opendesign/src/form/types.ts
new file mode 100644
index 0000000000000000000000000000000000000000..6a0873eaef8f586f90d929f675921162be1ce72d
--- /dev/null
+++ b/packages/opendesign/src/form/types.ts
@@ -0,0 +1,153 @@
+import { ExtractPropTypes, PropType } from 'vue';
+import type { SizeT } from '../_utils/types';
+
+export const TabVariantTypes = ['solid', 'text'] as const;
+export type TabVariantT = (typeof TabVariantTypes)[number];
+export type ValidatorReusltT = 'danger' | 'warning' | 'success';
+export type TriggerT = 'change' | 'input' | 'blur' | 'focus';
+
+export type ValidatorResultT = {
+  type: ValidatorReusltT;
+  message?: string;
+};
+export type ValidatorT = (value: any) => ValidatorResultT | void;
+
+export type ValidatorRuleT = {
+  triggers?: TriggerT | TriggerT[];
+  validator?: ValidatorT;
+};
+
+export type FieldResultT = {
+  type: 'warning' | 'danger' | '';
+  message: string[];
+};
+
+export type RequiredRuleT = {
+  required: boolean;
+  message?: string;
+  triggers?: TriggerT | TriggerT[];
+};
+export type TypeRuleT = {
+  type: 'string' | 'number' | 'boolean' | 'array' | 'object';
+  message?: string;
+  triggers?: TriggerT | TriggerT[];
+};
+
+export type RulesT = ValidatorRuleT | RequiredRuleT | TypeRuleT;
+
+export interface FiledInfoT {
+  filed?: string;
+  validate?: (trigger: TriggerT) => Promise<boolean> | undefined;
+  clearValidate: () => void;
+  resetFiled: () => void;
+}
+
+export const formProps = {
+  /**
+   * 表单数据对象
+   */
+  model: {
+    type: Object,
+  },
+  /**
+   * 类型 TabVariantT
+   */
+  variant: {
+    type: String as PropType<TabVariantT>,
+    default: 'text',
+  },
+  /**
+   * 大小 SizeT
+   */
+  size: {
+    type: String as PropType<SizeT>,
+  },
+  /**
+   * 子项是否包含必选，主要用于控制文本左对齐样式
+   */
+  hasRequired: {
+    type: Boolean,
+    default: false,
+  },
+  /**
+   * 布局
+   */
+  layout: {
+    type: String as PropType<'h' | 'v' | 'inline'>,
+    default: 'h',
+  },
+  /**
+   * 表单项文本垂直对齐方式
+   */
+  labelAlign: {
+    type: String as PropType<'top' | 'center' | 'bottom'>,
+  },
+  /**
+   * 表单项文本水平对齐方式
+   */
+  labelJustify: {
+    type: String as PropType<'left' | 'center' | 'right'>,
+  },
+  /**
+   * 表单项文本宽度,全局
+   */
+  labelWidth: {
+    type: String,
+  },
+};
+export type FormPropsT = ExtractPropTypes<typeof formProps>;
+
+export const formItemProps = {
+  /**
+   * 表单项在数据对象中的path
+   */
+  field: {
+    type: String,
+  },
+  /**
+   * 是否必选
+   */
+  required: {
+    type: Boolean,
+    default: false,
+  },
+  /**
+   * 表单项文本
+   */
+  label: {
+    type: String,
+    default: undefined,
+  },
+  /**
+   * 表单项文本垂直对齐方式
+   */
+  labelAlign: {
+    type: String as PropType<'top' | 'center' | 'bottom'>,
+  },
+  /**
+   * 表单项文本水平对齐方式
+   */
+  labelJustify: {
+    type: String as PropType<'left' | 'center' | 'right'>,
+  },
+  /**
+   * 表单项文本宽度
+   */
+  labelWidth: {
+    type: String,
+  },
+  /**
+   * 表单项内容类名
+   */
+  mainClass: {
+    type: [String, Array] as PropType<string | any[]>,
+  },
+  /**
+   * 表单验证规则
+   */
+  rules: {
+    type: Array as PropType<Array<RulesT>>,
+  },
+};
+
+export type FormItemPropsT = ExtractPropTypes<typeof formItemProps>;
diff --git a/packages/opendesign/src/input-number/OInputNumber.vue b/packages/opendesign/src/input-number/OInputNumber.vue
index 46a66c05f3e6abfedfbc63e4975a2106a962f188..143d3bad20d4eeb02160147829cb8a1083e4c04c 100644
--- a/packages/opendesign/src/input-number/OInputNumber.vue
+++ b/packages/opendesign/src/input-number/OInputNumber.vue
@@ -1,11 +1,13 @@
 <script setup lang="ts">
-import { ref, watch, computed } from 'vue';
+import { ref, watch, computed, inject, provide } from 'vue';
 import { defaultSize } from '../_utils/global';
 import { IconMinus, IconAdd, IconChevronUp, IconChevronDown } from '../_utils/icons';
 import { OInput } from '../input';
 import { isValidNumber, correctValue, string2number, number2string } from './input-number';
 import { isFunction, isUndefined } from '../_utils/is';
 import { inputNumberPorps } from './types';
+import { formItemInjectKey } from '../form/provide';
+import { innerComponentInjectKey } from '../_components/provide';
 
 const props = defineProps(inputNumberPorps);
 
@@ -38,6 +40,16 @@ watch(
   }
 );
 
+const formItemInjection = inject(formItemInjectKey, null);
+
+const color = computed(() => {
+  if (formItemInjection?.fieldResult.value) {
+    return formItemInjection?.fieldResult.value?.type;
+  } else {
+    return props.color;
+  }
+});
+
 const parseFun = (v: string) => {
   let val = string2number(v);
   if (props.parse) {
@@ -78,13 +90,17 @@ const canMinus = computed(() => {
   return true;
 });
 
+const emitChange = () => {
+  emits('change', currentValue.value);
+  formItemInjection?.fieldHandlers.onChange?.(currentValue.value);
+};
 const updateValue = (val: number) => {
   inputValue.value = number2string(val);
 
   emits('update:modelValue', currentValue.value);
 
   if (currentValue.value !== lastValue) {
-    emits('change', currentValue.value);
+    emitChange();
     lastValue = currentValue.value;
   }
   return currentValue.value;
@@ -97,9 +113,11 @@ const onInput = (val: string, evt: Event) => {
 
 const onFocus = (val: string, evt: FocusEvent) => {
   emits('focus', currentValue.value, evt);
+  formItemInjection?.fieldHandlers.onFocus?.(currentValue.value);
 };
 const onBlur = (val: string, evt: FocusEvent) => {
   emits('blur', currentValue.value, evt);
+  formItemInjection?.fieldHandlers.onBlur?.(currentValue.value);
 };
 const onPressEnter = (val: string, evt: Event): void => {
   emits('pressEnter', currentValue.value, evt);
@@ -107,7 +125,7 @@ const onPressEnter = (val: string, evt: Event): void => {
 
 const onChange = (val: string) => {
   inputValue.value = val;
-  emits('change', currentValue.value);
+  emitChange();
 };
 
 const onUpdateModelValue = (val: string) => {
@@ -134,6 +152,11 @@ const controlClick = (type: 'plus' | 'minus', e: MouseEvent) => {
     emits('minus', v, e);
   }
 };
+
+// 表明是否为嵌套子组件
+provide(innerComponentInjectKey, {
+  isInnerInput: true,
+});
 </script>
 <template>
   <OInput
@@ -145,7 +168,7 @@ const controlClick = (type: 'plus' | 'minus', e: MouseEvent) => {
     :on-invalid-change="onInvalidChange"
     :size="props.size"
     :placeholder="props.placeholder"
-    :color="props.color"
+    :color="color"
     :variant="props.variant"
     :round="props.round"
     :disabled="props.disabled"
diff --git a/packages/opendesign/src/input/OInput.vue b/packages/opendesign/src/input/OInput.vue
index 9b0e9742c8a0def03a2b576308f56276700653f4..ab8625cf9403d42b1ff98cb73b73586a7e1b630d 100644
--- a/packages/opendesign/src/input/OInput.vue
+++ b/packages/opendesign/src/input/OInput.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, computed, watch } from 'vue';
+import { ref, computed, watch, inject } from 'vue';
 import { defaultSize } from '../_utils/global';
 import { isFunction } from '../_utils/is';
 import { IconClose, IconEyeOn, IconEyeOff } from '../_utils/icons';
@@ -11,6 +11,8 @@ import { getRoundClass } from '../_utils/style-class';
 import ClientOnly from '../_components/client-only';
 import { uniqueId } from '../_utils/helper';
 import { useComposition } from '../hooks/use-composition';
+import { formItemInjectKey } from '../form/provide';
+import { innerComponentInjectKey } from '../_components/provide';
 
 const props = defineProps(inputProps);
 
@@ -27,6 +29,18 @@ const emits = defineEmits<{
 const inputId = uniqueId('input');
 const inputType = ref(props.type);
 
+const innerComponentInject = inject(innerComponentInjectKey, null);
+const isInnerInput = innerComponentInject?.isInnerInput;
+const formItemInjection = isInnerInput ? null : inject(formItemInjectKey, null);
+
+const color = computed(() => {
+  if (formItemInjection?.fieldResult.value) {
+    return formItemInjection?.fieldResult.value?.type;
+  } else {
+    return props.color;
+  }
+});
+
 const formatFun = computed(() => (isFunction(props.format) ? props.format : (v: string) => v));
 const parseFun = computed(() => (isFunction(props.parse) ? props.parse : (v: string) => v));
 const checkValidFun = computed(() => (isFunction(props.checkValid) ? props.checkValid : () => true));
@@ -107,6 +121,7 @@ const onFocus = (e: FocusEvent) => {
     inputText.value = realValue.value;
   }
   emits('focus', realValue.value, e);
+  formItemInjection?.fieldHandlers.onFocus?.(realValue.value);
 };
 
 function updateValue(val: string) {
@@ -132,6 +147,7 @@ function updateValue(val: string) {
     emits('change', value);
     lastValue = value;
     lastValidInputText = value;
+    formItemInjection?.fieldHandlers.onChange?.(value);
   }
   return value;
 }
@@ -145,10 +161,12 @@ const onBlur = (e: FocusEvent) => {
   const val = (e.target as HTMLInputElement)?.value;
   const v = updateValue(val);
   emits('blur', v, e);
+  formItemInjection?.fieldHandlers.onBlur?.(v);
 };
 
 const onKeyDown = (e: KeyboardEvent) => {
   const keyCode = e.key || e.code;
+  // 处理回车
   if (!composition.isComposing.value && keyCode === Enter.key) {
     const val = (e.target as HTMLInputElement)?.value;
     const v = updateValue(val);
@@ -213,7 +231,7 @@ const onEyeMouseDown = () => {
   <label
     class="o-input"
     :class="[
-      `o-input-${props.color}`,
+      `o-input-${color}`,
       `o-input-${props.variant}`,
       `o-input-${props.size || defaultSize}`,
       round.class.value,
diff --git a/packages/opendesign/src/radio-group/ORadioGroup.vue b/packages/opendesign/src/radio-group/ORadioGroup.vue
index 90c7e98aa9abdb7c3df7e61b1f76e34863598517..a27be282161479dcbf6d1b3bac1707d289c2ba95 100644
--- a/packages/opendesign/src/radio-group/ORadioGroup.vue
+++ b/packages/opendesign/src/radio-group/ORadioGroup.vue
@@ -1,8 +1,9 @@
 <script lang="ts" setup>
-import { provide, ref, toRef, watch } from 'vue';
+import { provide, ref, toRef, watch, inject } from 'vue';
 import { radioGroupProps } from './types';
 import { radioGroupInjectKey } from './provide';
 import { isUndefined } from '../_utils/is';
+import { formItemInjectKey } from '../form/provide';
 
 const props = defineProps(radioGroupProps);
 
@@ -13,6 +14,9 @@ const emits = defineEmits<{
 
 const realValue = ref(props.modelValue ?? props.defaultValue);
 
+// 表单注入，用于规则校验
+const formItemInjection = inject(formItemInjectKey, null);
+
 watch(
   () => props.modelValue,
   (val) => {
@@ -29,6 +33,7 @@ const updateModelValue = (val: string | number | boolean) => {
 
 const onChange = (val: string | number | boolean, ev: Event) => {
   emits('change', val, ev);
+  formItemInjection?.fieldHandlers.onChange?.(val);
 };
 
 provide(radioGroupInjectKey, {
diff --git a/packages/opendesign/src/select/OSelect.vue b/packages/opendesign/src/select/OSelect.vue
index 7a0c5946938e627d8373b583fa178a4ad09a25fc..a8685317036f247d9d3c8a5a4eba259509e7713d 100644
--- a/packages/opendesign/src/select/OSelect.vue
+++ b/packages/opendesign/src/select/OSelect.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, provide, ref, watch, watchEffect } from 'vue';
+import { computed, provide, ref, watch, watchEffect, inject } from 'vue';
 import { defaultSize, isPhonePad } from '../_utils/global';
 import { IconChevronDown, IconClose, IconLoading } from '../_utils/icons';
 import { OPopup } from '../popup';
@@ -13,6 +13,7 @@ import { OScroller } from '../scroller';
 import { isArray, isFunction } from '../_utils/is';
 import SelectOption, { OptionSlotNames } from './SelectOption.vue';
 import { filterSlots } from '../upload/util';
+import { formItemInjectKey } from '../form/provide';
 
 // TODO 下拉展开时，选中值默认在视口里
 const props = defineProps(selectProps);
@@ -47,6 +48,17 @@ watch(
   }
 );
 
+// 表单注入，用于规则校验
+const formItemInjection = inject(formItemInjectKey, null);
+
+const color = computed(() => {
+  if (formItemInjection?.fieldResult.value) {
+    return formItemInjection?.fieldResult.value?.type;
+  } else {
+    return props.color;
+  }
+});
+
 // 存储每个value对应的label
 const optionLabels = ref<Record<string | number, string>>({});
 
@@ -54,16 +66,17 @@ const optionLabels = ref<Record<string | number, string>>({});
 const valueList = ref<Array<string | number>>([]); // 选项选中的记录
 const finalValueList = ref<Array<string | number>>([]); // 最终选择值
 // 初始化valuelist
-if (props.multiple) {
-  if (isArray(props.modelValue)) {
-    valueList.value = [...props.modelValue];
-  } else if (isArray(props.defaultValue)) {
-    valueList.value = [...props.defaultValue];
+if (isArray(props.modelValue)) {
+  valueList.value = [...props.modelValue];
+} else if (isArray(props.defaultValue)) {
+  valueList.value = [...props.defaultValue];
+} else {
+  const mrValue = props.modelValue ?? props.defaultValue;
+  if (mrValue) {
+    valueList.value = [mrValue];
   } else {
     valueList.value = [];
   }
-} else {
-  valueList.value = [((props.modelValue ?? props.defaultValue) as string | number) ?? ''];
 }
 finalValueList.value = [...valueList.value];
 
@@ -117,6 +130,10 @@ watchEffect(() => {
 
 const isClearable = computed(() => props.clearable && !props.disabled && valueList.value.length > 0);
 
+const emitChange = (value: SelectValueT) => {
+  emits('change', value);
+  formItemInjection?.fieldHandlers.onChange?.(value);
+};
 // 清除值
 const clearClick = (e: Event) => {
   e.stopPropagation();
@@ -124,7 +141,7 @@ const clearClick = (e: Event) => {
   valueList.value = [];
   emits('clear', e);
 
-  emits('change', [...valueList.value]);
+  emitChange([...valueList.value]);
   emits('update:modelValue', [...valueList.value]);
 };
 const beforeSelect = async (value: string | number) => {
@@ -155,7 +172,7 @@ provide(selectOptionInjectKey, {
         //单选
 
         if (valueList.value[0] !== toValue) {
-          emits('change', toValue);
+          emitChange(toValue);
 
           valueList.value[0] = toValue as string | number;
         }
@@ -178,7 +195,7 @@ provide(selectOptionInjectKey, {
         });
 
         if (!isResponding.value) {
-          emits('change', [...valueList.value]);
+          emitChange([...valueList.value]);
           emits('update:modelValue', [...valueList.value]);
         }
       }
@@ -201,7 +218,7 @@ const onRemoveTag = (value: string | number, e: MouseEvent) => {
   if (idx > -1) {
     valueList.value.splice(idx, 1);
 
-    emits('change', [...valueList.value]);
+    emitChange([...valueList.value]);
     emits('update:modelValue', [...valueList.value]);
   }
 };
@@ -260,7 +277,7 @@ const selectDlgAction: DialogActionT[] = [
     ref="selectRef"
     class="o-select"
     :class="[
-      `o-select-${props.color}`,
+      `o-select-${color}`,
       `o-select-${props.variant}`,
       `o-select-${props.size || defaultSize}`,
       round.class.value,
diff --git a/packages/opendesign/src/select/types.ts b/packages/opendesign/src/select/types.ts
index 7a562730d8b89beec1853f3024661eaa29088207..5f441751e14c4c958db8f571dde5944f20694c92 100644
--- a/packages/opendesign/src/select/types.ts
+++ b/packages/opendesign/src/select/types.ts
@@ -46,7 +46,7 @@ export const selectProps = {
     default: 'normal',
   },
   /**
-   * 按钮类型：ColorT
+   * 按钮类型：VariantT
    */
   variant: {
     type: String as PropType<VariantT>,
diff --git a/packages/opendesign/src/textarea/OTextarea.vue b/packages/opendesign/src/textarea/OTextarea.vue
index 10874da5e6f0d290dcf1f6836032f97e41583b12..f21757e82eddf246874a84035cf8eda023dc2afa 100644
--- a/packages/opendesign/src/textarea/OTextarea.vue
+++ b/packages/opendesign/src/textarea/OTextarea.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, computed, watch } from 'vue';
+import { ref, computed, watch, inject } from 'vue';
 import { defaultSize } from '../_utils/global';
 import { isFunction } from '../_utils/is';
 import { IconClose } from '../_utils/icons';
@@ -10,6 +10,7 @@ import { textareaProps } from './types';
 import { getRoundClass } from '../_utils/style-class';
 import ClientOnly from '../_components/client-only';
 import { uniqueId } from '../_utils/helper';
+import { formItemInjectKey } from '../form/provide';
 
 const props = defineProps(textareaProps);
 
@@ -56,9 +57,19 @@ const getValueLength = (val: string): number => {
 const currentLength = computed(() => getValueLength(realValue.value));
 const isOutLengthLimit = computed(() => (props.maxLength !== undefined ? currentLength.value > props.maxLength : false));
 
+// 表单注入，用于规则校验
+const formItemInjection = inject(formItemInjectKey, null);
+
 const color = computed(() => {
-  return isOutLengthLimit.value ? 'danger' : props.color;
+  if (isOutLengthLimit.value) {
+    return 'danger';
+  } else if (formItemInjection?.fieldResult.value) {
+    return formItemInjection?.fieldResult.value?.type;
+  } else {
+    return props.color;
+  }
 });
+
 const round = getRoundClass(props, 'textarea');
 
 // 是否聚焦状态
@@ -73,6 +84,7 @@ const updateValue = (val: string) => {
   if (lastValue !== val) {
     emits('change', val);
     lastValue = val;
+    formItemInjection?.fieldHandlers.onChange?.(val);
   }
   return val;
 };
@@ -116,6 +128,7 @@ const onFocus = (e: FocusEvent) => {
   }
   isFocus.value = true;
   emits('focus', realValue.value, e);
+  formItemInjection?.fieldHandlers.onFocus?.(realValue.value);
 };
 
 const onBlur = (e: FocusEvent) => {
@@ -127,6 +140,7 @@ const onBlur = (e: FocusEvent) => {
   const val = (e.target as HTMLInputElement)?.value;
   const v = updateValue(val);
   emits('blur', v, e);
+  formItemInjection?.fieldHandlers.onBlur?.(v);
 };
 
 const onKeyDown = (e: KeyboardEvent) => {
diff --git a/packages/opendesign/src/textarea/style/style.scss b/packages/opendesign/src/textarea/style/style.scss
index 6846be92e1ded3ba396b6504a05fbd76796e8ec6..2e10c441cc68cd21b448f77027dd172377319445 100644
--- a/packages/opendesign/src/textarea/style/style.scss
+++ b/packages/opendesign/src/textarea/style/style.scss
@@ -20,7 +20,6 @@
   justify-items: stretch;
   width: 100%;
   height: 100%;
-
   @include hover {
     .o-textarea-textarea {
       border-color: var(--textarea-bd-color-hover);
diff --git a/packages/opendesign/src/upload/OUpload.vue b/packages/opendesign/src/upload/OUpload.vue
index 97cfada2a79c8901742a2b6c246e9d4091ba93d0..280831267266bd26c98cb1886ef9e43785c60f79 100644
--- a/packages/opendesign/src/upload/OUpload.vue
+++ b/packages/opendesign/src/upload/OUpload.vue
@@ -1,12 +1,13 @@
 <script setup lang="ts">
 import { uploadProps, UploadFileT } from './types';
-import { computed, ref } from 'vue';
+import { computed, ref, inject } from 'vue';
 import { isFunction } from '../_utils/is';
 import UploadItem, { ItemSlotNames } from './UploadItem.vue';
 import { UploadLabel, doUploadFileList, doUploadFile, filterSlots, generateImageDataUrl, isPictureType } from './util';
 import UploadSelect, { selectSlotNames } from './UploadSelect.vue';
 import { IconAdd } from '../_utils/icons';
 import InputSelect from './InputSelect.vue';
+import { formItemInjectKey } from '../form/provide';
 
 const props = defineProps(uploadProps);
 const emits = defineEmits<{
@@ -20,6 +21,9 @@ const emits = defineEmits<{
 // 先不做受控模式
 const fileList = ref<UploadFileT[]>(props.defaultFileList || []);
 
+// 表单注入，用于规则校验
+const formItemInjection = inject(formItemInjectKey, null);
+
 let fileId = 1;
 
 const uploadOption = computed(() => {
@@ -64,6 +68,7 @@ const afterSelected = (files: UploadFileT[]) => {
       replaceId = '';
 
       emits('select', fileList.value);
+      formItemInjection?.fieldHandlers.onChange?.(fileList.value);
 
       if (!props.lazyUpload) {
         doUploadFile(fileList.value[idx], uploadOption.value);
@@ -82,6 +87,7 @@ const afterSelected = (files: UploadFileT[]) => {
     }
 
     emits('select', fileList.value);
+    formItemInjection?.fieldHandlers.onChange?.(fileList.value);
 
     if (!props.lazyUpload) {
       doUploadFileList(fileList.value.slice(s, s + l), uploadOption.value);
@@ -131,6 +137,8 @@ const removeFile = async (file: UploadFileT) => {
   file.request?.abort();
   fileList.value = fileList.value.filter((f) => f.id !== file.id);
 
+  formItemInjection?.fieldHandlers.onChange?.(fileList.value);
+
   return true;
 };
 const removeFileByIndex = (index: number) => {
diff --git a/packages/opendesign/src/upload/__demo__/UploadBasic.vue b/packages/opendesign/src/upload/__demo__/UploadBasic.vue
index 6f5be72f7ce2340ecbd3d2f66697937f92fd4c98..0b9257dbb6fc20a836c1d2cf4b59152227a0f335 100644
--- a/packages/opendesign/src/upload/__demo__/UploadBasic.vue
+++ b/packages/opendesign/src/upload/__demo__/UploadBasic.vue
@@ -20,6 +20,7 @@ const defaultFileList: UploadFileT[] = [
     id: '1',
     name: 'test.png',
     status: 'finished',
+    imgUrl: 'https://www.hiascend.com/p/resource/202309/72a0d66939734783805e01302bb9f53d.png',
   },
 ];
 
@@ -104,7 +105,14 @@ const onSelect = (f: UploadFileT[]) => {
       </OUpload>
     </div>
     <div class="upload-item">
-      <OUpload multiple :on-after-select="onAfterSelect" :upload-request="uploadRequest" :on-before-upload="onBeforeUpload" list-type="picture-card" />
+      <OUpload
+        multiple
+        :on-after-select="onAfterSelect"
+        :upload-request="uploadRequest"
+        :on-before-upload="onBeforeUpload"
+        list-type="picture-card"
+        :default-file-list="defaultFileList"
+      />
     </div>
   </section>
   <section style="flex-wrap: wrap; align-items: flex-start">
diff --git a/packages/portal/src/router.ts b/packages/portal/src/router.ts
index 70f6436222846f6e5cccf8f52ade2790d3680c19..9f5d19d2c6ed80b618304a6cd5a49b6f5b354148 100644
--- a/packages/portal/src/router.ts
+++ b/packages/portal/src/router.ts
@@ -14,6 +14,12 @@ export const routes = [
     label: '日期选择器 DatePicker',
     component: () => import('@components/date-picker/__demo__/TheIndex.vue'),
   },
+  {
+    path: '/form',
+    name: 'Form',
+    label: '表单 Form',
+    component: () => import('@components/form/__demo__/TheIndex.vue'),
+  },
   {
     path: '/text',
     name: 'Text',
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 42bfefc37f660a5a4a00f70b40bf999967d5090c..5d1c0a988513da14a4d08de4c146e53438aba9e7 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -62,7 +62,7 @@ importers:
         version: registry.npmmirror.com/vue@3.2.45
       vue-router:
         specifier: ^4.1.6
-        version: 4.1.6(vue@3.2.45)
+        version: registry.npmmirror.com/vue-router@4.1.6(vue@3.2.45)
     devDependencies:
       '@vitejs/plugin-vue':
         specifier: ^3.2.0
@@ -493,10 +493,6 @@ packages:
       '@volar/vue-language-core': registry.npmmirror.com/@volar/vue-language-core@1.0.13
     dev: true
 
-  /@vue/devtools-api@6.4.5:
-    resolution: {integrity: sha512-JD5fcdIuFxU4fQyXUu3w2KpAJHzTVdN+p4iOX2lMWSHMOoQdMAcpFLZzm9Z/2nmsoZ1a96QEhZ26e50xLBsgOQ==}
-    dev: false
-
   /@vue/reactivity@3.2.45:
     resolution: {integrity: sha512-PRvhCcQcyEVohW0P8iQ7HDcIOXRjZfAsOds3N99X/Dzewy8TVhTCT4uXpAHfoKjVTJRA0O0K+6QNkDIZAxNi3A==}
     dependencies:
@@ -1648,15 +1644,6 @@ packages:
       - supports-color
     dev: true
 
-  /vue-router@4.1.6(vue@3.2.45):
-    resolution: {integrity: sha512-DYWYwsG6xNPmLq/FmZn8Ip+qrhFEzA14EI12MsMgVxvHFDYvlr4NXpVF5hrRH1wVcDP8fGi5F4rxuJSl8/r+EQ==}
-    peerDependencies:
-      vue: ^3.2.0
-    dependencies:
-      '@vue/devtools-api': 6.4.5
-      vue: registry.npmmirror.com/vue@3.2.45
-    dev: false
-
   /vue-template-compiler@2.7.14:
     resolution: {integrity: sha512-zyA5Y3ArvVG0NacJDkkzJuPQDF8RFeRlzV2vLeSnhSpieO6LK2OVbdLPi5MPPs09Ii+gMO8nY4S3iKQxBxDmWQ==}
     dependencies: