diff --git a/packages/docs/input-number.md b/packages/docs/input-number.md
new file mode 100644
index 0000000000000000000000000000000000000000..0ceb8d2cae562699395b42a3223925ef80b25ee3
--- /dev/null
+++ b/packages/docs/input-number.md
@@ -0,0 +1,40 @@
+# Divider 分割线
+
+## 说明
+
+> currentValue: number|string 数字输入框当前值
+
+> realValue: number 数字输入框当前真实值
+
+> inputValue: string 输入框框当前值
+
+> 数字非法判断：非 number 字符串（Number 无法转换为数字）、不在[min, max]范围内；
+
+## 设计
+
+1. 初始化 currentValue
+
+   `currentValue = modelValue ?? defaultValue`
+
+- 如果 modelValue 非法，展示该值，并使用删除线样式
+- 如果 defaultValue 非法，展示该值，并使用删除线样式
+
+2. 聚焦时（鼠标点击，键盘 Tab 切换）
+
+- 触发 focus 事件，参数：(realValue, event)
+
+3. 输入时
+
+- 触发`input`事件，参数：(inputValue, event)
+- 如果输入值非法，展示该值，并使用删除线样式
+
+4. 失焦时
+
+-
+- 触发`blur`事件，参数：(currentValue, event)
+
+parse/format
+
+1. 当 change 事件时，执行 format
+
+2.
diff --git a/packages/docs/input.md b/packages/docs/input.md
new file mode 100644
index 0000000000000000000000000000000000000000..77b3ab07f023ce79c6d34d7c4c75dec1dfe3d65c
--- /dev/null
+++ b/packages/docs/input.md
@@ -0,0 +1,46 @@
+# Input 输入框
+
+## 说明
+
+> `realValue: number|string` 数字输入框当前值
+
+> `inputValue: string` 输入框框当前值
+
+> `displayValue: string` 输入框展示的值
+
+> 数字非法判断：非 number 字符串（Number 无法转换为数字）、不在[min, max]范围内；
+
+## 设计
+
+1. 初始化 realValue
+
+   `realValue = modelValue ?? defaultValue`
+
+- 如果 `modelValue` 非法，展示该值，并使用删除线样式;
+- 如果 `defaultValue` 非法，展示该值，并使用删除线样式;
+
+2. 聚焦时（鼠标点击，键盘 Tab 切换）
+
+- 触发 `focus` 事件，参数：`(realValue, e)`;
+
+3. 输入时
+
+- 触发`input`事件，参数：`(inputValue, event)`;
+- 如果无 `parse`, 赋值`realValue = inputValue`,触发`update:modelValue`事件，参数`(inputValue)`;
+
+4. 失焦时
+
+- 如果有 `format`, `displayValue = format(realValue)`;
+- 如果没有 `format`, `displayValue = realValue`;
+- 如果有 `parse`, `realValue = parse(inputValue)`;
+- 触发`blur`事件，参数：`(realValue, event)`;
+- 如果值改变，触发`change`事件，参数: `(realValue)`
+- 触发`update:modelValue`事件，参数: `(realValue)`
+
+5. Enter 键按下时
+
+- 如果有 `format`, `displayValue = format(inputValue)`;
+- 如果没有 `format`, `displayValue = inputValue`;
+- 触发`pressEnter`事件，参数：`(realValue, KeyboardEvent)`;
+- 如果值改变，触发`change`事件，参数: `(realValue)`
+- 触发`update:modelValue`事件，参数: `(realValue)`
diff --git a/packages/opendesign/src/components/button/style/index.scss b/packages/opendesign/src/components/button/style/index.scss
index 6fd6e64fe011af30b2ed5a83185c856fbd6dd1c9..6b21916b23d0d141664ce94da200b701c362b165 100644
--- a/packages/opendesign/src/components/button/style/index.scss
+++ b/packages/opendesign/src/components/button/style/index.scss
@@ -1,4 +1,4 @@
-@import './var.scss';
+@use './var.scss';
 
 .o-btn {
   outline: none;
diff --git a/packages/opendesign/src/components/button/style/index.ts b/packages/opendesign/src/components/button/style/index.ts
index 67aac616fc2524b146b7b078fd3b67c1bd3b4a6e..591b2fbd72dcd5e987362d645b561bd2fac42716 100644
--- a/packages/opendesign/src/components/button/style/index.ts
+++ b/packages/opendesign/src/components/button/style/index.ts
@@ -1 +1,2 @@
+import '../../style';
 import './index.scss';
diff --git a/packages/opendesign/src/components/checkbox-group/style/index.scss b/packages/opendesign/src/components/checkbox-group/style/index.scss
index 296456cc807ea766be05363b482535b27378eca5..5a8c148c7c02e65486c1eed4d9264155dd2de387 100644
--- a/packages/opendesign/src/components/checkbox-group/style/index.scss
+++ b/packages/opendesign/src/components/checkbox-group/style/index.scss
@@ -1,4 +1,4 @@
-@import './var.scss';
+@use './var.scss';
 
 .o-checkbox-group {
   display: inline-flex;
diff --git a/packages/opendesign/src/components/checkbox-group/style/index.ts b/packages/opendesign/src/components/checkbox-group/style/index.ts
index 67aac616fc2524b146b7b078fd3b67c1bd3b4a6e..591b2fbd72dcd5e987362d645b561bd2fac42716 100644
--- a/packages/opendesign/src/components/checkbox-group/style/index.ts
+++ b/packages/opendesign/src/components/checkbox-group/style/index.ts
@@ -1 +1,2 @@
+import '../../style';
 import './index.scss';
diff --git a/packages/opendesign/src/components/checkbox/style/index.scss b/packages/opendesign/src/components/checkbox/style/index.scss
index 1c64f4a11500ec479d7b6aeec2301025c5dd5414..0c0144e06e68711b407298e78bd4b88424821d1c 100644
--- a/packages/opendesign/src/components/checkbox/style/index.scss
+++ b/packages/opendesign/src/components/checkbox/style/index.scss
@@ -1,4 +1,4 @@
-@import './var.scss';
+@use './var.scss';
 
 .o-checkbox {
   color: var(--checkbox-color);
diff --git a/packages/opendesign/src/components/checkbox/style/index.ts b/packages/opendesign/src/components/checkbox/style/index.ts
index 67aac616fc2524b146b7b078fd3b67c1bd3b4a6e..591b2fbd72dcd5e987362d645b561bd2fac42716 100644
--- a/packages/opendesign/src/components/checkbox/style/index.ts
+++ b/packages/opendesign/src/components/checkbox/style/index.ts
@@ -1 +1,2 @@
+import '../../style';
 import './index.scss';
diff --git a/packages/opendesign/src/components/divider/style/index.scss b/packages/opendesign/src/components/divider/style/index.scss
index b353041ccdd7a9349a174bf4a5c982273aaaa6d7..5a69e5d4e63d45eff5d00a371bf94fea066f69e0 100644
--- a/packages/opendesign/src/components/divider/style/index.scss
+++ b/packages/opendesign/src/components/divider/style/index.scss
@@ -1,4 +1,4 @@
-@import './var.scss';
+@use './var.scss';
 
 .o-divider-direction-horizontal {
   display: flex;
diff --git a/packages/opendesign/src/components/divider/style/index.ts b/packages/opendesign/src/components/divider/style/index.ts
index bf3c23acb17eb9cae121dc685b01e0026b8c85d1..4513560262c6648e14e7da5a5f205185979a68f5 100644
--- a/packages/opendesign/src/components/divider/style/index.ts
+++ b/packages/opendesign/src/components/divider/style/index.ts
@@ -1 +1,2 @@
+import '../../style';
 import './index.scss';
\ No newline at end of file
diff --git a/packages/opendesign/src/components/index.scss b/packages/opendesign/src/components/index.scss
index 98357b32dfac1c5088126ac32aae6855e2d06935..a95050352737114d9aacb457df49dff96634b37a 100644
--- a/packages/opendesign/src/components/index.scss
+++ b/packages/opendesign/src/components/index.scss
@@ -1,5 +1,5 @@
-@import './style/index.scss';
-@import './button/style/index.scss';
-@import './switch/style/index.scss';
-@import './radio/style/index.scss';
-@import './radio-group/style/index.scss';
+@use './style/index.scss';
+@use './button/style/index.scss';
+@use './switch/style/index.scss';
+@use './radio/style/index.scss';
+@use './radio-group/style/index.scss';
diff --git a/packages/opendesign/src/components/input-number/OInputNumber.vue b/packages/opendesign/src/components/input-number/OInputNumber.vue
index 2dcd107ab55ce96d315cea90aab418821d68efc3..651a3ce400bdd57f63cfda529fb679c679668642 100644
--- a/packages/opendesign/src/components/input-number/OInputNumber.vue
+++ b/packages/opendesign/src/components/input-number/OInputNumber.vue
@@ -1,19 +1,36 @@
 <script setup lang="ts">
 import { ref, watch, computed } from 'vue';
-import { defaultSize, defaultShape, SizeT, ShapeT } from '../_shared/global';
-import { isNull, isUndefined } from '../_shared/is';
-import { IconX } from '../icons';
-import { trigger } from '../_shared/event';
-import { Enter } from '../_shared/keycode';
+import { defaultSize, SizeT, ShapeT } from '../_shared/global';
+import { IconMinus, IconAdd, IconChevronDown, IconChevronUp } from '../icons';
+import { OInput } from '../input';
+import { isValidNumber, correctValue, getRealValue } from './input-number';
+import { isFunction, isUndefined } from '../_shared/is';
 
 interface InputPropT {
   /**
-   * 下拉框的值
+   * 数字输入框的值
    * v-model
    */
-  value: string | number;
+  modelValue?: string | number;
   /**
-   * 大小
+   * 数字输入框的默认值
+   * 非受控
+   */
+  defaultValue?: string | number;
+  /**
+   * 按钮点击时步长
+   */
+  step?: number;
+  /**
+   * 最小值
+   */
+  min?: number;
+  /**
+   * 最大值
+   */
+  max?: number;
+  /**
+   * 样式尺寸
    */
   size?: SizeT;
   /**
@@ -24,6 +41,10 @@ interface InputPropT {
    * 提示文本
    */
   placeholder?: string;
+  /**
+   * 状态，显示指定，用于非表单场景
+   */
+  status?: 'success' | 'warning' | 'error';
   /**
    * 是否禁用
    */
@@ -31,147 +52,272 @@ interface InputPropT {
   /**
    * 是否只读
    */
-  readonly?: false;
+  readonly?: boolean;
   /**
    * 是否可以清除
    */
   clearable?: boolean;
+  /**
+   * 控制按钮位置
+   */
+  controls?: 'both' | 'right' | 'left' | 'none';
+  /**
+   * 是否在输入合法时，更新modelvalue
+   */
+  updateOnInput?: boolean;
+  /**
+   * 解析输入框的值
+   */
+  parse?: (value: string) => string;
+  /**
+   * 对值格式化，控制显示格式
+   * 需搭配parse处理，保证值的正确性
+   */
+  format?: (value: string | number) => string | number;
 }
 const props = withDefaults(defineProps<InputPropT>(), {
-  value: '',
+  modelValue: undefined,
+  defaultValue: undefined,
+  step: 1,
+  min: undefined,
+  max: undefined,
   size: undefined,
   shape: undefined,
   placeholder: '',
   clearable: true,
+  parse: undefined,
+  format: undefined,
+  status: undefined,
+  controls: 'both',
+  updateOnInput: true,
 });
 
 const emits = defineEmits<{
-  (e: 'update:value', value: string | number): void;
-  (e: 'change', value: string | number): void;
-  (e: 'input', value: string | number, evt: Event): void;
-  (e: 'blur', value: string | number, evt: FocusEvent): void;
-  (e: 'focus', value: string | number, evt: FocusEvent): void;
-  (e: 'clear', evt: Event): void;
-  (e: 'pressEnter', value: string | number, evt: Event): void;
+  (e: 'update:modelValue', value: number): void;
+  (e: 'change', value: number): void;
+  (e: 'input', value: string, evt: Event): void;
+  (e: 'blur', value: number, evt: FocusEvent): void;
+  (e: 'focus', value: number, evt: FocusEvent): void;
+  (e: 'plus', value: number, evt: MouseEvent): void;
+  (e: 'minus', value: number, evt: MouseEvent): void;
+  (e: 'pressEnter', value: number, evt: Event): void;
 }>();
 
-const currentValue = ref(props.value);
-const isFocus = ref(false);
-
-function updateValue(val: string) {
-  currentValue.value = val;
-
-  emits('change', val);
-  emits('update:value', val);
-}
+const currentValue = ref<number | string | undefined>(props.modelValue ?? props.defaultValue);
+const isValid = ref(isValidNumber(currentValue.value, props.min, props.max));
 
 watch(
-  () => props.value,
+  () => props.modelValue,
   (val) => {
-    if (isNull(val) || isUndefined(val)) {
-      currentValue.value = '';
-    }
-    if (currentValue.value !== val) {
+    isValid.value = isValidNumber(val, props.min, props.max);
+    if (isFunction(props.format)) {
+      currentValue.value = props.format(val ?? '');
+    } else {
       currentValue.value = val;
-      emits('change', val);
     }
+    // console.log('watch', val);
   }
 );
 
-// 正在输入中文，处理输入过程中触发input事件
-let isComposing = false;
+let numberValue = getRealValue(currentValue.value);
+let lastNumberValue = numberValue;
 
-const onInput = (e: Event) => {
-  if (isComposing) {
-    return;
+const canAdd = computed(() => {
+  if (props.disabled) {
+    return false;
+  }
+  const n = Number(currentValue.value);
+  if (!isUndefined(props.max) && props.max <= n) {
+    return false;
   }
-  const val = (e.target as HTMLInputElement)?.value;
-  updateValue(val);
-  emits('input', currentValue.value, e);
+  return true;
+});
+const canMinus = computed(() => {
+  if (props.disabled) {
+    return false;
+  }
+  const n = Number(currentValue.value);
+  if (!isUndefined(props.min) && props.min >= n) {
+    return false;
+  }
+  return true;
+});
+
+const updateValue = (val: string) => {
+  const v = isFunction(props.parse) ? props.parse(val) : val;
+  // const v = val;
+
+  if (isValid.value) {
+    numberValue = getRealValue(v);
+  } else {
+    // 不合法数据矫正
+    numberValue = correctValue(v, lastNumberValue, props.min, props.max);
+    isValid.value = true;
+  }
+
+  emits('update:modelValue', numberValue);
+
+  if (numberValue !== lastNumberValue) {
+    emits('change', numberValue);
+  } else {
+    if (isFunction(props.format)) {
+      currentValue.value = props.format(numberValue);
+    } else {
+      // 更新输入框显示的值
+      currentValue.value = numberValue;
+    }
+  }
+
+  lastNumberValue = numberValue;
+  return numberValue;
 };
 
-const onCompositionStart = () => {
-  isComposing = true;
+const onInput = (val: string, evt: Event) => {
+  emits('input', val, evt);
 };
-const onCompositionEnd = (e: Event) => {
-  if (!isComposing) {
-    return;
-  }
 
-  isComposing = false;
-  trigger(e.target as HTMLElement, 'input');
+const onFocus = (val: string, evt: FocusEvent) => {
+  lastNumberValue = numberValue;
+  emits('focus', numberValue, evt);
+  // console.log('focus', numberValue);
 };
+const onBlur = (val: string, evt: FocusEvent) => {
+  const v = updateValue(val);
+  emits('blur', v, evt);
+};
+const onPressEnter = (val: string, evt: Event): void => {
+  const v = updateValue(val);
 
-const onFocus = (e: FocusEvent) => {
-  isFocus.value = true;
-  emits('focus', currentValue.value, e);
+  emits('pressEnter', v, evt);
 };
 
-const onBlur = (e: FocusEvent) => {
-  isFocus.value = false;
-  emits('blur', currentValue.value, e);
+const onChange = (val: string) => {
+  // console.log('change', val);
+  if (isValid.value) {
+    updateValue(val);
+  }
 };
 
-const onKeyDown = (e: KeyboardEvent) => {
-  const keyCode = e.key || e.code;
-  if (!isComposing && keyCode === Enter.key) {
-    emits('pressEnter', currentValue.value, e);
+const onUpdateModelValue = (val: string) => {
+  // console.log('update model');
+  isValid.value = isValidNumber(val, props.min, props.max, props.parse);
+
+  if (isValid.value) {
+    numberValue = getRealValue(val, undefined, undefined, props.parse);
+    if (!isFunction(props.format)) {
+      emits('update:modelValue', numberValue);
+      lastNumberValue = numberValue;
+    }
   }
+  currentValue.value = val;
 };
 
-const clearClick = (e: Event) => {
-  updateValue('');
-  emits('clear', e);
+const controlClick = (type: 'plus' | 'minus', e: MouseEvent) => {
+  if (props.disabled) {
+    return;
+  }
+  let v = Number.isNaN(numberValue) ? 0 : numberValue;
+
+  if (type === 'plus' && canAdd.value) {
+    v += props.step;
+    v = updateValue(String(v));
+    emits('plus', v, e);
+  } else if (type === 'minus' && canMinus.value) {
+    v -= props.step;
+    v = updateValue(String(v));
+    emits('minus', v, e);
+  }
 };
 </script>
 <template>
-  <label
-    class="o-input"
-    :class="[
-      `o-input-size-${props.size || defaultSize}`,
-      `o-input-shape-${props.shape || defaultShape}`,
-      {
-        'is-disabled': props.disabled,
-        'is-focus': isFocus,
-      },
-    ]"
+  <OInput
+    :model-value="currentValue"
+    class="o-input-number"
+    :class="[`o-input-number-size-${props.size || defaultSize}`, { 'is-invalid': !isValid }]"
+    :size="props.size"
+    :shape="props.shape"
+    :placeholder="props.placeholder"
+    :status="props.status"
+    :disabled="props.disabled"
+    :readonly="props.readonly"
+    :clearable="false"
+    @input="onInput"
+    @change="onChange"
+    @blur="onBlur"
+    @focus="onFocus"
+    @press-enter="onPressEnter"
+    @update:model-value="onUpdateModelValue"
   >
-    <span v-if="$slots.prepend" class="o-input-prepend">
-      <slot name="prepend"></slot>
-    </span>
-    <div
-      class="o-input-wrap"
-      :class="{
-        'has-suffix': $slots.suffix,
-        clearable: props.clearable && props.value !== '',
-        'has-prepend': $slots.prepend,
-        'has-append': $slots.append,
-      }"
-    >
-      <div v-if="$slots.prefix" class="o-input-prefix">
-        <slot name="prefix"></slot>
+    <template v-if="['both', 'left'].includes(props.controls)" #prepend>
+      <div
+        v-if="props.controls === 'both'"
+        class="o-input-number-btn prepend"
+        :class="{
+          'is-disabled': !canMinus,
+        }"
+        @click="(e) => controlClick('minus', e)"
+      >
+        <slot name="minus"><IconMinus /></slot>
       </div>
-      <input
-        :value="props.value ?? currentValue"
-        :placeholder="props.placeholder"
-        class="o-input-input"
-        :readonly="props.readonly || props.disabled"
-        @focus="onFocus"
-        @blur="onBlur"
-        @input="onInput"
-        @keydown="onKeyDown"
-        @compositionstart="onCompositionStart"
-        @compositionend="onCompositionEnd"
-      />
-      <div v-if="props.clearable || $slots.suffix" class="o-input-suffix">
-        <div v-if="props.clearable" class="o-input-clear" @click="clearClick"><IconX class="o-input-clear-icon" /></div>
-        <span v-if="$slots.suffix" class="o-input-suffix-wrap">
-          <slot name="suffix"></slot>
-        </span>
+      <div v-if="props.controls === 'left'" class="o-input-number-btn is-vertical">
+        <div
+          class="o-input-number-btn-plus"
+          :class="{
+            'is-disabled': !canAdd,
+          }"
+          @click="(e) => controlClick('plus', e)"
+        >
+          <slot name="add"><IconChevronUp class="o-input-number-icon-plus" /></slot>
+        </div>
+        <div
+          class="o-input-number-btn-minus"
+          :class="{
+            'is-disabled': !canMinus,
+          }"
+          @click="(e) => controlClick('minus', e)"
+        >
+          <slot name="minus"><IconChevronDown class="o-input-number-icon-minus" /></slot>
+        </div>
       </div>
-    </div>
-    <span v-if="$slots.append" class="o-input-append">
-      <slot name="append"></slot>
-    </span>
-  </label>
+    </template>
+    <template v-if="['both', 'right'].includes(props.controls)" #append>
+      <div
+        v-if="props.controls === 'both'"
+        class="o-input-number-btn append"
+        :class="{
+          'is-disabled': !canAdd,
+        }"
+        @click="(e) => controlClick('plus', e)"
+      >
+        <slot name="add"><IconAdd /></slot>
+      </div>
+      <div v-if="props.controls === 'right'" class="o-input-number-btn is-vertical">
+        <div
+          class="o-input-number-btn-plus"
+          :class="{
+            'is-disabled': !canAdd,
+          }"
+          @click="(e) => controlClick('plus', e)"
+        >
+          <slot name="add"><IconChevronUp class="o-input-number-icon-plus" /></slot>
+        </div>
+        <div
+          class="o-input-number-btn-minus"
+          :class="{
+            'is-disabled': !canMinus,
+          }"
+          @click="(e) => controlClick('minus', e)"
+        >
+          <slot name="minus"><IconChevronDown class="o-input-number-icon-minus" /></slot>
+        </div>
+      </div>
+    </template>
+    <template v-if="$slots.prefix" #prefix>
+      <slot name="prefix"></slot>
+    </template>
+
+    <template v-if="$slots.suffix" #suffix>
+      <slot name="suffix"></slot>
+    </template>
+  </OInput>
 </template>
diff --git a/packages/opendesign/src/components/input-number/__demo__/IndexInputNumber.vue b/packages/opendesign/src/components/input-number/__demo__/IndexInputNumber.vue
index f43868a0cf4311bd11a4e0f63056014153d112ca..fbbf8d791a0d8e24caa5d4b84c20d29283d89129 100644
--- a/packages/opendesign/src/components/input-number/__demo__/IndexInputNumber.vue
+++ b/packages/opendesign/src/components/input-number/__demo__/IndexInputNumber.vue
@@ -3,11 +3,13 @@ import '../style';
 import '../../option/style';
 
 import InputNumberBasic from './InputNumberBasic.vue';
+import InputNumberEvent from './InputNumberEvent.vue';
 import InputNumberSlot from './InputNumberSlot.vue';
 </script>
 <template>
   <div class="page-demo">
     <InputNumberBasic />
+    <InputNumberEvent />
     <InputNumberSlot />
   </div>
 </template>
diff --git a/packages/opendesign/src/components/input-number/__demo__/InputNumberBasic.vue b/packages/opendesign/src/components/input-number/__demo__/InputNumberBasic.vue
index 87cbc9633992ac2b601f23ba64621e7a931e0f51..28b350bbd9a49c1c6659f3250ce117c0ef6db590 100644
--- a/packages/opendesign/src/components/input-number/__demo__/InputNumberBasic.vue
+++ b/packages/opendesign/src/components/input-number/__demo__/InputNumberBasic.vue
@@ -1,57 +1,90 @@
 <script setup lang="ts">
 import { ref } from 'vue';
 import { OInputNumber } from '../index';
-import { IconDone } from '../../icons';
 
-const val1 = ref('');
-const val2 = ref('this is input value');
-const val3 = ref(`${12345}`);
-const val4 = ref(12345);
+const val1 = ref(0);
 setTimeout(() => {
-  val2.value += '---';
+  val1.value = 3;
 }, 2000);
-
-const printEvent = (event: string, val?: string | number) => {
-  console.log(event, val);
-};
+const val2 = ref(100);
+const val3 = ref(3333);
+const val4 = ref('1px');
 </script>
 <template>
   <h4>Basic</h4>
+  <div>val1:{{ val1 }}</div>
   <section>
-    <div>val1:{{ val1 }}</div>
-    <OInputNumber v-model:value="val1" />
-    <OInputNumber
-      v-model:value="val2"
-      @blur="() => printEvent('blur')"
-      @change="(v) => printEvent('change', v)"
-      @input="(v) => printEvent('input', v)"
-      @focus="printEvent('focus')"
-      @press-enter="(v) => printEvent('press-enter', v)"
-    />
-    <OInputNumber v-model:value="val3" />
+    <div class="col">
+      v-model:
+      <OInputNumber v-model="val1" style="width: 150px" />
+    </div>
+    <div class="col">
+      model-value:
+      <OInputNumber :model-value="val1" style="width: 150px" />
+    </div>
+    <div class="col">
+      default-value:
+      <OInputNumber :default-value="val1" style="width: 150px" />
+    </div>
+  </section>
+  <section>
+    <div class="col">
+      readonly:
+      <OInputNumber v-model="val1" readonly />
+    </div>
+    <div class="col">
+      controls none:
+      <OInputNumber v-model="val1" controls="none" />
+    </div>
+    <div class="col">
+      controls left:
+      <OInputNumber v-model="val1" controls="left" />
+    </div>
+    <div class="right">
+      controls left:
+      <OInputNumber v-model="val1" controls="right" :max="5" />
+    </div>
   </section>
   <h4>Size</h4>
+  <div>val2:{{ val2 }}</div>
   <section>
-    <div>val1:{{ val1 }}</div>
-    <OInputNumber v-model:value="val2" size="small" />
-    <OInputNumber v-model:value="val2" />
-    <OInputNumber v-model:value="val3" size="large" />
+    <OInputNumber v-model="val2" size="small" />
+    <OInputNumber v-model="val2" />
+    <OInputNumber v-model="val3" size="large" />
+  </section>
+  <h4>Shape</h4>
+  <section>
+    <OInputNumber v-model="val2" size="small" shape="round" />
+    <OInputNumber v-model="val2" shape="round" />
+    <OInputNumber v-model="val3" size="large" shape="round" />
+
+    <OInputNumber v-model="val2" size="small" shape="round" controls="none" />
+    <OInputNumber v-model="val2" shape="round" controls="none" />
+    <OInputNumber v-model="val3" size="large" shape="round" controls="none" />
   </section>
   <h4>Disabled</h4>
   <section>
     <div>val1:{{ val1 }}</div>
-    <OInputNumber v-model:value="val2" disabled />
-    <OInputNumber v-model:value="val2" disabled>
-      <template #prefix>
-        <IconDone />
-      </template>
+    <OInputNumber v-model="val1" disabled />
+    <OInputNumber v-model="val1" disabled style="width: 150px">
+      <template #prefix>$</template>
     </OInputNumber>
-    <OInputNumber v-model:value="val2" disabled>
-      <template #suffix>
-        <IconDone />
-      </template>
+    <OInputNumber v-model="val1" disabled style="width: 150px">
+      <template #suffix> 元 </template>
+    </OInputNumber>
+  </section>
+
+  <h4>Step & min & max</h4>
+  <section>
+    <div>val4:{{ val4 }}</div>
+    <OInputNumber v-model="val4" :step="2" />
+    <OInputNumber v-model="val4" :min="1" style="width: 150px">
+      <template #prefix>$</template>
+    </OInputNumber>
+    <OInputNumber v-model="val4" :max="5" style="width: 150px">
+      <template #suffix> 元 </template>
     </OInputNumber>
-    <OInputNumber v-model:value="val2" :clearable="false" disabled>
+    <OInputNumber v-model="val4" :step="3" :min="3" :max="8" style="width: 150px">
       <template #suffix> 元 </template>
     </OInputNumber>
   </section>
diff --git a/packages/opendesign/src/components/input-number/__demo__/InputNumberEvent.vue b/packages/opendesign/src/components/input-number/__demo__/InputNumberEvent.vue
new file mode 100644
index 0000000000000000000000000000000000000000..1e353858afffc8c4970fdffb77e571ceb83da251
--- /dev/null
+++ b/packages/opendesign/src/components/input-number/__demo__/InputNumberEvent.vue
@@ -0,0 +1,58 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { OInputNumber } from '../index';
+
+const val1 = ref(NaN);
+const event = ref('--');
+
+const printEvent = (evt: string, val?: string | number) => {
+  console.log(`[${evt}]`, val);
+  event.value = evt;
+};
+
+const format = (val: string | number) => (Number.isNaN(val) ? '' : `$${val ?? ''}`);
+const parse = (val: string) => val.replace(/^\$/g, '');
+</script>
+<template>
+  <h4>Event</h4>
+  <div>val1:{{ val1 }}</div>
+  <section>
+    <div>
+      <OInputNumber
+        v-model="val1"
+        :min="-2"
+        :max="5"
+        style="width: 200px"
+        @blur="(v) => printEvent('blur', v)"
+        @minus="(v) => printEvent('minus', v)"
+        @plus="(v) => printEvent('plus', v)"
+        @change="(v) => printEvent('change', v)"
+        @input="(v) => printEvent('input', v)"
+        @focus="(v) => printEvent('focus', v)"
+        @press-enter="(v) => printEvent('press-enter', v)"
+      />
+      value: {{ val1 }}; event:{{ event }};
+    </div>
+  </section>
+  <section>
+    <div>
+      <OInputNumber
+        v-model="val1"
+        :min="-2"
+        :max="15"
+        style="width: 200px"
+        :format="format"
+        :parse="parse"
+        @blur="(v) => printEvent('blur', v)"
+        @minus="(v) => printEvent('minus', v)"
+        @plus="(v) => printEvent('plus', v)"
+        @change="(v) => printEvent('change', v)"
+        @input="(v) => printEvent('input', v)"
+        @focus="(v) => printEvent('focus', v)"
+        @press-enter="(v) => printEvent('press-enter', v)"
+      />
+      value: {{ val1 }}; event:{{ event }};
+    </div>
+  </section>
+</template>
+<style lang="scss"></style>
diff --git a/packages/opendesign/src/components/input-number/__demo__/InputNumberSlot.vue b/packages/opendesign/src/components/input-number/__demo__/InputNumberSlot.vue
index 174543b7053ec0477fba159028c675d8f6fa3d6e..982b54537de8d1c4848b309f206f00fd0bb1a62f 100644
--- a/packages/opendesign/src/components/input-number/__demo__/InputNumberSlot.vue
+++ b/packages/opendesign/src/components/input-number/__demo__/InputNumberSlot.vue
@@ -1,27 +1,29 @@
 <script setup lang="ts">
 import { ref } from 'vue';
 import { OInputNumber } from '../index';
-import { IconDone } from '../../icons';
 
 const val1 = ref('');
-const val2 = ref('this is input value');
+const val2 = ref(1000);
 </script>
 <template>
   <h4>Prefix & Suffix</h4>
   <section>
-    <div>val1:{{ val1 }}</div>
-    <OInputNumber v-model:value="val2" />
-    <OInputNumber v-model:value="val2">
-      <template #prefix>
-        <IconDone />
-      </template>
+    <OInputNumber v-model:value="val1" style="width: 150px">
+      <template #minus>Plus</template>
+      <template #add>Minus</template>
     </OInputNumber>
-    <OInputNumber v-model:value="val2">
-      <template #suffix>
-        <IconDone />
-      </template>
+    <OInputNumber v-model:value="val1" controls="left" style="width: 150px">
+      <template #minus>+</template>
+      <template #add>-</template>
+    </OInputNumber>
+    <OInputNumber v-model:value="val1" controls="right" style="width: 150px">
+      <template #minus>+</template>
+      <template #add>-</template>
+    </OInputNumber>
+    <OInputNumber v-model:value="val2" style="width: 150px">
+      <template #prefix> $ </template>
     </OInputNumber>
-    <OInputNumber v-model:value="val2" :clearable="false">
+    <OInputNumber v-model:value="val2" :clearable="false" style="width: 150px">
       <template #suffix> 元 </template>
     </OInputNumber>
   </section>
diff --git a/packages/opendesign/src/components/input-number/input-number.ts b/packages/opendesign/src/components/input-number/input-number.ts
new file mode 100644
index 0000000000000000000000000000000000000000..3d24dcf47415fbcbf39969c4a6ddf59cb3a31539
--- /dev/null
+++ b/packages/opendesign/src/components/input-number/input-number.ts
@@ -0,0 +1,49 @@
+import { isFunction, isNumber, isUndefined } from '../_shared/is';
+
+export function isValidNumber(val?: string | number, min?: number, max?: number, parse?: (value: string) => string) {
+  if (Number.isNaN(val)) {
+    return true;
+  }
+  const value = isFunction(parse) ? parse(String(val)) : val;
+  if (isNumber(Number(value))) {
+    const v = Number(value);
+    if (!isUndefined(min) && v < min) {
+      return false;
+    }
+    if (!isUndefined(max) && v > max) {
+      return false;
+    }
+
+    return true;
+  }
+  return false;
+}
+
+export function getRealValue(val?: string | number, min?: number, max?: number, parse?: (value: string) => string) {
+
+  const value = isFunction(parse) ? parse(String(val)) : val;
+
+  let rlt: number = NaN;
+  if (value !== '' && isValidNumber(value, min, max)) {
+    rlt = Number(value);
+    if (min !== undefined) {
+      rlt = rlt < min ? min : rlt;
+    }
+    if (max !== undefined) {
+      rlt = rlt > max ? max : rlt;
+    }
+  }
+  return rlt;
+}
+
+export function correctValue(val: string | number, lastVal: number, min?: number, max?: number) {
+  const v = Number(val);
+  if (isNumber(v)) {
+    if (!isUndefined(max) && v > max) {
+      return max;
+    } if (!isUndefined(min) && v < min) {
+      return min;
+    }
+  }
+  return lastVal;
+}
\ No newline at end of file
diff --git a/packages/opendesign/src/components/input-number/style/index.scss b/packages/opendesign/src/components/input-number/style/index.scss
index 691856eb39c0fbdd8ef36427d6301d9c642f264e..b980678972416f1378538ca120d7c3461431470c 100644
--- a/packages/opendesign/src/components/input-number/style/index.scss
+++ b/packages/opendesign/src/components/input-number/style/index.scss
@@ -1,8 +1,86 @@
-@import './var.scss';
-@import '../../input/style/index.scss';
+@use './var.scss';
 
 .o-input-number {
-  cursor: pointer;
-  color: var(--input-color);
+  .o-input-prepend,
+  .o-input-append {
+    font-size: 14px;
+    padding: 0;
+    align-items: stretch;
+    overflow: hidden;
+  }
+
+  // &.is-disabled {
+  //   .o-input-prepend,
+  //   .o-input-append {
+  //     background-color: var(--input-number-btn-bg-disabled);
+  //     color: var(--input-number-btn-color-disabled);
+  //   }
+  // }
+  &.is-invalid {
+    .o-input-input {
+      text-decoration: line-through;
+    }
+  }
+}
+.o-input-number-btn {
+  user-select: none;
+  align-items: center;
+  justify-content: center;
+  display: flex;
+  min-width: var(--input-height);
+  font-size: var(--input-number-icon-size);
+  flex-wrap: wrap;
+  color: var(--input-number-btn-color);
+
+  &:not(.is-vertical):hover {
+    color: var(--input-number-btn-color-hover);
+    background-color: var(--input-number-btn-bg);
+  }
+  &.is-disabled {
+    cursor: not-allowed;
+    background-color: var(--input-number-btn-bg-disabled);
+    color: var(--input-number-btn-color-disabled);
+  }
+
+  .o-input-shape-round & {
+    &.append {
+      padding-right: 2px;
+    }
+    &.prepend {
+      padding-left: 2px;
+    }
+  }
+}
+.o-input-number-btn-minus,
+.o-input-number-btn-plus {
+  width: 100%;
+  height: 50%;
   display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 16px;
+  overflow: hidden;
+  position: relative;
+  &:hover {
+    color: var(--input-number-btn-color-hover);
+    background-color: var(--input-number-btn-bg);
+  }
+}
+.o-input-number-icon-minus {
+  position: absolute;
+  margin-top: -4px;
+}
+.o-input-number-icon-plus {
+  position: absolute;
+  margin-bottom: -4px;
+}
+
+.o-input-number-size-small {
+  width: 90px;
+}
+.o-input-number-size-normal {
+  width: 120px;
+}
+.o-input-number-size-large {
+  width: 160px;
 }
diff --git a/packages/opendesign/src/components/input-number/style/index.ts b/packages/opendesign/src/components/input-number/style/index.ts
index 67aac616fc2524b146b7b078fd3b67c1bd3b4a6e..cb6997f11f11b59ee5e559fd9e37339e395a856d 100644
--- a/packages/opendesign/src/components/input-number/style/index.ts
+++ b/packages/opendesign/src/components/input-number/style/index.ts
@@ -1 +1,3 @@
+import '../../style';
+import '../../input/style';
 import './index.scss';
diff --git a/packages/opendesign/src/components/input-number/style/var.scss b/packages/opendesign/src/components/input-number/style/var.scss
index 4423942feadcde233f8c14572e05f7a47ae1f93e..bea38d1458d7bae84a0982b85e91823cb6f2db05 100644
--- a/packages/opendesign/src/components/input-number/style/var.scss
+++ b/packages/opendesign/src/components/input-number/style/var.scss
@@ -1,31 +1,8 @@
 .o-input-number {
-  --input-text-size-s: var(--o-font_size-tip1);
-  --input-text-height-s: var(--o-line_height-tip1);
-  --input-text-size-m: var(--o-font_size-text);
-  --input-text-height-m: var(--o-line_height-text);
-  --input-text-size-l: var(--o-font_size-h4);
-  --input-text-height-l: var(--o-line_height-h4);
-
-  --input-height-s: var(--o-size-s);
-  --input-height-m: var(--o-size-m);
-  --input-height-l: var(--o-size-l);
-
-  --input-radius-s: var(--o-radius-s);
-  --input-radius-m: var(--o-radius-s);
-  --input-radius-l: var(--o-radius-s);
-
-  --input-border: var(--o-color-info1);
-  --input-border-hover: var(--o-color-primary2);
-  --input-border-active: var(--o-color-primary3);
-  --input-border-disabled: var(--o-color-info1);
-
-  --input-bg: var(--o-color-bg1);
-  --input-bg-hover: var(--o-color-bg3);
-  --input-bg-active: var(--o-color-bg3);
-  --input-bg-disabled: var(--o-color-info4);
-
-  --input-color: var(--o-color-text2);
-  --input-color-disabled: var(--o-color-text4);
-
-  --input-icon-color: var(--o-color-text3);
+  --input-number-icon-size: 16px;
+  --input-number-btn-color: var(--o-color-text3);
+  --input-number-btn-color-hover: var(--o-color-primary1);
+  --input-number-btn-bg: var(--o-color-bg2);
+  --input-number-btn-bg-disabled: var(--o-color-info4);
+  --input-number-btn-color-disabled: var(--o-color-text4);
 }
diff --git a/packages/opendesign/src/components/input/OInput.vue b/packages/opendesign/src/components/input/OInput.vue
index cb46b01deaef906074fa72a41a91b5cc20965dbd..fd37793b90839f6e2689b7358891520d58e5051a 100644
--- a/packages/opendesign/src/components/input/OInput.vue
+++ b/packages/opendesign/src/components/input/OInput.vue
@@ -1,17 +1,23 @@
 <script setup lang="ts">
-import { ref, watch, computed } from 'vue';
+import { ref, computed, watch } from 'vue';
 import { defaultSize, defaultShape, SizeT, ShapeT } from '../_shared/global';
-import { isFunction, isNull, isUndefined } from '../_shared/is';
+import { isFunction } from '../_shared/is';
 import { IconX } from '../icons';
 import { trigger } from '../_shared/event';
 import { Enter } from '../_shared/keycode';
+import { toInputString } from './input';
 
 interface InputPropT {
   /**
    * 下拉框的值
    * v-model
    */
-  value: string | number;
+  modelValue?: string | number;
+  /**
+   * 下拉框的默认值
+   * 非受控
+   */
+  defaultValue?: string | number;
   /**
    * 大小
    */
@@ -24,6 +30,10 @@ interface InputPropT {
    * 提示文本
    */
   placeholder?: string;
+  /**
+   * 状态，显示指定，用于非表单场景
+   */
+  status?: 'success' | 'warning' | 'error';
   /**
    * 是否禁用
    */
@@ -31,7 +41,7 @@ interface InputPropT {
   /**
    * 是否只读
    */
-  readonly?: false;
+  readonly?: boolean;
   /**
    * 是否可以清除
    */
@@ -51,7 +61,8 @@ interface InputPropT {
   format?: (value: string | number) => string | number;
 }
 const props = withDefaults(defineProps<InputPropT>(), {
-  value: '',
+  modelValue: undefined,
+  defaultValue: '',
   size: undefined,
   shape: undefined,
   placeholder: '',
@@ -59,54 +70,66 @@ const props = withDefaults(defineProps<InputPropT>(), {
   clearable: true,
   parse: undefined,
   format: undefined,
+  status: undefined,
 });
 
 const emits = defineEmits<{
-  (e: 'update:value', value: string | number): void;
-  (e: 'change', value: string | number): void;
-  (e: 'input', value: string | number, evt: Event): void;
-  (e: 'blur', value: string | number, evt: FocusEvent): void;
-  (e: 'focus', value: string | number, evt: FocusEvent): void;
+  (e: 'update:modelValue', value: string): void;
+  (e: 'change', value: string): void;
+  (e: 'input', value: string, evt: Event): void;
+  (e: 'blur', value: string, evt: FocusEvent): void;
+  (e: 'focus', value: string, evt: FocusEvent): void;
   (e: 'clear', evt: Event): void;
-  (e: 'pressEnter', value: string | number, evt: Event): void;
+  (e: 'pressEnter', value: string, evt: KeyboardEvent): void;
 }>();
 
-// 输入框值
-const currentValue = ref(props.value);
+const inputRef = ref<HTMLElement | null>(null);
+// 数字输入框当前值
+const realValue = ref(toInputString(props.modelValue ?? props.defaultValue));
+// 监听属性变化，刷新值
+watch(
+  () => props.modelValue,
+  (val) => {
+    // console.log('watch', val);
+    realValue.value = toInputString(val);
+  }
+);
+
 // 输入框显示的字符串
 const displayValue = computed(() => {
-  if (isNull(currentValue.value) || isUndefined(currentValue.value)) {
-    return '';
-  }
-  return isFunction(props.format) ? props.format(currentValue.value) : currentValue.value;
+  const v = isFunction(props.format) ? props.format(realValue.value) : realValue.value;
+  // console.log('displayValue', v, realValue.value);
+  return v;
 });
 
+// 输入框状态
+const status = ref<undefined | 'warning' | 'warn' | 'error'>();
+const statusClass = computed(() => (status.value || props.status ? `is-${status.value || props.status}` : ''));
+
+// 是否聚焦状态
 const isFocus = ref(false);
+let lastValue: string = realValue.value;
 
 function updateValue(val: string) {
-  currentValue.value = isFunction(props.parse) ? props.parse(val) : val;
+  const value = isFunction(props.parse) ? props.parse(val) : val;
+  emits('update:modelValue', value);
 
-  emits('change', val);
-  emits('update:value', val);
+  if (lastValue !== value) {
+    emits('change', value);
+    lastValue = value;
+  }
+  return value;
 }
 
 // 正在输入中文，处理输入过程中触发input事件
 let isComposing = false;
+let clickInside = false;
 
-const onInput = (e: InputEvent) => {
-  if (isComposing) {
-    return;
-  }
-  const val = (e.target as HTMLInputElement)?.value;
-  console.log(e.data);
-
-  updateValue(val);
-  emits('input', currentValue.value, e);
-};
-
+// 开始中文输入
 const onCompositionStart = () => {
   isComposing = true;
 };
+// 结束中文输入
 const onCompositionEnd = (e: Event) => {
   if (!isComposing) {
     return;
@@ -116,39 +139,78 @@ const onCompositionEnd = (e: Event) => {
   trigger(e.target as HTMLElement, 'input');
 };
 
+const onInput = (e: Event) => {
+  if (isComposing) {
+    return;
+  }
+  const val = (e.target as HTMLInputElement)?.value;
+  emits('input', val, e);
+  // console.log('input', val);
+
+  if (!props.parse) {
+    emits('update:modelValue', val);
+    // console.log('update:modelValue', val);
+  }
+};
+
 const onFocus = (e: FocusEvent) => {
+  clickInside = false;
+  if (isFocus.value) {
+    return;
+  }
+  // console.log('onFocus', clickInside);
   isFocus.value = true;
-  emits('focus', currentValue.value, e);
+  emits('focus', realValue.value, e);
+  // console.log('focus', realValue.value);
 };
 
 const onBlur = (e: FocusEvent) => {
+  if (clickInside) {
+    clickInside = false;
+    return;
+  }
+  // console.log('onBlur', clickInside);
   isFocus.value = false;
-  emits('blur', currentValue.value, e);
+  const val = (e.target as HTMLInputElement)?.value;
+  const v = updateValue(val);
+  emits('blur', v, e);
+  // console.log('blur', v);
 };
 
 const onKeyDown = (e: KeyboardEvent) => {
   const keyCode = e.key || e.code;
   if (!isComposing && keyCode === Enter.key) {
-    emits('pressEnter', currentValue.value, e);
+    const val = (e.target as HTMLInputElement)?.value;
+    const v = updateValue(val);
+    emits('pressEnter', v, e);
+    // console.log('pressEnter', v);
   }
 };
-
+// 清除值
 const clearClick = (e: Event) => {
   updateValue('');
   emits('clear', e);
 };
+const onMouseDown = (e: MouseEvent) => {
+  if ((e.target as HTMLInputElement) !== inputRef.value) {
+    clickInside = true;
+  }
+};
 </script>
 <template>
   <label
     class="o-input"
     :class="[
+      statusClass,
       `o-input-size-${props.size || defaultSize}`,
       `o-input-shape-${props.shape || defaultShape}`,
+      `o-input-status-${props.status}`,
       {
-        'is-disabled': props.disabled,
-        'is-focus': isFocus,
+        'o-input-disabled': props.disabled,
+        'o-input-focus': isFocus,
       },
     ]"
+    @mousedown="onMouseDown"
   >
     <span v-if="$slots.prepend" class="o-input-prepend">
       <slot name="prepend"></slot>
@@ -156,21 +218,24 @@ const clearClick = (e: Event) => {
     <div
       class="o-input-wrap"
       :class="{
+        'o-input-clearable': props.clearable && realValue !== '' && !props.disabled,
         'has-suffix': $slots.suffix,
-        clearable: props.clearable && props.value !== '',
         'has-prepend': $slots.prepend,
         'has-append': $slots.append,
+        'is-focus': isFocus,
       }"
     >
       <div v-if="$slots.prefix" class="o-input-prefix">
         <slot name="prefix"></slot>
       </div>
       <input
+        ref="inputRef"
         :value="displayValue"
         :type="type"
         :placeholder="props.placeholder"
         class="o-input-input"
-        :readonly="props.readonly || props.disabled"
+        :readonly="props.readonly"
+        :disabled="props.disabled"
         @focus="onFocus"
         @blur="onBlur"
         @input="onInput"
@@ -179,10 +244,10 @@ const clearClick = (e: Event) => {
         @compositionend="onCompositionEnd"
       />
       <div v-if="props.clearable || $slots.suffix" class="o-input-suffix">
-        <div v-if="props.clearable" class="o-input-clear" @click="clearClick"><IconX class="o-input-clear-icon" /></div>
         <span v-if="$slots.suffix" class="o-input-suffix-wrap">
           <slot name="suffix"></slot>
         </span>
+        <div v-if="props.clearable" class="o-input-clear" @click="clearClick"><IconX class="o-input-clear-icon" /></div>
       </div>
     </div>
     <span v-if="$slots.append" class="o-input-append">
diff --git a/packages/opendesign/src/components/input/__demo__/IndexInput.vue b/packages/opendesign/src/components/input/__demo__/IndexInput.vue
index ebc32065699473c6826a55cfed8415fa26f1206a..288cd57d1a02d402ecae816d3d93065b2b634866 100644
--- a/packages/opendesign/src/components/input/__demo__/IndexInput.vue
+++ b/packages/opendesign/src/components/input/__demo__/IndexInput.vue
@@ -3,12 +3,14 @@ import '../style';
 import '../../option/style';
 
 import InputBasic from './InputBasic.vue';
+import InputEvent from './InputEvent.vue';
 import InputSlot from './InputSlot.vue';
 import InputMethod from './InputMethod.vue';
 </script>
 <template>
   <div class="page-demo">
     <InputBasic />
+    <InputEvent />
     <InputSlot />
     <InputMethod />
   </div>
diff --git a/packages/opendesign/src/components/input/__demo__/InputBasic.vue b/packages/opendesign/src/components/input/__demo__/InputBasic.vue
index e883ae21e9f77f8adbf44ee4ee6abe82d2168c90..765a1904eafefd75b415477791d3da6aae8063bf 100644
--- a/packages/opendesign/src/components/input/__demo__/InputBasic.vue
+++ b/packages/opendesign/src/components/input/__demo__/InputBasic.vue
@@ -12,47 +12,79 @@ setTimeout(() => {
 }, 2000);
 
 const printEvent = (event: string, val?: string | number) => {
-  console.log(event, val);
+  console.log(`[${event}]`, val);
 };
 </script>
 <template>
   <h4>Basic</h4>
   <section>
     <div>val1:{{ val1 }}</div>
-    <OInput v-model:value="val1" />
+    <OInput v-model="val1" />
+    <div>val2:{{ val2 }}</div>
     <OInput
-      v-model:value="val2"
-      @blur="() => printEvent('blur')"
+      v-model="val2"
+      @blur="(v) => printEvent('blur', v)"
       @change="(v) => printEvent('change', v)"
       @input="(v) => printEvent('input', v)"
-      @focus="printEvent('focus')"
+      @focus="(v) => printEvent('focus', v)"
+      @clear="(v) => printEvent('clear')"
       @press-enter="(v) => printEvent('press-enter', v)"
     />
-    <OInput v-model:value="val3" />
-    <OInput v-model:value="val3" type="password" />
+    <OInput v-model="val3" />
+    <OInput v-model="val3" type="password" />
   </section>
   <h4>Size</h4>
   <section>
     <div>val1:{{ val1 }}</div>
-    <OInput v-model:value="val2" size="small" />
-    <OInput v-model:value="val2" />
-    <OInput v-model:value="val3" size="large" />
+    <OInput v-model="val2" size="small" />
+    <OInput v-model="val2" />
+    <OInput v-model="val3" size="large" />
+  </section>
+  <h4>Shape</h4>
+  <section>
+    <div>val1:{{ val1 }}</div>
+    <OInput v-model="val2" size="small" shape="round" />
+    <OInput v-model="val2" shape="round" />
+    <OInput v-model="val3" size="large" shape="round" />
+    <OInput v-model="val2" disabled shape="round">
+      <template #prefix><IconDone /></template>
+      <template #suffix> 元 </template>
+    </OInput>
+    <OInput v-model="val2" shape="round" size="small">
+      <template #prepend>+86</template>
+      <template #append>手机</template>
+    </OInput>
+    <OInput v-model="val2" shape="round">
+      <template #prepend>+86</template>
+      <template #append>手机</template>
+    </OInput>
+    <OInput v-model="val2" shape="round" size="large">
+      <template #prepend>+86</template>
+      <template #append>手机</template>
+    </OInput>
+  </section>
+  <h4>Status</h4>
+  <section>
+    <div>val1:{{ val1 }}</div>
+    <OInput v-model="val2" status="success" />
+    <OInput v-model="val2" status="warning" />
+    <OInput v-model="val2" status="error" />
   </section>
   <h4>Disabled</h4>
   <section>
     <div>val1:{{ val1 }}</div>
-    <OInput v-model:value="val2" disabled />
-    <OInput v-model:value="val2" disabled>
+    <OInput v-model="val2" disabled />
+    <OInput v-model="val2" disabled>
       <template #prefix>
         <IconDone />
       </template>
     </OInput>
-    <OInput v-model:value="val2" disabled>
+    <OInput v-model="val2" disabled>
       <template #suffix>
         <IconDone />
       </template>
     </OInput>
-    <OInput v-model:value="val2" :clearable="false" disabled>
+    <OInput v-model="val2" :clearable="false" disabled>
       <template #suffix> 元 </template>
     </OInput>
   </section>
diff --git a/packages/opendesign/src/components/input/__demo__/InputEvent.vue b/packages/opendesign/src/components/input/__demo__/InputEvent.vue
new file mode 100644
index 0000000000000000000000000000000000000000..88c1ac1240b8233fa5bb231372b4b1cc783ffb00
--- /dev/null
+++ b/packages/opendesign/src/components/input/__demo__/InputEvent.vue
@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { OInput } from '../index';
+
+const val2 = ref('this is input value');
+const event = ref('--');
+
+const printEvent = (evt: string, val?: string | number) => {
+  console.log(`[${evt}]`, val);
+  event.value = evt;
+};
+</script>
+<template>
+  <h4>Event</h4>
+  <section>
+    <OInput
+      v-model="val2"
+      @blur="(v) => printEvent('blur', v)"
+      @change="(v) => printEvent('change', v)"
+      @input="(v) => printEvent('input', v)"
+      @focus="(v) => printEvent('focus', v)"
+      @press-enter="(v) => printEvent('press-enter', v)"
+    >
+      <template #prepend>+86</template>
+      <template #append>RMB</template>
+    </OInput>
+    value: {{ val2 }}; event:{{ event }};
+  </section>
+</template>
+<style lang="scss"></style>
diff --git a/packages/opendesign/src/components/input/__demo__/InputMethod.vue b/packages/opendesign/src/components/input/__demo__/InputMethod.vue
index 3d4f898eff039c08e4e57bbeb19dca005ad32ccc..ad6f74a14d8670b22070a2ff8b27a6d79dd2043a 100644
--- a/packages/opendesign/src/components/input/__demo__/InputMethod.vue
+++ b/packages/opendesign/src/components/input/__demo__/InputMethod.vue
@@ -1,18 +1,29 @@
 <script setup lang="ts">
 import { ref } from 'vue';
 import { OInput } from '../index';
-import { IconDone } from '../../icons';
 
-const val1 = ref('');
-const val2 = ref('this is input value');
+const val2 = ref('1234');
 const format = (val: string | number) => (val ? `$${val}` : '');
 const parse = (val: string) => val.replace(/^\$/g, '');
+
+const printEvent = (evt: string, val?: string | number) => {
+  console.log(`[${evt}]`, val);
+};
 </script>
 <template>
-  <h4>Format</h4>
+  <h4>Parse & Format</h4>
   <section>
-    <div>val1:{{ val1 }}</div>
-    <OInput v-model:value="val2" :format="format" :parse="parse" />
+    <div>val2:{{ val2 }}</div>
+    <OInput
+      v-model="val2"
+      :format="format"
+      :parse="parse"
+      @blur="(v) => printEvent('blur', v)"
+      @change="(v) => printEvent('change', v)"
+      @input="(v) => printEvent('input', v)"
+      @focus="(v) => printEvent('focus', v)"
+      @press-enter="(v) => printEvent('press-enter', v)"
+    />
   </section>
 </template>
 <style lang="scss"></style>
diff --git a/packages/opendesign/src/components/input/__demo__/InputSlot.vue b/packages/opendesign/src/components/input/__demo__/InputSlot.vue
index 846b883ae4dd5e041bdbddd3e24bfa542f8477c2..be6b0f0eafc156c5df858938ea3873c162766f3a 100644
--- a/packages/opendesign/src/components/input/__demo__/InputSlot.vue
+++ b/packages/opendesign/src/components/input/__demo__/InputSlot.vue
@@ -10,28 +10,28 @@ const val2 = ref('this is input value');
   <h4>Prefix & Suffix</h4>
   <section>
     <div>val1:{{ val1 }}</div>
-    <OInput v-model:value="val2" />
-    <OInput v-model:value="val2">
+    <OInput v-model="val2" />
+    <OInput v-model="val2">
       <template #prefix>
         <IconDone />
       </template>
     </OInput>
-    <OInput v-model:value="val2">
+    <OInput v-model="val2">
       <template #suffix>
         <IconDone />
       </template>
     </OInput>
-    <OInput v-model:value="val2" :clearable="false">
+    <OInput v-model="val2">
       <template #suffix> 元 </template>
     </OInput>
   </section>
 
   <h4>Prepend & Append</h4>
   <section>
-    <OInput v-model:value="val2">
+    <OInput v-model="val2">
       <template #prepend>+86</template>
     </OInput>
-    <OInput v-model:value="val2">
+    <OInput v-model="val2">
       <template #append>RMB</template>
     </OInput>
   </section>
diff --git a/packages/opendesign/src/components/input/input.ts b/packages/opendesign/src/components/input/input.ts
new file mode 100644
index 0000000000000000000000000000000000000000..7c05e51f294e2438fa0736281a17ceaaf7a7fbe0
--- /dev/null
+++ b/packages/opendesign/src/components/input/input.ts
@@ -0,0 +1,8 @@
+import { isNull, isUndefined } from '../_shared/is';
+
+export function toInputString(val: unknown): string {
+  if (isUndefined(val) || isNull(val) || (typeof val === 'number' && isNaN(val as number))) {
+    return '';
+  }
+  return String(val);
+}
\ No newline at end of file
diff --git a/packages/opendesign/src/components/input/provide.ts b/packages/opendesign/src/components/input/provide.ts
new file mode 100644
index 0000000000000000000000000000000000000000..dadbbb51f7d3fb4fb5a0ad72533a53547c03e27c
--- /dev/null
+++ b/packages/opendesign/src/components/input/provide.ts
@@ -0,0 +1,6 @@
+import { InjectionKey } from 'vue';
+
+export const tabsInjectKey: InjectionKey<{
+  validator: (value: string | number) => boolean
+}> = Symbol('provide-form-item');
+
diff --git a/packages/opendesign/src/components/input/style/index.scss b/packages/opendesign/src/components/input/style/index.scss
index e362c3a92ef6f73cabda875ca6478ffd29adc1ee..c37f0eaaf80f09706430534c2d75ffa21999d26d 100644
--- a/packages/opendesign/src/components/input/style/index.scss
+++ b/packages/opendesign/src/components/input/style/index.scss
@@ -1,102 +1,30 @@
-@import './var.scss';
-@import '../../popup/style/index.scss';
+@use './var.scss';
 
 .o-input {
   cursor: pointer;
   color: var(--input-color);
   display: inline-flex;
-}
-.o-input-size-small {
-  height: var(--input-height-s);
-  font-size: var(--input-text-size-s);
-  line-height: var(--input-text-height-s);
-  .o-input-wrap {
-    padding-left: 6px;
-    padding-right: 6px;
-    border-radius: var(--input-radius-s);
-  }
-}
-
-.o-input-size-normal {
-  height: var(--input-height-m);
-  font-size: var(--input-text-size-m);
-  line-height: var(--input-text-height-m);
-  .o-input-wrap {
-    padding-left: 12px;
-    padding-right: 12px;
-    border-radius: var(--input-radius-m);
-  }
-  .o-input-append {
-    border-top-right-radius: var(--input-radius-m);
-    border-bottom-right-radius: var(--input-radius-m);
-  }
-
-  .o-input-prepend {
-    border-top-left-radius: var(--input-radius-m);
-    border-bottom-left-radius: var(--input-radius-m);
-  }
-}
-
-.o-input-size-large {
-  height: var(--input-height-l);
-  font-size: var(--input-text-size-l);
-  line-height: var(--input-text-height-l);
-  .o-input-wrap {
-    padding-left: 16px;
-    padding-right: 16px;
-    border-radius: var(--input-radius-l);
-  }
-}
-
-.o-input-shape-round {
-  border-radius: 100px;
+  height: var(--input-height);
+  font-size: var(--input-text-size);
+  line-height: var(--input-text-height);
 }
 
 .o-input-wrap {
   display: flex;
-  padding: 0 12px;
+  padding: var(--input-padding);
+  border-radius: var(--input-radius);
   border: 1px solid var(--input-border);
+  background-color: var(--input-bg);
 
   &:hover {
     border-color: var(--input-border-hover);
     background-color: var(--input-bg-hover);
   }
-  .o-input.is-focus & {
-    border-color: var(--input-border-active);
-    background-color: var(--input-bg-active);
+  &.is-focus {
+    border-color: var(--input-border-focus);
+    background-color: var(--input-bg-focus);
   }
-  .o-input.is-disabled & {
-    color: var(--input-color-disabled);
-    cursor: not-allowed;
-    border-color: var(--input-border-disabled);
-    background-color: var(--input-bg-disabled);
-  }
-
-  .o-input:not(.is-disabled) & {
-    &.clearable {
-      &.has-suffix {
-        .o-input-clear {
-          position: absolute;
-          right: 0;
-          height: 100%;
-        }
 
-        &:hover {
-          .o-input-suffix-wrap {
-            visibility: hidden;
-            opacity: 0;
-          }
-        }
-      }
-      &:hover {
-        .o-input-clear {
-          visibility: visible;
-          opacity: 1;
-          transform: scale(1);
-        }
-      }
-    }
-  }
   &.has-prepend {
     border-top-left-radius: 0;
     border-bottom-left-radius: 0;
@@ -107,6 +35,32 @@
   }
 }
 
+.o-input-disabled {
+  .o-input-clear {
+    display: none;
+  }
+  .o-input-wrap {
+    color: var(--input-color-disabled);
+    cursor: not-allowed;
+    border-color: var(--input-border-disabled);
+    background-color: var(--input-bg-disabled);
+  }
+}
+
+.o-input-clearable {
+  &:hover {
+    .o-input-suffix-wrap {
+      visibility: hidden;
+      opacity: 0;
+    }
+    .o-input-clear {
+      visibility: visible;
+      opacity: 1;
+      transform: scale(1);
+    }
+  }
+}
+
 .o-input-input {
   outline: none;
   border: none;
@@ -117,6 +71,7 @@
   width: 100%;
   caret-color: var(--o-color-primary1);
   padding: 4px 0;
+  line-height: inherit;
 }
 
 .o-input-clear {
@@ -127,6 +82,15 @@
   display: flex;
   align-items: center;
   justify-content: center;
+  color: var(--input-icon-color);
+  &:hover {
+    color: var(--input-icon-color-hover);
+  }
+  .o-input-suffix-wrap + & {
+    position: absolute;
+    right: 0;
+    height: 100%;
+  }
 }
 .o-input-suffix-wrap {
   transition: all var(var(--o-duration-m1)) var(--o-easing-standard-out);
@@ -140,9 +104,9 @@
 .o-input-prefix {
   display: flex;
   align-items: center;
-
   margin-right: 4px;
 }
+
 .o-input-clear-icon {
   stroke-width: 0.5px;
 }
@@ -151,15 +115,92 @@
 .o-input-prepend {
   display: flex;
   align-items: center;
-  padding: 0 8px;
 }
 
 .o-input-append {
   border: 1px solid var(--o-color-border2);
   border-left: 0;
+  flex-shrink: 0;
+  padding: var(--input-append-padding);
+  border-top-right-radius: var(--input-append-prepend-border-radius);
+  border-bottom-right-radius: var(--input-append-prepend-border-radius);
 }
 
 .o-input-prepend {
   border: 1px solid var(--o-color-border2);
   border-right: 0;
+  flex-shrink: 0;
+  padding: var(--input-prepend-padding);
+  border-top-left-radius: var(--input-append-prepend-border-radius);
+  border-bottom-left-radius: var(--input-append-prepend-border-radius);
+}
+.o-input-size-small {
+  --input-height: var(--input-height-s);
+  --input-text-size: var(--input-text-size-s);
+  --input-text-height: var(--input-text-height-s);
+  --input-append-prepend-border-radius: var(--input-radius-s);
+  --input-padding: 0 8px;
+  --input-radius: var(--input-radius-s);
+  --input-append-padding: 0 4px;
+  --input-prepend-padding: 0 4px;
+  &.o-input-shape-round {
+    --input-append-padding: 0 6px 0 4px;
+    --input-prepend-padding: 0 4px 0 6px;
+  }
+}
+.o-input-size-normal {
+  --input-height: var(--input-height-m);
+  --input-text-size: var(--input-text-size-m);
+  --input-text-height: var(--input-text-height-m);
+  --input-append-prepend-border-radius: var(--input-radius-m);
+  --input-padding: 0 12px;
+  --input-radius: var(--input-radius-m);
+  --input-append-padding: 0 8px;
+  --input-prepend-padding: 0 8px;
+  &.o-input-shape-round {
+    --input-append-padding: 0 12px 0 8px;
+    --input-prepend-padding: 0 8px 0 12px;
+  }
+}
+.o-input-size-large {
+  --input-height: var(--input-height-l);
+  --input-text-size: var(--input-text-size-l);
+  --input-text-height: var(--input-text-height-l);
+  --input-append-prepend-border-radius: var(--input-radius-l);
+  --input-padding: 0 16px;
+  --input-radius: var(--input-radius-l);
+  --input-append-padding: 0 12px;
+  --input-prepend-padding: 0 12px;
+  &.o-input-shape-round {
+    --input-append-padding: 0 16px 0 12px;
+    --input-prepend-padding: 0 12px 0 16px;
+  }
+}
+.o-input-shape-round {
+  --input-radius: 100px;
+  --input-append-prepend-border-radius: 100px;
+}
+.o-input-status-success {
+  --input-border: var(--input-border-success);
+  --input-border-hover: var(--input-border-success-hover);
+  --input-border-focus: var(--input-border-success-focus);
+  --input-bg: var(--input-bg-success);
+  --input-bg-hover: var(--input-bg-success-hover);
+  --input-bg-focus: var(--input-bg-success-focus);
+}
+.o-input-status-warning {
+  --input-border: var(--input-border-warning);
+  --input-border-hover: var(--input-border-warning-hover);
+  --input-border-focus: var(--input-border-warning-focus);
+  --input-bg: var(--input-bg-warning);
+  --input-bg-hover: var(--input-bg-warning-hover);
+  --input-bg-focus: var(--input-bg-warning-focus);
+}
+.o-input-status-error {
+  --input-border: var(--input-border-error);
+  --input-border-hover: var(--input-border-error-hover);
+  --input-border-focus: var(--input-border-error-focus);
+  --input-bg: var(--input-bg-error);
+  --input-bg-hover: var(--input-bg-error-hover);
+  --input-bg-focus: var(--input-bg-error-focus);
 }
diff --git a/packages/opendesign/src/components/input/style/index.ts b/packages/opendesign/src/components/input/style/index.ts
index 67aac616fc2524b146b7b078fd3b67c1bd3b4a6e..591b2fbd72dcd5e987362d645b561bd2fac42716 100644
--- a/packages/opendesign/src/components/input/style/index.ts
+++ b/packages/opendesign/src/components/input/style/index.ts
@@ -1 +1,2 @@
+import '../../style';
 import './index.scss';
diff --git a/packages/opendesign/src/components/input/style/var.scss b/packages/opendesign/src/components/input/style/var.scss
index 68300ef26ff53ff0aa2addcde54352baf128f95a..04db1135586688f517d1da0d789ad4977fb7e45e 100644
--- a/packages/opendesign/src/components/input/style/var.scss
+++ b/packages/opendesign/src/components/input/style/var.scss
@@ -16,16 +16,41 @@
 
   --input-border: var(--o-color-info1);
   --input-border-hover: var(--o-color-primary2);
-  --input-border-active: var(--o-color-primary3);
+  --input-border-focus: var(--o-color-primary3);
   --input-border-disabled: var(--o-color-info1);
 
   --input-bg: var(--o-color-bg1);
   --input-bg-hover: var(--o-color-bg3);
-  --input-bg-active: var(--o-color-bg3);
+  --input-bg-focus: var(--o-color-bg3);
   --input-bg-disabled: var(--o-color-info4);
 
   --input-color: var(--o-color-text2);
   --input-color-disabled: var(--o-color-text4);
 
   --input-icon-color: var(--o-color-text3);
+  --input-icon-color-hover: var(--o-color-primary1);
+
+  --input-border-success: var(--o-color-success1);
+  --input-border-success-hover: var(--o-color-success2);
+  --input-border-success-focus: var(--o-color-success3);
+  --input-border-warning: var(--o-color-warning1);
+  --input-border-warning-hover: var(--o-color-warning2);
+  --input-border-warning-focus: var(--o-color-warning3);
+  --input-border-error: var(--o-color-danger1);
+  --input-border-error-hover: var(--o-color-danger2);
+  --input-border-error-focus: var(--o-color-danger3);
+
+  --input-bg-success: var(--o-color-bg1);
+  --input-bg-success-hover: var(--o-color-bg1);
+  --input-bg-success-focus: var(--o-color-bg1);
+  --input-bg-warning: var(--o-color-bg1);
+  --input-bg-warning-hover: var(--o-color-bg1);
+  --input-bg-warning-focus: var(--o-color-bg1);
+  --input-bg-error: var(--o-color-bg1);
+  --input-bg-error-hover: var(--o-color-bg1);
+  --input-bg-error-focus: var(--o-color-bg1);
+
+  --input-color-success: var(--o-color-text2);
+  --input-color-warning: var(--o-color-text2);
+  --input-color-error: var(--o-color-text2);
 }
diff --git a/packages/opendesign/src/components/link/style/index.scss b/packages/opendesign/src/components/link/style/index.scss
index e90f42eb00faa79bb9bfdde73a3b2469d13eceba..bd197baed952dd680426ecce4b7d0d15aeaf044d 100644
--- a/packages/opendesign/src/components/link/style/index.scss
+++ b/packages/opendesign/src/components/link/style/index.scss
@@ -1,4 +1,4 @@
-@import './var.scss';
+@use './var.scss';
 
 .o-link {
   cursor: pointer;
diff --git a/packages/opendesign/src/components/link/style/index.ts b/packages/opendesign/src/components/link/style/index.ts
index 67aac616fc2524b146b7b078fd3b67c1bd3b4a6e..591b2fbd72dcd5e987362d645b561bd2fac42716 100644
--- a/packages/opendesign/src/components/link/style/index.ts
+++ b/packages/opendesign/src/components/link/style/index.ts
@@ -1 +1,2 @@
+import '../../style';
 import './index.scss';
diff --git a/packages/opendesign/src/components/option/style/index.scss b/packages/opendesign/src/components/option/style/index.scss
index b40e5d9961594db8a57d08b2a056b78e074dceff..ab688a641fd993a3aaebf3fb258cd5d559451625 100644
--- a/packages/opendesign/src/components/option/style/index.scss
+++ b/packages/opendesign/src/components/option/style/index.scss
@@ -1,4 +1,4 @@
-@import './var.scss';
+@use './var.scss';
 
 .o-option {
   cursor: pointer;
diff --git a/packages/opendesign/src/components/option/style/index.ts b/packages/opendesign/src/components/option/style/index.ts
index 67aac616fc2524b146b7b078fd3b67c1bd3b4a6e..591b2fbd72dcd5e987362d645b561bd2fac42716 100644
--- a/packages/opendesign/src/components/option/style/index.ts
+++ b/packages/opendesign/src/components/option/style/index.ts
@@ -1 +1,2 @@
+import '../../style';
 import './index.scss';
diff --git a/packages/opendesign/src/components/pagination/OPagination.vue b/packages/opendesign/src/components/pagination/OPagination.vue
index 1ca092ddf979bfd3bfbe50942e0d39f640bb1a4a..714d57024695768d299955c9815279e293d0961f 100644
--- a/packages/opendesign/src/components/pagination/OPagination.vue
+++ b/packages/opendesign/src/components/pagination/OPagination.vue
@@ -2,7 +2,7 @@
 import { computed, ref } from 'vue';
 import { getPagerItem, PagerItemT, getSizeOptions } from './pagination';
 import { OPopover } from '../popover';
-import { OInput } from '../input';
+import { OInputNumber } from '../input-number';
 import { OSelect } from '../select';
 import { OOption } from '../option';
 
@@ -113,7 +113,7 @@ const goToChange = (val: string | number) => {
         <div class="o-pagination-pages">
           <template v-if="props.simple">
             <div class="o-pagination-simple">
-              <OInput v-model:value="currentPage" :clearable="false" class="o-pagination-input" />&nbsp;/&nbsp;<span>{{ totalPage }}</span>
+              <OInputNumber :model-value="currentPage" :clearable="false" class="o-pagination-input" controls="none" />&nbsp;/&nbsp;<span>{{ totalPage }}</span>
             </div>
           </template>
           <template v-else>
@@ -149,7 +149,13 @@ const goToChange = (val: string | number) => {
           </OSelect>
         </div>
         <div class="o-pagination-goto">
-          {{ Labels.goto }}&nbsp;<OInput :value="currentPage" class="o-pagination-input" :clearable="false" @blur="goToChange" @press-enter="goToChange" />
+          {{ Labels.goto }}&nbsp;<OInputNumber
+            :model-value="currentPage"
+            class="o-pagination-input"
+            controls="none"
+            @blur="goToChange"
+            @press-enter="goToChange"
+          />
         </div>
       </template>
     </div>
diff --git a/packages/opendesign/src/components/pagination/style/index.scss b/packages/opendesign/src/components/pagination/style/index.scss
index a1046108739dbde4d1497571e3cdd20f9ba43318..b470b41966b697d5602e61dbd95a8333b195250a 100644
--- a/packages/opendesign/src/components/pagination/style/index.scss
+++ b/packages/opendesign/src/components/pagination/style/index.scss
@@ -1,8 +1,4 @@
-@import './var.scss';
-@import '../../popover/style/index.scss';
-@import '../../input/style/index.scss';
-@import '../../select/style/index.scss';
-@import '../../option/style/index.scss';
+@use './var.scss';
 
 .o-pagination-wrap {
   display: flex;
diff --git a/packages/opendesign/src/components/pagination/style/index.ts b/packages/opendesign/src/components/pagination/style/index.ts
index 67aac616fc2524b146b7b078fd3b67c1bd3b4a6e..aa8a4285e54a74d28064f01c9460f1a620077d19 100644
--- a/packages/opendesign/src/components/pagination/style/index.ts
+++ b/packages/opendesign/src/components/pagination/style/index.ts
@@ -1 +1,6 @@
+import '../../style';
+import '../../popover/style';
+import '../../input-number/style';
+import '../../select/style';
+import '../../option/style';
 import './index.scss';
diff --git a/packages/opendesign/src/components/popover/style/index.scss b/packages/opendesign/src/components/popover/style/index.scss
index 3b6b426e06dc046d024196de898a52819b0d3287..b25cd1c71e2eb428c66798422521cd3c959c7794 100644
--- a/packages/opendesign/src/components/popover/style/index.scss
+++ b/packages/opendesign/src/components/popover/style/index.scss
@@ -1,5 +1,4 @@
-@import './var.scss';
-@import '../../popup/style/index.scss';
+@use './var.scss';
 
 .o-popover-wrap {
   background-color: var(--popup-bg);
diff --git a/packages/opendesign/src/components/popover/style/index.ts b/packages/opendesign/src/components/popover/style/index.ts
index 67aac616fc2524b146b7b078fd3b67c1bd3b4a6e..97806f75ad147dd20bd3802a7001ea21d7911191 100644
--- a/packages/opendesign/src/components/popover/style/index.ts
+++ b/packages/opendesign/src/components/popover/style/index.ts
@@ -1 +1,3 @@
+import '../../style';
+import '../../popup/style';
 import './index.scss';
diff --git a/packages/opendesign/src/components/popup/style/index.scss b/packages/opendesign/src/components/popup/style/index.scss
index e2748664e7960e7b891ce465e0c671fc3356bed7..221d58eb4c5bae771ed9ca15ccd02ed0206614f0 100644
--- a/packages/opendesign/src/components/popup/style/index.scss
+++ b/packages/opendesign/src/components/popup/style/index.scss
@@ -1,4 +1,4 @@
-@import './var.scss';
+@use './var.scss';
 
 .o-popup {
   position: absolute;
diff --git a/packages/opendesign/src/components/popup/style/index.ts b/packages/opendesign/src/components/popup/style/index.ts
index 67aac616fc2524b146b7b078fd3b67c1bd3b4a6e..591b2fbd72dcd5e987362d645b561bd2fac42716 100644
--- a/packages/opendesign/src/components/popup/style/index.ts
+++ b/packages/opendesign/src/components/popup/style/index.ts
@@ -1 +1,2 @@
+import '../../style';
 import './index.scss';
diff --git a/packages/opendesign/src/components/radio-group/style/index.scss b/packages/opendesign/src/components/radio-group/style/index.scss
index 65256e14f8787aedfe96916e8ce30d4a5c8dd323..1de61546ca919a42e129a6f9fad5eb391813caec 100644
--- a/packages/opendesign/src/components/radio-group/style/index.scss
+++ b/packages/opendesign/src/components/radio-group/style/index.scss
@@ -1,4 +1,4 @@
-@import './var.scss';
+@use './var.scss';
 
 .o-radio-group {
   display: inline-flex;
diff --git a/packages/opendesign/src/components/radio-group/style/index.ts b/packages/opendesign/src/components/radio-group/style/index.ts
index 67aac616fc2524b146b7b078fd3b67c1bd3b4a6e..591b2fbd72dcd5e987362d645b561bd2fac42716 100644
--- a/packages/opendesign/src/components/radio-group/style/index.ts
+++ b/packages/opendesign/src/components/radio-group/style/index.ts
@@ -1 +1,2 @@
+import '../../style';
 import './index.scss';
diff --git a/packages/opendesign/src/components/radio/style/index.scss b/packages/opendesign/src/components/radio/style/index.scss
index ff61404df7a70d88463350b5e992f963bfbb9269..ade6f34893e48d328687ec594f684f58cd4381d2 100644
--- a/packages/opendesign/src/components/radio/style/index.scss
+++ b/packages/opendesign/src/components/radio/style/index.scss
@@ -1,4 +1,4 @@
-@import './var.scss';
+@use './var.scss';
 
 .o-radio {
   color: var(--radio-color);
diff --git a/packages/opendesign/src/components/radio/style/index.ts b/packages/opendesign/src/components/radio/style/index.ts
index 67aac616fc2524b146b7b078fd3b67c1bd3b4a6e..591b2fbd72dcd5e987362d645b561bd2fac42716 100644
--- a/packages/opendesign/src/components/radio/style/index.ts
+++ b/packages/opendesign/src/components/radio/style/index.ts
@@ -1 +1,2 @@
+import '../../style';
 import './index.scss';
diff --git a/packages/opendesign/src/components/select/style/index.scss b/packages/opendesign/src/components/select/style/index.scss
index cf6cafd68213e4beab8b0fb647eaf281abb3a54f..b66148cce1248ea5ed8a102050e5137fa40ff0c0 100644
--- a/packages/opendesign/src/components/select/style/index.scss
+++ b/packages/opendesign/src/components/select/style/index.scss
@@ -1,5 +1,4 @@
-@import './var.scss';
-@import '../../popup/style/index.scss';
+@use './var.scss';
 
 .o-select {
   border: 1px solid var(--select-border);
diff --git a/packages/opendesign/src/components/select/style/index.ts b/packages/opendesign/src/components/select/style/index.ts
index 67aac616fc2524b146b7b078fd3b67c1bd3b4a6e..97806f75ad147dd20bd3802a7001ea21d7911191 100644
--- a/packages/opendesign/src/components/select/style/index.ts
+++ b/packages/opendesign/src/components/select/style/index.ts
@@ -1 +1,3 @@
+import '../../style';
+import '../../popup/style';
 import './index.scss';
diff --git a/packages/opendesign/src/components/switch/style/index.scss b/packages/opendesign/src/components/switch/style/index.scss
index 4d11d5a16c4823d6edb4b0e30fa574f8e84bb6cb..f8a15e73de78874f0658cc91d3c1338f4917c2b6 100644
--- a/packages/opendesign/src/components/switch/style/index.scss
+++ b/packages/opendesign/src/components/switch/style/index.scss
@@ -1,4 +1,4 @@
-@import './var.scss';
+@use './var.scss';
 
 .o-switch {
   display: inline-block;
diff --git a/packages/opendesign/src/components/switch/style/index.ts b/packages/opendesign/src/components/switch/style/index.ts
index 67aac616fc2524b146b7b078fd3b67c1bd3b4a6e..591b2fbd72dcd5e987362d645b561bd2fac42716 100644
--- a/packages/opendesign/src/components/switch/style/index.ts
+++ b/packages/opendesign/src/components/switch/style/index.ts
@@ -1 +1,2 @@
+import '../../style';
 import './index.scss';
diff --git a/packages/opendesign/src/components/table/style/index.scss b/packages/opendesign/src/components/table/style/index.scss
index e4ac7544769c8c62206002b97f98cbb6c0f80ba8..07dc5cbe47f7b22f1345b39dc5503ef52ea28c2c 100644
--- a/packages/opendesign/src/components/table/style/index.scss
+++ b/packages/opendesign/src/components/table/style/index.scss
@@ -1,4 +1,4 @@
-@import './var.scss';
+@use './var.scss';
 
 .o-table {
   table {
diff --git a/packages/opendesign/src/components/table/style/index.ts b/packages/opendesign/src/components/table/style/index.ts
index 67aac616fc2524b146b7b078fd3b67c1bd3b4a6e..591b2fbd72dcd5e987362d645b561bd2fac42716 100644
--- a/packages/opendesign/src/components/table/style/index.ts
+++ b/packages/opendesign/src/components/table/style/index.ts
@@ -1 +1,2 @@
+import '../../style';
 import './index.scss';
diff --git a/packages/opendesign/src/components/tabs/style/index.scss b/packages/opendesign/src/components/tabs/style/index.scss
index e70ef06f1e6ac04cbc2d4e0d292eb073aa381887..99011a04f477fb4631331c7d197209f5ed6c8e68 100644
--- a/packages/opendesign/src/components/tabs/style/index.scss
+++ b/packages/opendesign/src/components/tabs/style/index.scss
@@ -1,4 +1,4 @@
-@import './var.scss';
+@use './var.scss';
 
 .o-tabs-navs {
   display: flex;
diff --git a/packages/opendesign/src/components/tabs/style/index.ts b/packages/opendesign/src/components/tabs/style/index.ts
index 67aac616fc2524b146b7b078fd3b67c1bd3b4a6e..591b2fbd72dcd5e987362d645b561bd2fac42716 100644
--- a/packages/opendesign/src/components/tabs/style/index.ts
+++ b/packages/opendesign/src/components/tabs/style/index.ts
@@ -1 +1,2 @@
+import '../../style';
 import './index.scss';
diff --git a/packages/portal/src/main.ts b/packages/portal/src/main.ts
index b2e966eac6cda07da2e363aa7b9a633c0a4aa051..d1c01396df0a03a9832b568ee949a54d6d782179 100644
--- a/packages/portal/src/main.ts
+++ b/packages/portal/src/main.ts
@@ -1,6 +1,7 @@
 import { createApp } from 'vue';
 import './style.scss';
 import 'normalize.css';
+// import '@opensig/opendesign/src/components/style';
 import '@opensig/opendesign/src/components/style/default-light.token.css';
 import '@opensig/opendesign/src/components/style/dark.token.css';
 
diff --git a/packages/portal/src/style.scss b/packages/portal/src/style.scss
index 7d087b9a1cbd06084d8bb7765739aaa721b8fca5..3ae61d4f1a3e92d20f1b8334a23e478d591cb442 100644
--- a/packages/portal/src/style.scss
+++ b/packages/portal/src/style.scss
@@ -37,6 +37,13 @@ body {
     color: var(--o-color-text1);
   }
 }
+.col {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  flex-wrap: wrap;
+  gap: 8px;
+}
 section {
   border: 1px solid var(--o-color-border2);
   padding: var(--o-gap-4);