diff --git a/examples/input/demos/status.vue b/examples/input/demos/status.vue
index 4faf01996..921b265e9 100644
--- a/examples/input/demos/status.vue
+++ b/examples/input/demos/status.vue
@@ -1,7 +1,13 @@
 <template>
   <div class="tdesign-demo-block-column" style="max-width: 500px">
+    <t-input default-value="成功状态" />
     <t-input status="success" default-value="成功状态" />
     <t-input status="warning" default-value="警告状态" />
     <t-input status="error" default-value="错误状态" />
+    <br />
+    <t-input default-value="普通状态" tips="这是普通文本提示" />
+    <t-input status="success" default-value="成功状态" tips="校验通过文本提示" />
+    <t-input status="warning" default-value="警告状态" tips="校验不通过文本提示" />
+    <t-input status="error" default-value="错误状态" tips="校验存在严重问题文本提示" />
   </div>
 </template>
diff --git a/examples/input/input.md b/examples/input/input.md
index cf254c59f..475302877 100644
--- a/examples/input/input.md
+++ b/examples/input/input.md
@@ -13,6 +13,7 @@ autocomplete | Boolean | false | 是否开启自动填充功能 | N
 autofocus | Boolean | false | 自动聚焦 | N
 clearable | Boolean | false | 是否可清空 | N
 disabled | Boolean | false | 是否禁用输入框 | N
+format | Function | - | 【讨论中】指定输入框展示值的格式。TS 类型：`(value: number | number) => number | string` | N
 label | String / Slot / Function | - | 左侧文本。TS 类型：`string | TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
 maxcharacter | Number | - | 用户最多可以输入的字符个数，一个中文汉字表示两个字符长度。`maxcharacter` 和 `maxlength` 二选一使用 | N
 maxlength | Number | - | 用户最多可以输入的文本长度。值小于等于 0 的时候，则不限制输入长度。`maxcharacter` 和 `maxlength` 二选一使用 | N
@@ -38,7 +39,7 @@ onKeypress | Function |  | TS 类型：`(value: InputValue, context: { e: Keyboa
 onKeyup | Function |  | TS 类型：`(value: InputValue, context: { e: KeyboardEvent }) => void`<br/>释放键盘时触发 | N
 onMouseenter | Function |  | TS 类型：`(context: { e: MouseEvent }) => void`<br/>进入输入框时触发 | N
 onMouseleave | Function |  | TS 类型：`(context: { e: MouseEvent }) => void`<br/>离开输入框时触发 | N
-onPaste | Function |  | TS 类型：`(context: { e: ClipboardEvent<HTMLInputElement>; pasteValue: string }) => void`<br/>粘贴事件，`pasteValue` 表示粘贴板的内容 | N
+onPaste | Function |  | TS 类型：`(context: { e: ClipboardEvent; pasteValue: string }) => void`<br/>粘贴事件，`pasteValue` 表示粘贴板的内容 | N
 
 ### Input Events
 
@@ -54,4 +55,4 @@ keypress | `(value: InputValue, context: { e: KeyboardEvent })` | 按下字符
 keyup | `(value: InputValue, context: { e: KeyboardEvent })` | 释放键盘时触发
 mouseenter | `(context: { e: MouseEvent })` | 进入输入框时触发
 mouseleave | `(context: { e: MouseEvent })` | 离开输入框时触发
-paste | `(context: { e: ClipboardEvent<HTMLInputElement>; pasteValue: string })` | 粘贴事件，`pasteValue` 表示粘贴板的内容
+paste | `(context: { e: ClipboardEvent; pasteValue: string })` | 粘贴事件，`pasteValue` 表示粘贴板的内容
diff --git a/src/input/input.tsx b/src/input/input.tsx
index c9c65e619..73136b659 100644
--- a/src/input/input.tsx
+++ b/src/input/input.tsx
@@ -4,7 +4,7 @@ import { InputValue, TdInputProps } from './type';
 import { getCharacterLength, omit } from '../utils/helper';
 import getConfigReceiverMixins, { InputConfig } from '../config-provider/config-receiver';
 import mixins from '../utils/mixins';
-
+import { ClassName } from '../common';
 import CLASSNAMES from '../utils/classnames';
 import { emitEvent } from '../utils/event';
 import { prefix } from '../config';
@@ -12,6 +12,8 @@ import props from './props';
 import { renderTNodeJSX } from '../utils/render-tnode';
 
 const name = `${prefix}-input`;
+const INPUT_WRAP_CLASS = `${prefix}-input__wrap`;
+const INPUT_TIPS_CLASS = `${prefix}-input__tips`;
 
 function getValidAttrs(obj: object): object {
   const newObj = {};
@@ -54,6 +56,20 @@ export default mixins(getConfigReceiverMixins<InputInstance, InputConfig>('input
         type: this.renderType,
       });
     },
+    inputClasses(): ClassName {
+      return [
+        name,
+        CLASSNAMES.SIZE[this.size] || '',
+        {
+          [CLASSNAMES.STATUS.disabled]: this.disabled,
+          [CLASSNAMES.STATUS.focused]: this.focused,
+          [`${prefix}-is-${this.status}`]: this.status,
+          [`${prefix}-is-disabled`]: this.disabled,
+          [`${prefix}-is-readonly`]: this.readonly,
+          [`${name}--focused`]: this.focused,
+        },
+      ];
+    },
   },
   watch: {
     autofocus: {
@@ -67,83 +83,11 @@ export default mixins(getConfigReceiverMixins<InputInstance, InputConfig>('input
       immediate: true,
     },
   },
+
   created() {
     this.composing = false;
   },
-  render(h: CreateElement): VNode {
-    const inputEvents = getValidAttrs({
-      focus: this.emitFocus,
-      blur: this.emitBlur,
-      keydown: this.handleKeydown,
-      keyup: this.handleKeyUp,
-      keypress: this.handleKeypress,
-      // input的change事件是失去焦点或者keydown的时候执行。这与api定义的change不符，所以不做任何变化。
-      // eslint-disable-next-line @typescript-eslint/no-empty-function
-      change: () => {},
-    });
-
-    const wrapperAttrs = omit(this.$attrs, Object.keys(this.inputAttrs));
-    const wrapperEvents = omit(this.$listeners, [...Object.keys(inputEvents), 'input']);
-
-    const prefixIcon = this.renderIcon(h, this.prefixIcon, 'prefix-icon');
-    let suffixIcon = this.renderIcon(h, this.suffixIcon, 'suffix-icon');
-
-    const label = renderTNodeJSX(this, 'label');
-    const suffix = renderTNodeJSX(this, 'suffix');
-
-    const labelContent = label ? <div class={`${name}__prefix`}>{label}</div> : null;
-    const suffixContent = suffix ? <div class={`${name}__suffix`}>{suffix}</div> : null;
-
-    if (this.showClear) {
-      suffixIcon = <CloseCircleFilledIcon class={`${name}__suffix-clear`} nativeOnClick={this.emitClear} />;
-    }
-
-    if (this.type === 'password') {
-      if (this.renderType === 'password') {
-        suffixIcon = <BrowseOffIcon class={`${name}__suffix-clear`} nativeOnClick={this.emitPassword} />;
-      } else if (this.renderType === 'text') {
-        suffixIcon = <BrowseIcon class={`${name}__suffix-clear`} nativeOnClick={this.emitPassword} />;
-      }
-    }
 
-    const classes = [
-      name,
-      CLASSNAMES.SIZE[this.size] || '',
-      {
-        [CLASSNAMES.STATUS.disabled]: this.disabled,
-        [CLASSNAMES.STATUS.focused]: this.focused,
-        [`${prefix}-is-${this.status}`]: this.status,
-        [`${name}--prefix`]: prefixIcon || labelContent,
-        [`${name}--suffix`]: suffixIcon || suffixContent,
-        [`${name}--focused`]: this.focused,
-      },
-    ];
-    return (
-      <div
-        class={classes}
-        onMouseenter={() => this.mouseEvent(true)}
-        onMouseleave={() => this.mouseEvent(false)}
-        {...{ attrs: wrapperAttrs, on: wrapperEvents }}
-      >
-        {prefixIcon ? <span class={[`${name}__prefix`, `${name}__prefix-icon`]}>{prefixIcon}</span> : null}
-        {labelContent}
-        <input
-          {...{ attrs: this.inputAttrs, on: inputEvents }}
-          ref="refInputElem"
-          class={`${name}__inner`}
-          value={this.value}
-          onInput={this.handleInput}
-          onCompositionend={this.onCompositionend}
-        />
-        {suffixContent}
-        {suffixIcon ? (
-          <span class={[`${name}__suffix`, `${name}__suffix-icon`, { [`${name}__clear`]: this.showClear }]}>
-            {suffixIcon}
-          </span>
-        ) : null}
-      </div>
-    );
-  },
   methods: {
     mouseEvent(v: boolean) {
       this.isHover = v;
@@ -197,6 +141,12 @@ export default mixins(getConfigReceiverMixins<InputInstance, InputConfig>('input
       if (this.disabled) return;
       emitEvent<Parameters<TdInputProps['onKeypress']>>(this, 'keypress', this.value, { e });
     },
+    onHandlePaste(e: ClipboardEvent) {
+      if (this.disabled) return;
+      // @ts-ignore
+      const clipData = e.clipboardData || window.clipboardData;
+      emitEvent<Parameters<TdInputProps['onPaste']>>(this, 'paste', { e, pasteValue: clipData?.getData('text/plain') });
+    },
     emitPassword() {
       const { renderType } = this;
       const toggleType = renderType === 'password' ? 'text' : 'password';
@@ -231,5 +181,97 @@ export default mixins(getConfigReceiverMixins<InputInstance, InputConfig>('input
       // 受控，重要，勿删
       this.$nextTick(() => this.setInputValue(this.value));
     },
+
+    onInputMouseenter(e: MouseEvent) {
+      this.mouseEvent(true);
+      this.onMouseenter?.({ e });
+    },
+
+    onInputMouseleave(e: MouseEvent) {
+      this.mouseEvent(false);
+      this.onMouseleave?.({ e });
+    },
+  },
+
+  render(h: CreateElement): VNode {
+    const inputEvents = getValidAttrs({
+      focus: this.emitFocus,
+      blur: this.emitBlur,
+      keydown: this.handleKeydown,
+      keyup: this.handleKeyUp,
+      keypress: this.handleKeypress,
+      paste: this.onHandlePaste,
+      // input的change事件是失去焦点或者keydown的时候执行。这与api定义的change不符，所以不做任何变化。
+      // eslint-disable-next-line @typescript-eslint/no-empty-function
+      change: () => {},
+    });
+
+    const wrapperAttrs = omit(this.$attrs, Object.keys(this.inputAttrs));
+    const wrapperEvents = omit(this.$listeners, [...Object.keys(inputEvents), 'input', 'paste']);
+
+    const prefixIcon = this.renderIcon(h, this.prefixIcon, 'prefix-icon');
+    let suffixIcon = this.renderIcon(h, this.suffixIcon, 'suffix-icon');
+
+    const label = renderTNodeJSX(this, 'label');
+    const suffix = renderTNodeJSX(this, 'suffix');
+
+    const labelContent = label ? <div class={`${name}__prefix`}>{label}</div> : null;
+    const suffixContent = suffix ? <div class={`${name}__suffix`}>{suffix}</div> : null;
+
+    if (this.showClear) {
+      suffixIcon = <CloseCircleFilledIcon class={`${name}__suffix-clear`} nativeOnClick={this.emitClear} />;
+    }
+
+    if (this.type === 'password') {
+      if (this.renderType === 'password') {
+        suffixIcon = <BrowseOffIcon class={`${name}__suffix-clear`} nativeOnClick={this.emitPassword} />;
+      } else if (this.renderType === 'text') {
+        suffixIcon = <BrowseIcon class={`${name}__suffix-clear`} nativeOnClick={this.emitPassword} />;
+      }
+    }
+
+    const classes = [
+      this.inputClasses,
+      {
+        [`${name}--prefix`]: prefixIcon || labelContent,
+        [`${name}--suffix`]: suffixIcon || suffixContent,
+      },
+    ];
+    const inputNode = (
+      <div
+        class={classes}
+        onMouseenter={this.onInputMouseenter}
+        onMouseleave={this.onInputMouseleave}
+        {...{ attrs: wrapperAttrs, on: wrapperEvents }}
+      >
+        {prefixIcon ? <span class={[`${name}__prefix`, `${name}__prefix-icon`]}>{prefixIcon}</span> : null}
+        {labelContent}
+        <input
+          {...{ attrs: this.inputAttrs, on: inputEvents }}
+          ref="refInputElem"
+          class={`${name}__inner`}
+          value={this.value}
+          onInput={this.handleInput}
+          onCompositionend={this.onCompositionend}
+        />
+        {suffixContent}
+        {suffixIcon ? (
+          <span class={[`${name}__suffix`, `${name}__suffix-icon`, { [`${name}__clear`]: this.showClear }]}>
+            {suffixIcon}
+          </span>
+        ) : null}
+      </div>
+    );
+
+    const tips = renderTNodeJSX(this, 'tips');
+    if (tips) {
+      return (
+        <div class={INPUT_WRAP_CLASS}>
+          {inputNode}
+          <div class={`${INPUT_TIPS_CLASS} ${prefix}-input__tips--${this.status || 'normal'}`}>{tips}</div>
+        </div>
+      );
+    }
+    return inputNode;
   },
 });
diff --git a/src/input/props.ts b/src/input/props.ts
index d80c8b32b..9fbb72ac0 100644
--- a/src/input/props.ts
+++ b/src/input/props.ts
@@ -2,7 +2,6 @@
 
 /**
  * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
- * updated at 2021-12-28 11:39:46
  * */
 
 import { TdInputProps } from './type';
@@ -17,6 +16,10 @@ export default {
   clearable: Boolean,
   /** 是否禁用输入框 */
   disabled: Boolean,
+  /** 【讨论中】指定输入框展示值的格式 */
+  format: {
+    type: Function as PropType<TdInputProps['format']>,
+  },
   /** 左侧文本 */
   label: {
     type: [String, Function] as PropType<TdInputProps['label']>,
@@ -56,7 +59,6 @@ export default {
   /** 输入框状态 */
   status: {
     type: String as PropType<TdInputProps['status']>,
-    default: undefined as TdInputProps['status'],
     validator(val: TdInputProps['status']): boolean {
       return ['success', 'warning', 'error'].includes(val);
     },
@@ -69,6 +71,10 @@ export default {
   suffixIcon: {
     type: Function as PropType<TdInputProps['suffixIcon']>,
   },
+  /** 输入框下方提示文本，会根据不同的 `status` 呈现不同的样式 */
+  tips: {
+    type: [String, Function] as PropType<TdInputProps['tips']>,
+  },
   /** 输入框类型 */
   type: {
     type: String as PropType<TdInputProps['type']>,
@@ -101,4 +107,10 @@ export default {
   onKeypress: Function as PropType<TdInputProps['onKeypress']>,
   /** 释放键盘时触发 */
   onKeyup: Function as PropType<TdInputProps['onKeyup']>,
+  /** 进入输入框时触发 */
+  onMouseenter: Function as PropType<TdInputProps['onMouseenter']>,
+  /** 离开输入框时触发 */
+  onMouseleave: Function as PropType<TdInputProps['onMouseleave']>,
+  /** 粘贴事件，`pasteValue` 表示粘贴板的内容 */
+  onPaste: Function as PropType<TdInputProps['onPaste']>,
 };
diff --git a/src/input/type.ts b/src/input/type.ts
index ba44232d2..e42ae409e 100644
--- a/src/input/type.ts
+++ b/src/input/type.ts
@@ -2,7 +2,6 @@
 
 /**
  * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
- * updated at 2021-12-28 11:39:46
  * */
 
 import { TNode, SizeEnum } from '../common';
@@ -28,6 +27,10 @@ export interface TdInputProps {
    * @default false
    */
   disabled?: boolean;
+  /**
+   * 【讨论中】指定输入框展示值的格式
+   */
+  format?: (value: number | number) => number | string;
   /**
    * 左侧文本
    */
@@ -75,6 +78,10 @@ export interface TdInputProps {
    * 组件后置图标
    */
   suffixIcon?: TNode;
+  /**
+   * 输入框下方提示文本，会根据不同的 `status` 呈现不同的样式
+   */
+  tips?: string | TNode;
   /**
    * 输入框类型
    * @default text
@@ -120,6 +127,18 @@ export interface TdInputProps {
    * 释放键盘时触发
    */
   onKeyup?: (value: InputValue, context: { e: KeyboardEvent }) => void;
+  /**
+   * 进入输入框时触发
+   */
+  onMouseenter?: (context: { e: MouseEvent }) => void;
+  /**
+   * 离开输入框时触发
+   */
+  onMouseleave?: (context: { e: MouseEvent }) => void;
+  /**
+   * 粘贴事件，`pasteValue` 表示粘贴板的内容
+   */
+  onPaste?: (context: { e: ClipboardEvent; pasteValue: string }) => void;
 }
 
 export type InputValue = string | number;
diff --git a/test/ssr/__snapshots__/ssr.test.js.snap b/test/ssr/__snapshots__/ssr.test.js.snap
index 5ef08eaf1..2ba69167f 100644
--- a/test/ssr/__snapshots__/ssr.test.js.snap
+++ b/test/ssr/__snapshots__/ssr.test.js.snap
@@ -2943,7 +2943,7 @@ exports[`ssr snapshot test renders ./examples/config-provider/demos/date-picker.
     <div class="t-popup__reference t-date-picker__popup-reference">
       <div name="t-popup--animation" appear="true"></div>
       <div class="t-form-controls">
-        <div allowInput="0" class="t-input t-size-m t-input--suffix"><input readonly="readonly" placeholder="select date" type="text" value="" class="t-input__inner"><span class="t-input__suffix t-input__suffix-icon"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-calendar"><path fill="currentColor" d="M10 3H6V1.5H5V3H3a1 1 0 00-1 1v9a1 1 0 001 1h10a1 1 0 001-1V4a1 1 0 00-1-1h-2V1.5h-1V3zM5 5h1V4h4v1h1V4h2v2H3V4h2v1zM3 7h10v6H3V7z" fill-opacity="0.9"></path></svg></span></div>
+        <div allowInput="0" class="t-input t-size-m t-is-readonly t-input--suffix"><input readonly="readonly" placeholder="select date" type="text" value="" class="t-input__inner"><span class="t-input__suffix t-input__suffix-icon"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-calendar"><path fill="currentColor" d="M10 3H6V1.5H5V3H3a1 1 0 00-1 1v9a1 1 0 001 1h10a1 1 0 001-1V4a1 1 0 00-1-1h-2V1.5h-1V3zM5 5h1V4h4v1h1V4h2v2H3V4h2v1zM3 7h10v6H3V7z" fill-opacity="0.9"></path></svg></span></div>
       </div>
     </div>
   </div> <br><br>
@@ -2951,7 +2951,7 @@ exports[`ssr snapshot test renders ./examples/config-provider/demos/date-picker.
     <div class="t-popup__reference t-date-picker__popup-reference">
       <div name="t-popup--animation" appear="true"></div>
       <div class="t-form-controls">
-        <div allowInput="0" class="t-input t-size-m t-input--suffix"><input readonly="readonly" placeholder="select date" type="text" value="" class="t-input__inner"><span class="t-input__suffix t-input__suffix-icon"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-calendar"><path fill="currentColor" d="M10 3H6V1.5H5V3H3a1 1 0 00-1 1v9a1 1 0 001 1h10a1 1 0 001-1V4a1 1 0 00-1-1h-2V1.5h-1V3zM5 5h1V4h4v1h1V4h2v2H3V4h2v1zM3 7h10v6H3V7z" fill-opacity="0.9"></path></svg></span></div>
+        <div allowInput="0" class="t-input t-size-m t-is-readonly t-input--suffix"><input readonly="readonly" placeholder="select date" type="text" value="" class="t-input__inner"><span class="t-input__suffix t-input__suffix-icon"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-calendar"><path fill="currentColor" d="M10 3H6V1.5H5V3H3a1 1 0 00-1 1v9a1 1 0 001 1h10a1 1 0 001-1V4a1 1 0 00-1-1h-2V1.5h-1V3zM5 5h1V4h4v1h1V4h2v2H3V4h2v1zM3 7h10v6H3V7z" fill-opacity="0.9"></path></svg></span></div>
       </div>
     </div>
   </div> <br><br>
@@ -2959,7 +2959,7 @@ exports[`ssr snapshot test renders ./examples/config-provider/demos/date-picker.
     <div class="t-popup__reference t-date-picker__popup-reference">
       <div name="t-popup--animation" appear="true"></div>
       <div class="t-form-controls">
-        <div allowInput="0" class="t-input t-size-m t-input--suffix"><input readonly="readonly" placeholder="select month" type="text" value="" class="t-input__inner"><span class="t-input__suffix t-input__suffix-icon"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-calendar"><path fill="currentColor" d="M10 3H6V1.5H5V3H3a1 1 0 00-1 1v9a1 1 0 001 1h10a1 1 0 001-1V4a1 1 0 00-1-1h-2V1.5h-1V3zM5 5h1V4h4v1h1V4h2v2H3V4h2v1zM3 7h10v6H3V7z" fill-opacity="0.9"></path></svg></span></div>
+        <div allowInput="0" class="t-input t-size-m t-is-readonly t-input--suffix"><input readonly="readonly" placeholder="select month" type="text" value="" class="t-input__inner"><span class="t-input__suffix t-input__suffix-icon"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-calendar"><path fill="currentColor" d="M10 3H6V1.5H5V3H3a1 1 0 00-1 1v9a1 1 0 001 1h10a1 1 0 001-1V4a1 1 0 00-1-1h-2V1.5h-1V3zM5 5h1V4h4v1h1V4h2v2H3V4h2v1zM3 7h10v6H3V7z" fill-opacity="0.9"></path></svg></span></div>
       </div>
     </div>
   </div> <br><br>
@@ -2967,7 +2967,7 @@ exports[`ssr snapshot test renders ./examples/config-provider/demos/date-picker.
     <div class="t-popup__reference t-date-picker__popup-reference">
       <div name="t-popup--animation" appear="true"></div>
       <div class="t-form-controls">
-        <div allowInput="0" class="t-input t-size-m t-input--suffix"><input readonly="readonly" placeholder="select month" type="text" value="" class="t-input__inner"><span class="t-input__suffix t-input__suffix-icon"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-calendar"><path fill="currentColor" d="M10 3H6V1.5H5V3H3a1 1 0 00-1 1v9a1 1 0 001 1h10a1 1 0 001-1V4a1 1 0 00-1-1h-2V1.5h-1V3zM5 5h1V4h4v1h1V4h2v2H3V4h2v1zM3 7h10v6H3V7z" fill-opacity="0.9"></path></svg></span></div>
+        <div allowInput="0" class="t-input t-size-m t-is-readonly t-input--suffix"><input readonly="readonly" placeholder="select month" type="text" value="" class="t-input__inner"><span class="t-input__suffix t-input__suffix-icon"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-calendar"><path fill="currentColor" d="M10 3H6V1.5H5V3H3a1 1 0 00-1 1v9a1 1 0 001 1h10a1 1 0 001-1V4a1 1 0 00-1-1h-2V1.5h-1V3zM5 5h1V4h4v1h1V4h2v2H3V4h2v1zM3 7h10v6H3V7z" fill-opacity="0.9"></path></svg></span></div>
       </div>
     </div>
   </div> <br><br>
@@ -2975,7 +2975,7 @@ exports[`ssr snapshot test renders ./examples/config-provider/demos/date-picker.
     <div class="t-popup__reference t-date-picker__popup-reference">
       <div name="t-popup--animation" appear="true"></div>
       <div class="t-form-controls">
-        <div allowInput="0" class="t-input t-size-m t-input--suffix"><input readonly="readonly" placeholder="select year" type="text" value="" class="t-input__inner"><span class="t-input__suffix t-input__suffix-icon"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-calendar"><path fill="currentColor" d="M10 3H6V1.5H5V3H3a1 1 0 00-1 1v9a1 1 0 001 1h10a1 1 0 001-1V4a1 1 0 00-1-1h-2V1.5h-1V3zM5 5h1V4h4v1h1V4h2v2H3V4h2v1zM3 7h10v6H3V7z" fill-opacity="0.9"></path></svg></span></div>
+        <div allowInput="0" class="t-input t-size-m t-is-readonly t-input--suffix"><input readonly="readonly" placeholder="select year" type="text" value="" class="t-input__inner"><span class="t-input__suffix t-input__suffix-icon"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-calendar"><path fill="currentColor" d="M10 3H6V1.5H5V3H3a1 1 0 00-1 1v9a1 1 0 001 1h10a1 1 0 001-1V4a1 1 0 00-1-1h-2V1.5h-1V3zM5 5h1V4h4v1h1V4h2v2H3V4h2v1zM3 7h10v6H3V7z" fill-opacity="0.9"></path></svg></span></div>
       </div>
     </div>
   </div> <br><br>
@@ -2983,7 +2983,7 @@ exports[`ssr snapshot test renders ./examples/config-provider/demos/date-picker.
     <div class="t-popup__reference t-date-picker__popup-reference">
       <div name="t-popup--animation" appear="true"></div>
       <div class="t-form-controls">
-        <div allowInput="0" class="t-input t-size-m t-input--suffix"><input readonly="readonly" placeholder="select year" type="text" value="" class="t-input__inner"><span class="t-input__suffix t-input__suffix-icon"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-calendar"><path fill="currentColor" d="M10 3H6V1.5H5V3H3a1 1 0 00-1 1v9a1 1 0 001 1h10a1 1 0 001-1V4a1 1 0 00-1-1h-2V1.5h-1V3zM5 5h1V4h4v1h1V4h2v2H3V4h2v1zM3 7h10v6H3V7z" fill-opacity="0.9"></path></svg></span></div>
+        <div allowInput="0" class="t-input t-size-m t-is-readonly t-input--suffix"><input readonly="readonly" placeholder="select year" type="text" value="" class="t-input__inner"><span class="t-input__suffix t-input__suffix-icon"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-calendar"><path fill="currentColor" d="M10 3H6V1.5H5V3H3a1 1 0 00-1 1v9a1 1 0 001 1h10a1 1 0 001-1V4a1 1 0 00-1-1h-2V1.5h-1V3zM5 5h1V4h4v1h1V4h2v2H3V4h2v1zM3 7h10v6H3V7z" fill-opacity="0.9"></path></svg></span></div>
       </div>
     </div>
   </div> <br><br>
@@ -3145,7 +3145,7 @@ exports[`ssr snapshot test renders ./examples/config-provider/demos/others.vue c
   <div class="t-popup__reference t-time-picker t-size-m">
     <div name="t-popup--animation" appear="true"></div>
     <div class="t-time-picker__group">
-      <div class="t-input t-size-m t-input--suffix"><input readonly="readonly" placeholder=" " type="text" class="t-input__inner"><span class="t-input__suffix t-input__suffix-icon"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-time"><path fill="currentColor" d="M7.5 4v4.39L10 11l.7-.7-2.2-2.33V4h-1z" fill-opacity="0.9"></path><path fill="currentColor" d="M15 8A7 7 0 111 8a7 7 0 0114 0zm-1 0A6 6 0 102 8a6 6 0 0012 0z" fill-opacity="0.9"></path></svg></span></div>
+      <div class="t-input t-size-m t-is-readonly t-input--suffix"><input readonly="readonly" placeholder=" " type="text" class="t-input__inner"><span class="t-input__suffix t-input__suffix-icon"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-time"><path fill="currentColor" d="M7.5 4v4.39L10 11l.7-.7-2.2-2.33V4h-1z" fill-opacity="0.9"></path><path fill="currentColor" d="M15 8A7 7 0 111 8a7 7 0 0114 0zm-1 0A6 6 0 102 8a6 6 0 0012 0z" fill-opacity="0.9"></path></svg></span></div>
       <div size="medium" class="t-time-picker__input"><span class="t-time-picker__input-placeholder">select time</span></div>
     </div>
   </div> <br><br><br> <span class="t-tag t-tag--primary t-size-m t-tag--dark t-tag--close">Fearure Tag<svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-close-circle t-tag__icon-close"><path fill="currentColor" d="M4.98 10.31L7.3 8 5 5.69l.7-.7L8 7.28 10.31 5l.7.7L8.72 8l2.3 2.31-.7.7L8 8.72 5.69 11l-.7-.7z" fill-opacity="0.9"></path><path fill="currentColor" d="M8 1a7 7 0 110 14A7 7 0 018 1zm0 1a6 6 0 100 12A6 6 0 008 2z" fill-opacity="0.9"></path></svg></span> <span class="t-tag t-tag--success t-size-m t-tag--dark t-tag--close">Fearure Tag<svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-close-circle t-tag__icon-close"><path fill="currentColor" d="M4.98 10.31L7.3 8 5 5.69l.7-.7L8 7.28 10.31 5l.7.7L8.72 8l2.3 2.31-.7.7L8 8.72 5.69 11l-.7-.7z" fill-opacity="0.9"></path><path fill="currentColor" d="M8 1a7 7 0 110 14A7 7 0 018 1zm0 1a6 6 0 100 12A6 6 0 008 2z" fill-opacity="0.9"></path></svg></span> <span class="t-tag t-tag--warning t-size-m t-tag--dark t-tag--close">Fearure Tag<svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-close-circle t-tag__icon-close"><path fill="currentColor" d="M4.98 10.31L7.3 8 5 5.69l.7-.7L8 7.28 10.31 5l.7.7L8.72 8l2.3 2.31-.7.7L8 8.72 5.69 11l-.7-.7z" fill-opacity="0.9"></path><path fill="currentColor" d="M8 1a7 7 0 110 14A7 7 0 018 1zm0 1a6 6 0 100 12A6 6 0 008 2z" fill-opacity="0.9"></path></svg></span> <span class="t-tag t-tag--danger t-size-m t-tag--dark t-tag--close">Fearure Tag<svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-close-circle t-tag__icon-close"><path fill="currentColor" d="M4.98 10.31L7.3 8 5 5.69l.7-.7L8 7.28 10.31 5l.7.7L8.72 8l2.3 2.31-.7.7L8 8.72 5.69 11l-.7-.7z" fill-opacity="0.9"></path><path fill="currentColor" d="M8 1a7 7 0 110 14A7 7 0 018 1zm0 1a6 6 0 100 12A6 6 0 008 2z" fill-opacity="0.9"></path></svg></span> <br><br>
@@ -3360,7 +3360,7 @@ exports[`ssr snapshot test renders ./examples/date-picker/demos/base.vue correct
     <div class="t-popup__reference t-date-picker__popup-reference">
       <div name="t-popup--animation" appear="true"></div>
       <div class="t-form-controls">
-        <div allowInput="0" class="t-input t-size-m t-input--suffix"><input readonly="readonly" placeholder="请选择日期" type="text" value="" class="t-input__inner"><span class="t-input__suffix t-input__suffix-icon"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-calendar"><path fill="currentColor" d="M10 3H6V1.5H5V3H3a1 1 0 00-1 1v9a1 1 0 001 1h10a1 1 0 001-1V4a1 1 0 00-1-1h-2V1.5h-1V3zM5 5h1V4h4v1h1V4h2v2H3V4h2v1zM3 7h10v6H3V7z" fill-opacity="0.9"></path></svg></span></div>
+        <div allowInput="0" class="t-input t-size-m t-is-readonly t-input--suffix"><input readonly="readonly" placeholder="请选择日期" type="text" value="" class="t-input__inner"><span class="t-input__suffix t-input__suffix-icon"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-calendar"><path fill="currentColor" d="M10 3H6V1.5H5V3H3a1 1 0 00-1 1v9a1 1 0 001 1h10a1 1 0 001-1V4a1 1 0 00-1-1h-2V1.5h-1V3zM5 5h1V4h4v1h1V4h2v2H3V4h2v1zM3 7h10v6H3V7z" fill-opacity="0.9"></path></svg></span></div>
       </div>
     </div>
   </div>
@@ -3373,7 +3373,7 @@ exports[`ssr snapshot test renders ./examples/date-picker/demos/custom-icon.vue
     <div class="t-popup__reference t-date-picker__popup-reference">
       <div name="t-popup--animation" appear="true"></div>
       <div class="t-form-controls">
-        <div allowInput="0" class="t-input t-size-m t-input--prefix t-input--suffix"><span class="t-input__prefix t-input__prefix-icon"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-browse"><path fill="currentColor" d="M10.88 8a2.88 2.88 0 11-5.76 0 2.88 2.88 0 015.76 0zm-1 0a1.88 1.88 0 10-3.76 0 1.88 1.88 0 003.76 0z" fill-opacity="0.9"></path><path fill="currentColor" d="M1.12 8.23A7.72 7.72 0 008 12.5c2.9 0 5.54-1.63 6.88-4.27L15 8l-.12-.23A7.73 7.73 0 008 3.5a7.74 7.74 0 00-6.88 4.27L1 8l.12.23zM8 11.5A6.73 6.73 0 012.11 8 6.73 6.73 0 0113.9 8 6.74 6.74 0 018 11.5z" fill-opacity="0.9"></path></svg></span><input readonly="readonly" placeholder="请选择日期" type="text" value="" class="t-input__inner"><span class="t-input__suffix t-input__suffix-icon"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-lock-on"><path fill="currentColor" d="M6 10v1h4v-1H6z" fill-opacity="0.9"></path><path fill="currentColor" d="M4.5 5v1H3a.5.5 0 00-.5.5v7c0 .28.22.5.5.5h10a.5.5 0 00.5-.5v-7A.5.5 0 0013 6h-1.5V5a3.5 3.5 0 00-7 0zm6 1h-5V5a2.5 2.5 0 015 0v1zm-7 1h9v6h-9V7z" fill-opacity="0.9"></path></svg></span></div>
+        <div allowInput="0" class="t-input t-size-m t-is-readonly t-input--prefix t-input--suffix"><span class="t-input__prefix t-input__prefix-icon"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-browse"><path fill="currentColor" d="M10.88 8a2.88 2.88 0 11-5.76 0 2.88 2.88 0 015.76 0zm-1 0a1.88 1.88 0 10-3.76 0 1.88 1.88 0 003.76 0z" fill-opacity="0.9"></path><path fill="currentColor" d="M1.12 8.23A7.72 7.72 0 008 12.5c2.9 0 5.54-1.63 6.88-4.27L15 8l-.12-.23A7.73 7.73 0 008 3.5a7.74 7.74 0 00-6.88 4.27L1 8l.12.23zM8 11.5A6.73 6.73 0 012.11 8 6.73 6.73 0 0113.9 8 6.74 6.74 0 018 11.5z" fill-opacity="0.9"></path></svg></span><input readonly="readonly" placeholder="请选择日期" type="text" value="" class="t-input__inner"><span class="t-input__suffix t-input__suffix-icon"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-lock-on"><path fill="currentColor" d="M6 10v1h4v-1H6z" fill-opacity="0.9"></path><path fill="currentColor" d="M4.5 5v1H3a.5.5 0 00-.5.5v7c0 .28.22.5.5.5h10a.5.5 0 00.5-.5v-7A.5.5 0 0013 6h-1.5V5a3.5 3.5 0 00-7 0zm6 1h-5V5a2.5 2.5 0 015 0v1zm-7 1h9v6h-9V7z" fill-opacity="0.9"></path></svg></span></div>
       </div>
     </div>
   </div>
@@ -3386,7 +3386,7 @@ exports[`ssr snapshot test renders ./examples/date-picker/demos/date-presets.vue
     <div class="t-popup__reference t-date-picker__popup-reference">
       <div name="t-popup--animation" appear="true"></div>
       <div class="t-form-controls">
-        <div allowInput="0" class="t-input t-size-m t-input--suffix"><input readonly="readonly" placeholder="请选择日期" type="text" value="" class="t-input__inner"><span class="t-input__suffix t-input__suffix-icon"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-calendar"><path fill="currentColor" d="M10 3H6V1.5H5V3H3a1 1 0 00-1 1v9a1 1 0 001 1h10a1 1 0 001-1V4a1 1 0 00-1-1h-2V1.5h-1V3zM5 5h1V4h4v1h1V4h2v2H3V4h2v1zM3 7h10v6H3V7z" fill-opacity="0.9"></path></svg></span></div>
+        <div allowInput="0" class="t-input t-size-m t-is-readonly t-input--suffix"><input readonly="readonly" placeholder="请选择日期" type="text" value="" class="t-input__inner"><span class="t-input__suffix t-input__suffix-icon"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-calendar"><path fill="currentColor" d="M10 3H6V1.5H5V3H3a1 1 0 00-1 1v9a1 1 0 001 1h10a1 1 0 001-1V4a1 1 0 00-1-1h-2V1.5h-1V3zM5 5h1V4h4v1h1V4h2v2H3V4h2v1zM3 7h10v6H3V7z" fill-opacity="0.9"></path></svg></span></div>
       </div>
     </div>
   </div>
@@ -3400,7 +3400,7 @@ exports[`ssr snapshot test renders ./examples/date-picker/demos/date-presets-alt
       <div class="t-popup__reference t-date-picker__popup-reference">
         <div name="t-popup--animation" appear="true"></div>
         <div class="t-form-controls">
-          <div allowInput="0" class="t-input t-size-m t-input--suffix"><input readonly="readonly" placeholder="请选择日期" type="text" value="2021-12-31 至 2021-12-31" class="t-input__inner"><span class="t-input__suffix t-input__suffix-icon"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-calendar"><path fill="currentColor" d="M10 3H6V1.5H5V3H3a1 1 0 00-1 1v9a1 1 0 001 1h10a1 1 0 001-1V4a1 1 0 00-1-1h-2V1.5h-1V3zM5 5h1V4h4v1h1V4h2v2H3V4h2v1zM3 7h10v6H3V7z" fill-opacity="0.9"></path></svg></span></div>
+          <div allowInput="0" class="t-input t-size-m t-is-readonly t-input--suffix"><input readonly="readonly" placeholder="请选择日期" type="text" value="2021-12-31 至 2021-12-31" class="t-input__inner"><span class="t-input__suffix t-input__suffix-icon"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-calendar"><path fill="currentColor" d="M10 3H6V1.5H5V3H3a1 1 0 00-1 1v9a1 1 0 001 1h10a1 1 0 001-1V4a1 1 0 00-1-1h-2V1.5h-1V3zM5 5h1V4h4v1h1V4h2v2H3V4h2v1zM3 7h10v6H3V7z" fill-opacity="0.9"></path></svg></span></div>
         </div>
       </div>
     </div>
@@ -3410,7 +3410,7 @@ exports[`ssr snapshot test renders ./examples/date-picker/demos/date-presets-alt
       <div class="t-popup__reference t-date-picker__popup-reference">
         <div name="t-popup--animation" appear="true"></div>
         <div class="t-form-controls">
-          <div allowInput="0" class="t-input t-size-m t-input--suffix"><input readonly="readonly" placeholder="请选择日期" type="text" value="2021-12-31" class="t-input__inner"><span class="t-input__suffix t-input__suffix-icon"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-calendar"><path fill="currentColor" d="M10 3H6V1.5H5V3H3a1 1 0 00-1 1v9a1 1 0 001 1h10a1 1 0 001-1V4a1 1 0 00-1-1h-2V1.5h-1V3zM5 5h1V4h4v1h1V4h2v2H3V4h2v1zM3 7h10v6H3V7z" fill-opacity="0.9"></path></svg></span></div>
+          <div allowInput="0" class="t-input t-size-m t-is-readonly t-input--suffix"><input readonly="readonly" placeholder="请选择日期" type="text" value="2021-12-31" class="t-input__inner"><span class="t-input__suffix t-input__suffix-icon"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-calendar"><path fill="currentColor" d="M10 3H6V1.5H5V3H3a1 1 0 00-1 1v9a1 1 0 001 1h10a1 1 0 001-1V4a1 1 0 00-1-1h-2V1.5h-1V3zM5 5h1V4h4v1h1V4h2v2H3V4h2v1zM3 7h10v6H3V7z" fill-opacity="0.9"></path></svg></span></div>
         </div>
       </div>
     </div>
@@ -3424,7 +3424,7 @@ exports[`ssr snapshot test renders ./examples/date-picker/demos/date-presets-tim
     <div class="t-popup__reference t-date-picker__popup-reference">
       <div name="t-popup--animation" appear="true"></div>
       <div class="t-form-controls">
-        <div allowInput="0" class="t-input t-size-m t-input--suffix"><input readonly="readonly" placeholder="请选择日期" type="text" value="" class="t-input__inner"><span class="t-input__suffix t-input__suffix-icon"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-calendar"><path fill="currentColor" d="M10 3H6V1.5H5V3H3a1 1 0 00-1 1v9a1 1 0 001 1h10a1 1 0 001-1V4a1 1 0 00-1-1h-2V1.5h-1V3zM5 5h1V4h4v1h1V4h2v2H3V4h2v1zM3 7h10v6H3V7z" fill-opacity="0.9"></path></svg></span></div>
+        <div allowInput="0" class="t-input t-size-m t-is-readonly t-input--suffix"><input readonly="readonly" placeholder="请选择日期" type="text" value="" class="t-input__inner"><span class="t-input__suffix t-input__suffix-icon"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-calendar"><path fill="currentColor" d="M10 3H6V1.5H5V3H3a1 1 0 00-1 1v9a1 1 0 001 1h10a1 1 0 001-1V4a1 1 0 00-1-1h-2V1.5h-1V3zM5 5h1V4h4v1h1V4h2v2H3V4h2v1zM3 7h10v6H3V7z" fill-opacity="0.9"></path></svg></span></div>
       </div>
     </div>
   </div>
@@ -3437,7 +3437,7 @@ exports[`ssr snapshot test renders ./examples/date-picker/demos/date-range.vue c
     <div class="t-popup__reference t-date-picker__popup-reference">
       <div name="t-popup--animation" appear="true"></div>
       <div class="t-form-controls">
-        <div allowInput="0" class="t-input t-size-m t-input--suffix"><input readonly="readonly" placeholder="开始时间 至 结束时间" type="text" value="" class="t-input__inner"><span class="t-input__suffix t-input__suffix-icon"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-calendar"><path fill="currentColor" d="M10 3H6V1.5H5V3H3a1 1 0 00-1 1v9a1 1 0 001 1h10a1 1 0 001-1V4a1 1 0 00-1-1h-2V1.5h-1V3zM5 5h1V4h4v1h1V4h2v2H3V4h2v1zM3 7h10v6H3V7z" fill-opacity="0.9"></path></svg></span></div>
+        <div allowInput="0" class="t-input t-size-m t-is-readonly t-input--suffix"><input readonly="readonly" placeholder="开始时间 至 结束时间" type="text" value="" class="t-input__inner"><span class="t-input__suffix t-input__suffix-icon"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-calendar"><path fill="currentColor" d="M10 3H6V1.5H5V3H3a1 1 0 00-1 1v9a1 1 0 001 1h10a1 1 0 001-1V4a1 1 0 00-1-1h-2V1.5h-1V3zM5 5h1V4h4v1h1V4h2v2H3V4h2v1zM3 7h10v6H3V7z" fill-opacity="0.9"></path></svg></span></div>
       </div>
     </div>
   </div> <br> <br>
@@ -3445,7 +3445,7 @@ exports[`ssr snapshot test renders ./examples/date-picker/demos/date-range.vue c
     <div class="t-popup__reference t-date-picker__popup-reference">
       <div name="t-popup--animation" appear="true"></div>
       <div class="t-form-controls">
-        <div allowInput="0" class="t-input t-size-m t-input--suffix"><input readonly="readonly" placeholder="请选择日期" type="text" value="" class="t-input__inner"><span class="t-input__suffix t-input__suffix-icon"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-time"><path fill="currentColor" d="M7.5 4v4.39L10 11l.7-.7-2.2-2.33V4h-1z" fill-opacity="0.9"></path><path fill="currentColor" d="M15 8A7 7 0 111 8a7 7 0 0114 0zm-1 0A6 6 0 102 8a6 6 0 0012 0z" fill-opacity="0.9"></path></svg></span></div>
+        <div allowInput="0" class="t-input t-size-m t-is-readonly t-input--suffix"><input readonly="readonly" placeholder="请选择日期" type="text" value="" class="t-input__inner"><span class="t-input__suffix t-input__suffix-icon"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-time"><path fill="currentColor" d="M7.5 4v4.39L10 11l.7-.7-2.2-2.33V4h-1z" fill-opacity="0.9"></path><path fill="currentColor" d="M15 8A7 7 0 111 8a7 7 0 0114 0zm-1 0A6 6 0 102 8a6 6 0 0012 0z" fill-opacity="0.9"></path></svg></span></div>
       </div>
     </div>
   </div>
@@ -3458,7 +3458,7 @@ exports[`ssr snapshot test renders ./examples/date-picker/demos/date-time.vue co
     <div class="t-popup__reference t-date-picker__popup-reference">
       <div name="t-popup--animation" appear="true"></div>
       <div class="t-form-controls">
-        <div allowInput="0" class="t-input t-size-m t-input--suffix"><input readonly="readonly" placeholder="请选择日期" type="text" value="2021-05-01 11:30:20" class="t-input__inner"><span class="t-input__suffix t-input__suffix-icon"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-time"><path fill="currentColor" d="M7.5 4v4.39L10 11l.7-.7-2.2-2.33V4h-1z" fill-opacity="0.9"></path><path fill="currentColor" d="M15 8A7 7 0 111 8a7 7 0 0114 0zm-1 0A6 6 0 102 8a6 6 0 0012 0z" fill-opacity="0.9"></path></svg></span></div>
+        <div allowInput="0" class="t-input t-size-m t-is-readonly t-input--suffix"><input readonly="readonly" placeholder="请选择日期" type="text" value="2021-05-01 11:30:20" class="t-input__inner"><span class="t-input__suffix t-input__suffix-icon"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-time"><path fill="currentColor" d="M7.5 4v4.39L10 11l.7-.7-2.2-2.33V4h-1z" fill-opacity="0.9"></path><path fill="currentColor" d="M15 8A7 7 0 111 8a7 7 0 0114 0zm-1 0A6 6 0 102 8a6 6 0 0012 0z" fill-opacity="0.9"></path></svg></span></div>
       </div>
     </div>
   </div>
@@ -3472,7 +3472,7 @@ exports[`ssr snapshot test renders ./examples/date-picker/demos/disable-date.vue
       <div class="t-popup__reference t-date-picker__popup-reference">
         <div name="t-popup--animation" appear="true"></div>
         <div class="t-form-controls">
-          <div allowInput="0" class="t-input t-size-m t-input--suffix"><input readonly="readonly" placeholder="请选择日期" type="text" value="" class="t-input__inner"><span class="t-input__suffix t-input__suffix-icon"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-calendar"><path fill="currentColor" d="M10 3H6V1.5H5V3H3a1 1 0 00-1 1v9a1 1 0 001 1h10a1 1 0 001-1V4a1 1 0 00-1-1h-2V1.5h-1V3zM5 5h1V4h4v1h1V4h2v2H3V4h2v1zM3 7h10v6H3V7z" fill-opacity="0.9"></path></svg></span></div>
+          <div allowInput="0" class="t-input t-size-m t-is-readonly t-input--suffix"><input readonly="readonly" placeholder="请选择日期" type="text" value="" class="t-input__inner"><span class="t-input__suffix t-input__suffix-icon"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-calendar"><path fill="currentColor" d="M10 3H6V1.5H5V3H3a1 1 0 00-1 1v9a1 1 0 001 1h10a1 1 0 001-1V4a1 1 0 00-1-1h-2V1.5h-1V3zM5 5h1V4h4v1h1V4h2v2H3V4h2v1zM3 7h10v6H3V7z" fill-opacity="0.9"></path></svg></span></div>
         </div>
       </div>
     </div>
@@ -3482,7 +3482,7 @@ exports[`ssr snapshot test renders ./examples/date-picker/demos/disable-date.vue
       <div class="t-popup__reference t-date-picker__popup-reference">
         <div name="t-popup--animation" appear="true"></div>
         <div class="t-form-controls">
-          <div allowInput="0" class="t-input t-size-m t-input--suffix"><input readonly="readonly" placeholder="请选择日期" type="text" value="" class="t-input__inner"><span class="t-input__suffix t-input__suffix-icon"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-calendar"><path fill="currentColor" d="M10 3H6V1.5H5V3H3a1 1 0 00-1 1v9a1 1 0 001 1h10a1 1 0 001-1V4a1 1 0 00-1-1h-2V1.5h-1V3zM5 5h1V4h4v1h1V4h2v2H3V4h2v1zM3 7h10v6H3V7z" fill-opacity="0.9"></path></svg></span></div>
+          <div allowInput="0" class="t-input t-size-m t-is-readonly t-input--suffix"><input readonly="readonly" placeholder="请选择日期" type="text" value="" class="t-input__inner"><span class="t-input__suffix t-input__suffix-icon"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-calendar"><path fill="currentColor" d="M10 3H6V1.5H5V3H3a1 1 0 00-1 1v9a1 1 0 001 1h10a1 1 0 001-1V4a1 1 0 00-1-1h-2V1.5h-1V3zM5 5h1V4h4v1h1V4h2v2H3V4h2v1zM3 7h10v6H3V7z" fill-opacity="0.9"></path></svg></span></div>
         </div>
       </div>
     </div>
@@ -3492,7 +3492,7 @@ exports[`ssr snapshot test renders ./examples/date-picker/demos/disable-date.vue
       <div class="t-popup__reference t-date-picker__popup-reference">
         <div name="t-popup--animation" appear="true"></div>
         <div class="t-form-controls">
-          <div allowInput="0" class="t-input t-size-m t-input--suffix"><input readonly="readonly" placeholder="请选择日期" type="text" value="" class="t-input__inner"><span class="t-input__suffix t-input__suffix-icon"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-calendar"><path fill="currentColor" d="M10 3H6V1.5H5V3H3a1 1 0 00-1 1v9a1 1 0 001 1h10a1 1 0 001-1V4a1 1 0 00-1-1h-2V1.5h-1V3zM5 5h1V4h4v1h1V4h2v2H3V4h2v1zM3 7h10v6H3V7z" fill-opacity="0.9"></path></svg></span></div>
+          <div allowInput="0" class="t-input t-size-m t-is-readonly t-input--suffix"><input readonly="readonly" placeholder="请选择日期" type="text" value="" class="t-input__inner"><span class="t-input__suffix t-input__suffix-icon"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-calendar"><path fill="currentColor" d="M10 3H6V1.5H5V3H3a1 1 0 00-1 1v9a1 1 0 001 1h10a1 1 0 001-1V4a1 1 0 00-1-1h-2V1.5h-1V3zM5 5h1V4h4v1h1V4h2v2H3V4h2v1zM3 7h10v6H3V7z" fill-opacity="0.9"></path></svg></span></div>
         </div>
       </div>
     </div>
@@ -3502,7 +3502,7 @@ exports[`ssr snapshot test renders ./examples/date-picker/demos/disable-date.vue
       <div class="t-popup__reference t-date-picker__popup-reference">
         <div name="t-popup--animation" appear="true"></div>
         <div class="t-form-controls">
-          <div allowInput="0" class="t-input t-size-m t-input--suffix"><input readonly="readonly" placeholder="请选择日期" type="text" value="" class="t-input__inner"><span class="t-input__suffix t-input__suffix-icon"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-calendar"><path fill="currentColor" d="M10 3H6V1.5H5V3H3a1 1 0 00-1 1v9a1 1 0 001 1h10a1 1 0 001-1V4a1 1 0 00-1-1h-2V1.5h-1V3zM5 5h1V4h4v1h1V4h2v2H3V4h2v1zM3 7h10v6H3V7z" fill-opacity="0.9"></path></svg></span></div>
+          <div allowInput="0" class="t-input t-size-m t-is-readonly t-input--suffix"><input readonly="readonly" placeholder="请选择日期" type="text" value="" class="t-input__inner"><span class="t-input__suffix t-input__suffix-icon"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-calendar"><path fill="currentColor" d="M10 3H6V1.5H5V3H3a1 1 0 00-1 1v9a1 1 0 001 1h10a1 1 0 001-1V4a1 1 0 00-1-1h-2V1.5h-1V3zM5 5h1V4h4v1h1V4h2v2H3V4h2v1zM3 7h10v6H3V7z" fill-opacity="0.9"></path></svg></span></div>
         </div>
       </div>
     </div>
@@ -3512,7 +3512,7 @@ exports[`ssr snapshot test renders ./examples/date-picker/demos/disable-date.vue
       <div class="t-popup__reference t-date-picker__popup-reference">
         <div name="t-popup--animation" appear="true"></div>
         <div class="t-form-controls">
-          <div allowInput="0" class="t-input t-size-m t-input--suffix"><input readonly="readonly" placeholder="请选择日期" type="text" value="" class="t-input__inner"><span class="t-input__suffix t-input__suffix-icon"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-calendar"><path fill="currentColor" d="M10 3H6V1.5H5V3H3a1 1 0 00-1 1v9a1 1 0 001 1h10a1 1 0 001-1V4a1 1 0 00-1-1h-2V1.5h-1V3zM5 5h1V4h4v1h1V4h2v2H3V4h2v1zM3 7h10v6H3V7z" fill-opacity="0.9"></path></svg></span></div>
+          <div allowInput="0" class="t-input t-size-m t-is-readonly t-input--suffix"><input readonly="readonly" placeholder="请选择日期" type="text" value="" class="t-input__inner"><span class="t-input__suffix t-input__suffix-icon"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-calendar"><path fill="currentColor" d="M10 3H6V1.5H5V3H3a1 1 0 00-1 1v9a1 1 0 001 1h10a1 1 0 001-1V4a1 1 0 00-1-1h-2V1.5h-1V3zM5 5h1V4h4v1h1V4h2v2H3V4h2v1zM3 7h10v6H3V7z" fill-opacity="0.9"></path></svg></span></div>
         </div>
       </div>
     </div>
@@ -3526,7 +3526,7 @@ exports[`ssr snapshot test renders ./examples/date-picker/demos/first-day-of-wee
     <div class="t-popup__reference t-date-picker__popup-reference">
       <div name="t-popup--animation" appear="true"></div>
       <div class="t-form-controls">
-        <div allowInput="0" class="t-input t-size-m t-input--suffix"><input readonly="readonly" placeholder="请选择日期" type="text" value="" class="t-input__inner"><span class="t-input__suffix t-input__suffix-icon"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-calendar"><path fill="currentColor" d="M10 3H6V1.5H5V3H3a1 1 0 00-1 1v9a1 1 0 001 1h10a1 1 0 001-1V4a1 1 0 00-1-1h-2V1.5h-1V3zM5 5h1V4h4v1h1V4h2v2H3V4h2v1zM3 7h10v6H3V7z" fill-opacity="0.9"></path></svg></span></div>
+        <div allowInput="0" class="t-input t-size-m t-is-readonly t-input--suffix"><input readonly="readonly" placeholder="请选择日期" type="text" value="" class="t-input__inner"><span class="t-input__suffix t-input__suffix-icon"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-calendar"><path fill="currentColor" d="M10 3H6V1.5H5V3H3a1 1 0 00-1 1v9a1 1 0 001 1h10a1 1 0 001-1V4a1 1 0 00-1-1h-2V1.5h-1V3zM5 5h1V4h4v1h1V4h2v2H3V4h2v1zM3 7h10v6H3V7z" fill-opacity="0.9"></path></svg></span></div>
       </div>
     </div>
   </div>
@@ -3539,7 +3539,7 @@ exports[`ssr snapshot test renders ./examples/date-picker/demos/month.vue correc
     <div class="t-popup__reference t-date-picker__popup-reference">
       <div name="t-popup--animation" appear="true"></div>
       <div class="t-form-controls">
-        <div allowInput="0" class="t-input t-size-m t-input--suffix"><input readonly="readonly" placeholder="请选择月份" type="text" value="" class="t-input__inner"><span class="t-input__suffix t-input__suffix-icon"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-calendar"><path fill="currentColor" d="M10 3H6V1.5H5V3H3a1 1 0 00-1 1v9a1 1 0 001 1h10a1 1 0 001-1V4a1 1 0 00-1-1h-2V1.5h-1V3zM5 5h1V4h4v1h1V4h2v2H3V4h2v1zM3 7h10v6H3V7z" fill-opacity="0.9"></path></svg></span></div>
+        <div allowInput="0" class="t-input t-size-m t-is-readonly t-input--suffix"><input readonly="readonly" placeholder="请选择月份" type="text" value="" class="t-input__inner"><span class="t-input__suffix t-input__suffix-icon"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-calendar"><path fill="currentColor" d="M10 3H6V1.5H5V3H3a1 1 0 00-1 1v9a1 1 0 001 1h10a1 1 0 001-1V4a1 1 0 00-1-1h-2V1.5h-1V3zM5 5h1V4h4v1h1V4h2v2H3V4h2v1zM3 7h10v6H3V7z" fill-opacity="0.9"></path></svg></span></div>
       </div>
     </div>
   </div>
@@ -3552,7 +3552,7 @@ exports[`ssr snapshot test renders ./examples/date-picker/demos/year.vue correct
     <div class="t-popup__reference t-date-picker__popup-reference">
       <div name="t-popup--animation" appear="true"></div>
       <div class="t-form-controls">
-        <div allowInput="0" class="t-input t-size-m t-input--suffix"><input readonly="readonly" placeholder="请选择年份" type="text" value="" class="t-input__inner"><span class="t-input__suffix t-input__suffix-icon"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-calendar"><path fill="currentColor" d="M10 3H6V1.5H5V3H3a1 1 0 00-1 1v9a1 1 0 001 1h10a1 1 0 001-1V4a1 1 0 00-1-1h-2V1.5h-1V3zM5 5h1V4h4v1h1V4h2v2H3V4h2v1zM3 7h10v6H3V7z" fill-opacity="0.9"></path></svg></span></div>
+        <div allowInput="0" class="t-input t-size-m t-is-readonly t-input--suffix"><input readonly="readonly" placeholder="请选择年份" type="text" value="" class="t-input__inner"><span class="t-input__suffix t-input__suffix-icon"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-calendar"><path fill="currentColor" d="M10 3H6V1.5H5V3H3a1 1 0 00-1 1v9a1 1 0 001 1h10a1 1 0 001-1V4a1 1 0 00-1-1h-2V1.5h-1V3zM5 5h1V4h4v1h1V4h2v2H3V4h2v1zM3 7h10v6H3V7z" fill-opacity="0.9"></path></svg></span></div>
       </div>
     </div>
   </div>
@@ -4970,9 +4970,26 @@ exports[`ssr snapshot test renders ./examples/input/demos/size.vue correctly 1`]
 
 exports[`ssr snapshot test renders ./examples/input/demos/status.vue correctly 1`] = `
 <div class="tdesign-demo-block-column" style="max-width:500px;">
+  <div class="t-input t-size-m"><input placeholder="请输入" type="text" value="成功状态" class="t-input__inner"></div>
   <div class="t-input t-size-m t-is-success"><input placeholder="请输入" type="text" value="成功状态" class="t-input__inner"></div>
   <div class="t-input t-size-m t-is-warning"><input placeholder="请输入" type="text" value="警告状态" class="t-input__inner"></div>
-  <div class="t-input t-size-m t-is-error"><input placeholder="请输入" type="text" value="错误状态" class="t-input__inner"></div>
+  <div class="t-input t-size-m t-is-error"><input placeholder="请输入" type="text" value="错误状态" class="t-input__inner"></div> <br>
+  <div class="t-input__wrap">
+    <div class="t-input t-size-m"><input placeholder="请输入" type="text" value="普通状态" class="t-input__inner"></div>
+    <div class="t-input__tips t-input__tips--normal">这是普通文本提示</div>
+  </div>
+  <div class="t-input__wrap">
+    <div class="t-input t-size-m t-is-success"><input placeholder="请输入" type="text" value="成功状态" class="t-input__inner"></div>
+    <div class="t-input__tips t-input__tips--success">校验通过文本提示</div>
+  </div>
+  <div class="t-input__wrap">
+    <div class="t-input t-size-m t-is-warning"><input placeholder="请输入" type="text" value="警告状态" class="t-input__inner"></div>
+    <div class="t-input__tips t-input__tips--warning">校验不通过文本提示</div>
+  </div>
+  <div class="t-input__wrap">
+    <div class="t-input t-size-m t-is-error"><input placeholder="请输入" type="text" value="错误状态" class="t-input__inner"></div>
+    <div class="t-input__tips t-input__tips--error">校验存在严重问题文本提示</div>
+  </div>
 </div>
 `;
 
@@ -8431,7 +8448,7 @@ exports[`ssr snapshot test renders ./examples/select/demos/creatable.vue correct
     <div class="t-popup__reference t-select__popup-reference">
       <div name="t-popup--animation" appear="true"></div>
       <div class="t-select t-size-m"><span class="t-tag t-tag--default t-size-m t-tag--dark" style="display:none;">+0</span>
-        <div class="t-input t-size-m t-select__input"><input readonly="readonly" placeholder="支持自定义创建" type="text" value="" class="t-input__inner"></div><svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" class="t-fake-arrow t-select__right-icon">
+        <div class="t-input t-size-m t-is-readonly t-select__input"><input readonly="readonly" placeholder="支持自定义创建" type="text" value="" class="t-input__inner"></div><svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" class="t-fake-arrow t-select__right-icon">
           <path d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921" stroke="black" stroke-opacity="0.9" stroke-width="1.3"></path>
         </svg>
       </div>
@@ -8517,7 +8534,7 @@ exports[`ssr snapshot test renders ./examples/select/demos/filterable.vue correc
     <div class="t-popup__reference t-select__popup-reference">
       <div name="t-popup--animation" appear="true"></div>
       <div class="t-select t-size-m"><span class="t-tag t-tag--default t-size-m t-tag--dark" style="display:none;">+0</span>
-        <div class="t-input t-size-m t-select__input"><input readonly="readonly" placeholder="-请选择-" type="text" value="" class="t-input__inner"></div><svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" class="t-fake-arrow t-select__right-icon">
+        <div class="t-input t-size-m t-is-readonly t-select__input"><input readonly="readonly" placeholder="-请选择-" type="text" value="" class="t-input__inner"></div><svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" class="t-fake-arrow t-select__right-icon">
           <path d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921" stroke="black" stroke-opacity="0.9" stroke-width="1.3"></path>
         </svg>
       </div>
@@ -8527,7 +8544,7 @@ exports[`ssr snapshot test renders ./examples/select/demos/filterable.vue correc
     <div class="t-popup__reference t-select__popup-reference">
       <div name="t-popup--animation" appear="true"></div>
       <div class="t-select t-size-m"><span class="t-tag t-tag--default t-size-m t-tag--dark" style="display:none;">+0</span>
-        <div class="t-input t-size-m t-select__input"><input readonly="readonly" placeholder="-请选择-" type="text" value="" class="t-input__inner"></div><svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" class="t-fake-arrow t-select__right-icon">
+        <div class="t-input t-size-m t-is-readonly t-select__input"><input readonly="readonly" placeholder="-请选择-" type="text" value="" class="t-input__inner"></div><svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" class="t-fake-arrow t-select__right-icon">
           <path d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921" stroke="black" stroke-opacity="0.9" stroke-width="1.3"></path>
         </svg>
       </div>
@@ -8720,7 +8737,7 @@ exports[`ssr snapshot test renders ./examples/select/demos/remote-search.vue cor
     <div class="t-popup__reference t-select__popup-reference">
       <div name="t-popup--animation" appear="true"></div>
       <div class="t-select t-size-m"><span class="t-tag t-tag--default t-size-m t-tag--dark" style="display:none;">+0</span>
-        <div class="t-input t-size-m t-select__input"><input readonly="readonly" placeholder="请选择" type="text" value="" class="t-input__inner"></div><svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" class="t-fake-arrow t-select__right-icon">
+        <div class="t-input t-size-m t-is-readonly t-select__input"><input readonly="readonly" placeholder="请选择" type="text" value="" class="t-input__inner"></div><svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" class="t-fake-arrow t-select__right-icon">
           <path d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921" stroke="black" stroke-opacity="0.9" stroke-width="1.3"></path>
         </svg>
       </div>
@@ -8730,7 +8747,7 @@ exports[`ssr snapshot test renders ./examples/select/demos/remote-search.vue cor
     <div class="t-popup__reference t-select__popup-reference">
       <div name="t-popup--animation" appear="true"></div>
       <div class="t-select t-size-m"><span class="t-tag t-tag--default t-size-m t-tag--dark" style="display:none;">+0</span>
-        <div class="t-input t-size-m t-select__input"><input readonly="readonly" placeholder="请输入搜索" type="text" value="" class="t-input__inner"></div><svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" class="t-fake-arrow t-select__right-icon">
+        <div class="t-input t-size-m t-is-readonly t-select__input"><input readonly="readonly" placeholder="请输入搜索" type="text" value="" class="t-input__inner"></div><svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" class="t-fake-arrow t-select__right-icon">
           <path d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921" stroke="black" stroke-opacity="0.9" stroke-width="1.3"></path>
         </svg>
       </div>
@@ -13312,14 +13329,14 @@ exports[`ssr snapshot test renders ./examples/time-picker/demos/base.vue correct
   <div class="demos t-popup__reference t-time-picker t-size-m">
     <div name="t-popup--animation" appear="true"></div>
     <div class="t-time-picker__group">
-      <div class="t-input t-size-m t-input--suffix"><input readonly="readonly" placeholder=" " type="text" value=" " class="t-input__inner"><span class="t-input__suffix t-input__suffix-icon"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-time"><path fill="currentColor" d="M7.5 4v4.39L10 11l.7-.7-2.2-2.33V4h-1z" fill-opacity="0.9"></path><path fill="currentColor" d="M15 8A7 7 0 111 8a7 7 0 0114 0zm-1 0A6 6 0 102 8a6 6 0 0012 0z" fill-opacity="0.9"></path></svg></span></div>
+      <div class="t-input t-size-m t-is-readonly t-input--suffix"><input readonly="readonly" placeholder=" " type="text" value=" " class="t-input__inner"><span class="t-input__suffix t-input__suffix-icon"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-time"><path fill="currentColor" d="M7.5 4v4.39L10 11l.7-.7-2.2-2.33V4h-1z" fill-opacity="0.9"></path><path fill="currentColor" d="M15 8A7 7 0 111 8a7 7 0 0114 0zm-1 0A6 6 0 102 8a6 6 0 0012 0z" fill-opacity="0.9"></path></svg></span></div>
       <div size="medium" class="t-time-picker__input"><span class="t-time-picker__input-item"><input disabled="disabled" value="NaN" class="t-time-picker__input-item-input"></span><span class="t-time-picker__input-item">:<input disabled="disabled" value="NaN" class="t-time-picker__input-item-input"></span><span class="t-time-picker__input-item">:<input disabled="disabled" value="NaN" class="t-time-picker__input-item-input"></span></div>
     </div>
   </div>
   <div class="demos t-popup__reference t-time-picker t-size-m">
     <div name="t-popup--animation" appear="true"></div>
     <div class="t-time-picker__group">
-      <div class="t-input t-size-m t-input--suffix"><input readonly="readonly" placeholder=" " type="text" value=" " class="t-input__inner"><span class="t-input__suffix t-input__suffix-icon"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-time"><path fill="currentColor" d="M7.5 4v4.39L10 11l.7-.7-2.2-2.33V4h-1z" fill-opacity="0.9"></path><path fill="currentColor" d="M15 8A7 7 0 111 8a7 7 0 0114 0zm-1 0A6 6 0 102 8a6 6 0 0012 0z" fill-opacity="0.9"></path></svg></span></div>
+      <div class="t-input t-size-m t-is-readonly t-input--suffix"><input readonly="readonly" placeholder=" " type="text" value=" " class="t-input__inner"><span class="t-input__suffix t-input__suffix-icon"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-time"><path fill="currentColor" d="M7.5 4v4.39L10 11l.7-.7-2.2-2.33V4h-1z" fill-opacity="0.9"></path><path fill="currentColor" d="M15 8A7 7 0 111 8a7 7 0 0114 0zm-1 0A6 6 0 102 8a6 6 0 0012 0z" fill-opacity="0.9"></path></svg></span></div>
       <div size="medium" class="t-time-picker__input"><span class="t-time-picker__input-item"><input disabled="disabled" value="NaN" class="t-time-picker__input-item-input"></span><span class="t-time-picker__input-item">:<input disabled="disabled" value="NaN" class="t-time-picker__input-item-input"></span><span class="t-time-picker__input-item">:<input disabled="disabled" value="NaN" class="t-time-picker__input-item-input"></span></div>
     </div>
   </div>
@@ -13332,7 +13349,7 @@ exports[`ssr snapshot test renders ./examples/time-picker/demos/clearable.vue co
   <div class="t-popup__reference t-time-picker t-size-m">
     <div name="t-popup--animation" appear="true"></div>
     <div class="t-time-picker__group">
-      <div class="t-input t-size-m t-input--suffix"><input readonly="readonly" placeholder=" " type="text" value=" " class="t-input__inner"><span class="t-input__suffix t-input__suffix-icon"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-time"><path fill="currentColor" d="M7.5 4v4.39L10 11l.7-.7-2.2-2.33V4h-1z" fill-opacity="0.9"></path><path fill="currentColor" d="M15 8A7 7 0 111 8a7 7 0 0114 0zm-1 0A6 6 0 102 8a6 6 0 0012 0z" fill-opacity="0.9"></path></svg></span></div>
+      <div class="t-input t-size-m t-is-readonly t-input--suffix"><input readonly="readonly" placeholder=" " type="text" value=" " class="t-input__inner"><span class="t-input__suffix t-input__suffix-icon"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-time"><path fill="currentColor" d="M7.5 4v4.39L10 11l.7-.7-2.2-2.33V4h-1z" fill-opacity="0.9"></path><path fill="currentColor" d="M15 8A7 7 0 111 8a7 7 0 0114 0zm-1 0A6 6 0 102 8a6 6 0 0012 0z" fill-opacity="0.9"></path></svg></span></div>
       <div size="medium" class="t-time-picker__input"><span class="t-time-picker__input-item"><input disabled="disabled" value="11" class="t-time-picker__input-item-input"></span><span class="t-time-picker__input-item">:<input disabled="disabled" value="12" class="t-time-picker__input-item-input"></span><span class="t-time-picker__input-item">:<input disabled="disabled" value="10" class="t-time-picker__input-item-input"></span></div>
     </div>
   </div>
@@ -13340,7 +13357,7 @@ exports[`ssr snapshot test renders ./examples/time-picker/demos/clearable.vue co
   <div class="t-popup__reference t-time-picker t-size-m">
     <div name="t-popup--animation" appear="true"></div>
     <div class="t-time-picker__group">
-      <div class="t-input t-size-m t-input--suffix"><input readonly="readonly" placeholder=" " type="text" value=" " class="t-input__inner"><span class="t-input__suffix t-input__suffix-icon"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-time"><path fill="currentColor" d="M7.5 4v4.39L10 11l.7-.7-2.2-2.33V4h-1z" fill-opacity="0.9"></path><path fill="currentColor" d="M15 8A7 7 0 111 8a7 7 0 0114 0zm-1 0A6 6 0 102 8a6 6 0 0012 0z" fill-opacity="0.9"></path></svg></span></div>
+      <div class="t-input t-size-m t-is-readonly t-input--suffix"><input readonly="readonly" placeholder=" " type="text" value=" " class="t-input__inner"><span class="t-input__suffix t-input__suffix-icon"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-time"><path fill="currentColor" d="M7.5 4v4.39L10 11l.7-.7-2.2-2.33V4h-1z" fill-opacity="0.9"></path><path fill="currentColor" d="M15 8A7 7 0 111 8a7 7 0 0114 0zm-1 0A6 6 0 102 8a6 6 0 0012 0z" fill-opacity="0.9"></path></svg></span></div>
       <div size="medium" class="t-time-picker__input"><span class="t-time-picker__input-item"><input disabled="disabled" value="11" class="t-time-picker__input-item-input"></span><span class="t-time-picker__input-item">:<input disabled="disabled" value="12" class="t-time-picker__input-item-input"></span><span class="t-time-picker__input-item">:<input disabled="disabled" value="10" class="t-time-picker__input-item-input"></span></div>
     </div>
   </div>
@@ -13352,7 +13369,7 @@ exports[`ssr snapshot test renders ./examples/time-picker/demos/disabled.vue cor
   <div class="t-popup__reference t-time-picker t-size-m">
     <div name="t-popup--animation" appear="true"></div>
     <div class="t-time-picker__group">
-      <div class="t-input t-size-m t-is-disabled t-input--suffix"><input disabled="disabled" readonly="readonly" placeholder=" " type="text" value=" " class="t-input__inner"><span class="t-input__suffix t-input__suffix-icon"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-time"><path fill="currentColor" d="M7.5 4v4.39L10 11l.7-.7-2.2-2.33V4h-1z" fill-opacity="0.9"></path><path fill="currentColor" d="M15 8A7 7 0 111 8a7 7 0 0114 0zm-1 0A6 6 0 102 8a6 6 0 0012 0z" fill-opacity="0.9"></path></svg></span></div>
+      <div class="t-input t-size-m t-is-disabled t-is-readonly t-input--suffix"><input disabled="disabled" readonly="readonly" placeholder=" " type="text" value=" " class="t-input__inner"><span class="t-input__suffix t-input__suffix-icon"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-time"><path fill="currentColor" d="M7.5 4v4.39L10 11l.7-.7-2.2-2.33V4h-1z" fill-opacity="0.9"></path><path fill="currentColor" d="M15 8A7 7 0 111 8a7 7 0 0114 0zm-1 0A6 6 0 102 8a6 6 0 0012 0z" fill-opacity="0.9"></path></svg></span></div>
       <div size="medium" class="t-time-picker__input"><span class="t-time-picker__input-item t-time-picker__input-item-disabled"><input disabled="disabled" value="11" class="t-time-picker__input-item-input"></span><span class="t-time-picker__input-item t-time-picker__input-item-disabled">:<input disabled="disabled" value="12" class="t-time-picker__input-item-input"></span><span class="t-time-picker__input-item t-time-picker__input-item-disabled">:<input disabled="disabled" value="10" class="t-time-picker__input-item-input"></span></div>
     </div>
   </div>
@@ -13364,7 +13381,7 @@ exports[`ssr snapshot test renders ./examples/time-picker/demos/format.vue corre
   <div class="demos t-popup__reference t-time-picker t-size-m">
     <div name="t-popup--animation" appear="true"></div>
     <div class="t-time-picker__group">
-      <div class="t-input t-size-m t-input--suffix"><input readonly="readonly" placeholder=" " type="text" value=" " class="t-input__inner"><span class="t-input__suffix t-input__suffix-icon"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-time"><path fill="currentColor" d="M7.5 4v4.39L10 11l.7-.7-2.2-2.33V4h-1z" fill-opacity="0.9"></path><path fill="currentColor" d="M15 8A7 7 0 111 8a7 7 0 0114 0zm-1 0A6 6 0 102 8a6 6 0 0012 0z" fill-opacity="0.9"></path></svg></span></div>
+      <div class="t-input t-size-m t-is-readonly t-input--suffix"><input readonly="readonly" placeholder=" " type="text" value=" " class="t-input__inner"><span class="t-input__suffix t-input__suffix-icon"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-time"><path fill="currentColor" d="M7.5 4v4.39L10 11l.7-.7-2.2-2.33V4h-1z" fill-opacity="0.9"></path><path fill="currentColor" d="M15 8A7 7 0 111 8a7 7 0 0114 0zm-1 0A6 6 0 102 8a6 6 0 0012 0z" fill-opacity="0.9"></path></svg></span></div>
       <div size="medium" class="t-time-picker__input"><span class="t-time-picker__input-item"><input disabled="disabled" value="0" class="t-time-picker__input-item-input"></span><span class="t-time-picker__input-item">:<input disabled="disabled" value="0" class="t-time-picker__input-item-input"></span><span class="t-time-picker__input-item">:<input disabled="disabled" value="0" class="t-time-picker__input-item-input"></span><span class="t-time-picker__input-item"><input readonly="readonly" disabled="disabled" value="上午" class="t-time-picker__input-item-input t-time-picker__input-item-input-meridiem"></span></div>
     </div>
   </div>
@@ -13377,7 +13394,7 @@ exports[`ssr snapshot test renders ./examples/time-picker/demos/hide-clear-butto
   <div class="t-popup__reference t-time-picker t-size-m">
     <div name="t-popup--animation" appear="true"></div>
     <div class="t-time-picker__group">
-      <div class="t-input t-size-m t-input--suffix"><input readonly="readonly" placeholder=" " type="text" value=" " class="t-input__inner"><span class="t-input__suffix t-input__suffix-icon"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-time"><path fill="currentColor" d="M7.5 4v4.39L10 11l.7-.7-2.2-2.33V4h-1z" fill-opacity="0.9"></path><path fill="currentColor" d="M15 8A7 7 0 111 8a7 7 0 0114 0zm-1 0A6 6 0 102 8a6 6 0 0012 0z" fill-opacity="0.9"></path></svg></span></div>
+      <div class="t-input t-size-m t-is-readonly t-input--suffix"><input readonly="readonly" placeholder=" " type="text" value=" " class="t-input__inner"><span class="t-input__suffix t-input__suffix-icon"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-time"><path fill="currentColor" d="M7.5 4v4.39L10 11l.7-.7-2.2-2.33V4h-1z" fill-opacity="0.9"></path><path fill="currentColor" d="M15 8A7 7 0 111 8a7 7 0 0114 0zm-1 0A6 6 0 102 8a6 6 0 0012 0z" fill-opacity="0.9"></path></svg></span></div>
       <div size="medium" class="t-time-picker__input"><span class="t-time-picker__input-item"><input disabled="disabled" value="11" class="t-time-picker__input-item-input"></span><span class="t-time-picker__input-item">:<input disabled="disabled" value="12" class="t-time-picker__input-item-input"></span><span class="t-time-picker__input-item">:<input disabled="disabled" value="10" class="t-time-picker__input-item-input"></span></div>
     </div>
   </div>
@@ -13385,7 +13402,7 @@ exports[`ssr snapshot test renders ./examples/time-picker/demos/hide-clear-butto
   <div class="t-popup__reference t-time-picker t-size-m">
     <div name="t-popup--animation" appear="true"></div>
     <div class="t-time-picker__group">
-      <div class="t-input t-size-m t-input--suffix"><input readonly="readonly" placeholder=" " type="text" class="t-input__inner"><span class="t-input__suffix t-input__suffix-icon"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-time"><path fill="currentColor" d="M7.5 4v4.39L10 11l.7-.7-2.2-2.33V4h-1z" fill-opacity="0.9"></path><path fill="currentColor" d="M15 8A7 7 0 111 8a7 7 0 0114 0zm-1 0A6 6 0 102 8a6 6 0 0012 0z" fill-opacity="0.9"></path></svg></span></div>
+      <div class="t-input t-size-m t-is-readonly t-input--suffix"><input readonly="readonly" placeholder=" " type="text" class="t-input__inner"><span class="t-input__suffix t-input__suffix-icon"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-time"><path fill="currentColor" d="M7.5 4v4.39L10 11l.7-.7-2.2-2.33V4h-1z" fill-opacity="0.9"></path><path fill="currentColor" d="M15 8A7 7 0 111 8a7 7 0 0114 0zm-1 0A6 6 0 102 8a6 6 0 0012 0z" fill-opacity="0.9"></path></svg></span></div>
       <div size="medium" class="t-time-picker__input"><span class="t-time-picker__input-placeholder">请选择时间</span></div>
     </div>
   </div>
@@ -13397,7 +13414,7 @@ exports[`ssr snapshot test renders ./examples/time-picker/demos/hm.vue correctly
   <div class="t-popup__reference t-time-picker t-size-m">
     <div name="t-popup--animation" appear="true"></div>
     <div class="t-time-picker__group">
-      <div class="t-input t-size-m t-input--suffix"><input readonly="readonly" placeholder=" " type="text" class="t-input__inner"><span class="t-input__suffix t-input__suffix-icon"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-time"><path fill="currentColor" d="M7.5 4v4.39L10 11l.7-.7-2.2-2.33V4h-1z" fill-opacity="0.9"></path><path fill="currentColor" d="M15 8A7 7 0 111 8a7 7 0 0114 0zm-1 0A6 6 0 102 8a6 6 0 0012 0z" fill-opacity="0.9"></path></svg></span></div>
+      <div class="t-input t-size-m t-is-readonly t-input--suffix"><input readonly="readonly" placeholder=" " type="text" class="t-input__inner"><span class="t-input__suffix t-input__suffix-icon"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-time"><path fill="currentColor" d="M7.5 4v4.39L10 11l.7-.7-2.2-2.33V4h-1z" fill-opacity="0.9"></path><path fill="currentColor" d="M15 8A7 7 0 111 8a7 7 0 0114 0zm-1 0A6 6 0 102 8a6 6 0 0012 0z" fill-opacity="0.9"></path></svg></span></div>
       <div size="medium" class="t-time-picker__input"><span class="t-time-picker__input-placeholder">请选择时间</span></div>
     </div>
   </div>
@@ -13409,7 +13426,7 @@ exports[`ssr snapshot test renders ./examples/time-picker/demos/hms.vue correctl
   <div class="t-popup__reference t-time-picker t-size-m">
     <div name="t-popup--animation" appear="true"></div>
     <div class="t-time-picker__group">
-      <div class="t-input t-size-m t-input--suffix"><input readonly="readonly" placeholder=" " type="text" value=" " class="t-input__inner"><span class="t-input__suffix t-input__suffix-icon"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-time"><path fill="currentColor" d="M7.5 4v4.39L10 11l.7-.7-2.2-2.33V4h-1z" fill-opacity="0.9"></path><path fill="currentColor" d="M15 8A7 7 0 111 8a7 7 0 0114 0zm-1 0A6 6 0 102 8a6 6 0 0012 0z" fill-opacity="0.9"></path></svg></span></div>
+      <div class="t-input t-size-m t-is-readonly t-input--suffix"><input readonly="readonly" placeholder=" " type="text" value=" " class="t-input__inner"><span class="t-input__suffix t-input__suffix-icon"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-time"><path fill="currentColor" d="M7.5 4v4.39L10 11l.7-.7-2.2-2.33V4h-1z" fill-opacity="0.9"></path><path fill="currentColor" d="M15 8A7 7 0 111 8a7 7 0 0114 0zm-1 0A6 6 0 102 8a6 6 0 0012 0z" fill-opacity="0.9"></path></svg></span></div>
       <div size="medium" class="t-time-picker__input"><span class="t-time-picker__input-item"><input disabled="disabled" value="12" class="t-time-picker__input-item-input"></span><span class="t-time-picker__input-item">:<input disabled="disabled" value="20" class="t-time-picker__input-item-input"></span><span class="t-time-picker__input-item">:<input disabled="disabled" value="30" class="t-time-picker__input-item-input"></span></div>
     </div>
   </div>
@@ -13422,7 +13439,7 @@ exports[`ssr snapshot test renders ./examples/time-picker/demos/keyboard.vue cor
   <div class="t-popup__reference t-time-picker t-size-m">
     <div name="t-popup--animation" appear="true"></div>
     <div class="t-time-picker__group">
-      <div class="t-input t-size-m t-input--suffix"><input readonly="readonly" placeholder=" " type="text" value=" " class="t-input__inner"><span class="t-input__suffix t-input__suffix-icon"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-time"><path fill="currentColor" d="M7.5 4v4.39L10 11l.7-.7-2.2-2.33V4h-1z" fill-opacity="0.9"></path><path fill="currentColor" d="M15 8A7 7 0 111 8a7 7 0 0114 0zm-1 0A6 6 0 102 8a6 6 0 0012 0z" fill-opacity="0.9"></path></svg></span></div>
+      <div class="t-input t-size-m t-is-readonly t-input--suffix"><input readonly="readonly" placeholder=" " type="text" value=" " class="t-input__inner"><span class="t-input__suffix t-input__suffix-icon"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-time"><path fill="currentColor" d="M7.5 4v4.39L10 11l.7-.7-2.2-2.33V4h-1z" fill-opacity="0.9"></path><path fill="currentColor" d="M15 8A7 7 0 111 8a7 7 0 0114 0zm-1 0A6 6 0 102 8a6 6 0 0012 0z" fill-opacity="0.9"></path></svg></span></div>
       <div size="medium" class="t-time-picker__input"><span class="t-time-picker__input-item"><input value="20" class="t-time-picker__input-item-input"></span><span class="t-time-picker__input-item">:<input value="22" class="t-time-picker__input-item-input"></span><span class="t-time-picker__input-item">:<input value="33" class="t-time-picker__input-item-input"></span></div>
     </div>
   </div>
@@ -13430,7 +13447,7 @@ exports[`ssr snapshot test renders ./examples/time-picker/demos/keyboard.vue cor
   <div class="t-popup__reference t-time-picker t-size-m">
     <div name="t-popup--animation" appear="true"></div>
     <div class="t-time-picker__group">
-      <div class="t-input t-size-m t-input--suffix"><input readonly="readonly" placeholder=" " type="text" value=" " class="t-input__inner"><span class="t-input__suffix t-input__suffix-icon"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-time"><path fill="currentColor" d="M7.5 4v4.39L10 11l.7-.7-2.2-2.33V4h-1z" fill-opacity="0.9"></path><path fill="currentColor" d="M15 8A7 7 0 111 8a7 7 0 0114 0zm-1 0A6 6 0 102 8a6 6 0 0012 0z" fill-opacity="0.9"></path></svg></span></div>
+      <div class="t-input t-size-m t-is-readonly t-input--suffix"><input readonly="readonly" placeholder=" " type="text" value=" " class="t-input__inner"><span class="t-input__suffix t-input__suffix-icon"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-time"><path fill="currentColor" d="M7.5 4v4.39L10 11l.7-.7-2.2-2.33V4h-1z" fill-opacity="0.9"></path><path fill="currentColor" d="M15 8A7 7 0 111 8a7 7 0 0114 0zm-1 0A6 6 0 102 8a6 6 0 0012 0z" fill-opacity="0.9"></path></svg></span></div>
       <div size="medium" class="t-time-picker__input"><span class="t-time-picker__input-item"><input disabled="disabled" value="22" class="t-time-picker__input-item-input"></span><span class="t-time-picker__input-item">:<input disabled="disabled" value="22" class="t-time-picker__input-item-input"></span><span class="t-time-picker__input-item">:<input disabled="disabled" value="22" class="t-time-picker__input-item-input"></span></div>
     </div>
   </div>
@@ -13442,7 +13459,7 @@ exports[`ssr snapshot test renders ./examples/time-picker/demos/range.vue correc
   <div class="demos t-popup__reference t-time-picker t-size-m">
     <div name="t-popup--animation" appear="true"></div>
     <div class="t-time-picker__group">
-      <div class="t-input t-size-m t-input--suffix"><input readonly="readonly" placeholder=" " type="text" value=" " class="t-input__inner"><span class="t-input__suffix t-input__suffix-icon"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-time"><path fill="currentColor" d="M7.5 4v4.39L10 11l.7-.7-2.2-2.33V4h-1z" fill-opacity="0.9"></path><path fill="currentColor" d="M15 8A7 7 0 111 8a7 7 0 0114 0zm-1 0A6 6 0 102 8a6 6 0 0012 0z" fill-opacity="0.9"></path></svg></span></div>
+      <div class="t-input t-size-m t-is-readonly t-input--suffix"><input readonly="readonly" placeholder=" " type="text" value=" " class="t-input__inner"><span class="t-input__suffix t-input__suffix-icon"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-time"><path fill="currentColor" d="M7.5 4v4.39L10 11l.7-.7-2.2-2.33V4h-1z" fill-opacity="0.9"></path><path fill="currentColor" d="M15 8A7 7 0 111 8a7 7 0 0114 0zm-1 0A6 6 0 102 8a6 6 0 0012 0z" fill-opacity="0.9"></path></svg></span></div>
       <div size="medium" class="t-time-picker__input"><span class="t-time-picker__input-item"><input value="00" class="t-time-picker__input-item-input"></span><span class="t-time-picker__input-item">:<input value="00" class="t-time-picker__input-item-input"></span><span class="t-time-picker__input-item">:<input value="00" class="t-time-picker__input-item-input"></span>-<span class="t-time-picker__input-item"><input value="23" class="t-time-picker__input-item-input"></span><span class="t-time-picker__input-item">:<input value="59" class="t-time-picker__input-item-input"></span><span class="t-time-picker__input-item">:<input value="59" class="t-time-picker__input-item-input"></span></div>
     </div>
   </div>
@@ -13454,7 +13471,7 @@ exports[`ssr snapshot test renders ./examples/time-picker/demos/show-steps.vue c
   <div class="t-popup__reference t-time-picker t-size-m">
     <div name="t-popup--animation" appear="true"></div>
     <div class="t-time-picker__group">
-      <div class="t-input t-size-m t-input--suffix"><input readonly="readonly" placeholder=" " type="text" class="t-input__inner"><span class="t-input__suffix t-input__suffix-icon"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-time"><path fill="currentColor" d="M7.5 4v4.39L10 11l.7-.7-2.2-2.33V4h-1z" fill-opacity="0.9"></path><path fill="currentColor" d="M15 8A7 7 0 111 8a7 7 0 0114 0zm-1 0A6 6 0 102 8a6 6 0 0012 0z" fill-opacity="0.9"></path></svg></span></div>
+      <div class="t-input t-size-m t-is-readonly t-input--suffix"><input readonly="readonly" placeholder=" " type="text" class="t-input__inner"><span class="t-input__suffix t-input__suffix-icon"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-time"><path fill="currentColor" d="M7.5 4v4.39L10 11l.7-.7-2.2-2.33V4h-1z" fill-opacity="0.9"></path><path fill="currentColor" d="M15 8A7 7 0 111 8a7 7 0 0114 0zm-1 0A6 6 0 102 8a6 6 0 0012 0z" fill-opacity="0.9"></path></svg></span></div>
       <div size="medium" class="t-time-picker__input"><span class="t-time-picker__input-placeholder">请选择时间</span></div>
     </div>
   </div>
@@ -13466,7 +13483,7 @@ exports[`ssr snapshot test renders ./examples/time-picker/demos/step.vue correct
   <div class="t-popup__reference t-time-picker t-size-m">
     <div name="t-popup--animation" appear="true"></div>
     <div class="t-time-picker__group">
-      <div class="t-input t-size-m t-input--suffix"><input readonly="readonly" placeholder=" " type="text" value=" " class="t-input__inner"><span class="t-input__suffix t-input__suffix-icon"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-time"><path fill="currentColor" d="M7.5 4v4.39L10 11l.7-.7-2.2-2.33V4h-1z" fill-opacity="0.9"></path><path fill="currentColor" d="M15 8A7 7 0 111 8a7 7 0 0114 0zm-1 0A6 6 0 102 8a6 6 0 0012 0z" fill-opacity="0.9"></path></svg></span></div>
+      <div class="t-input t-size-m t-is-readonly t-input--suffix"><input readonly="readonly" placeholder=" " type="text" value=" " class="t-input__inner"><span class="t-input__suffix t-input__suffix-icon"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-time"><path fill="currentColor" d="M7.5 4v4.39L10 11l.7-.7-2.2-2.33V4h-1z" fill-opacity="0.9"></path><path fill="currentColor" d="M15 8A7 7 0 111 8a7 7 0 0114 0zm-1 0A6 6 0 102 8a6 6 0 0012 0z" fill-opacity="0.9"></path></svg></span></div>
       <div size="medium" class="t-time-picker__input"><span class="t-time-picker__input-item"><input disabled="disabled" value="09" class="t-time-picker__input-item-input"></span><span class="t-time-picker__input-item">:<input disabled="disabled" value="18" class="t-time-picker__input-item-input"></span><span class="t-time-picker__input-item">:<input disabled="disabled" value="17" class="t-time-picker__input-item-input"></span></div>
     </div>
   </div>
@@ -13478,7 +13495,7 @@ exports[`ssr snapshot test renders ./examples/time-picker/demos/twelve-hour.vue
   <div class="t-popup__reference t-time-picker t-size-m">
     <div name="t-popup--animation" appear="true"></div>
     <div class="t-time-picker__group">
-      <div class="t-input t-size-m t-input--suffix"><input readonly="readonly" placeholder=" " type="text" value=" " class="t-input__inner"><span class="t-input__suffix t-input__suffix-icon"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-time"><path fill="currentColor" d="M7.5 4v4.39L10 11l.7-.7-2.2-2.33V4h-1z" fill-opacity="0.9"></path><path fill="currentColor" d="M15 8A7 7 0 111 8a7 7 0 0114 0zm-1 0A6 6 0 102 8a6 6 0 0012 0z" fill-opacity="0.9"></path></svg></span></div>
+      <div class="t-input t-size-m t-is-readonly t-input--suffix"><input readonly="readonly" placeholder=" " type="text" value=" " class="t-input__inner"><span class="t-input__suffix t-input__suffix-icon"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-time"><path fill="currentColor" d="M7.5 4v4.39L10 11l.7-.7-2.2-2.33V4h-1z" fill-opacity="0.9"></path><path fill="currentColor" d="M15 8A7 7 0 111 8a7 7 0 0114 0zm-1 0A6 6 0 102 8a6 6 0 0012 0z" fill-opacity="0.9"></path></svg></span></div>
       <div size="medium" class="t-time-picker__input"><span class="t-time-picker__input-item"><input disabled="disabled" value="10" class="t-time-picker__input-item-input"></span><span class="t-time-picker__input-item">:<input disabled="disabled" value="20" class="t-time-picker__input-item-input"></span><span class="t-time-picker__input-item">:<input disabled="disabled" value="30" class="t-time-picker__input-item-input"></span><span class="t-time-picker__input-item"><input readonly="readonly" disabled="disabled" value="上午" class="t-time-picker__input-item-input t-time-picker__input-item-input-meridiem"></span></div>
     </div>
   </div>
@@ -13490,7 +13507,7 @@ exports[`ssr snapshot test renders ./examples/time-picker/demos/twelve-hour-meri
   <div class="t-popup__reference t-time-picker t-size-m">
     <div name="t-popup--animation" appear="true"></div>
     <div class="t-time-picker__group">
-      <div class="t-input t-size-m t-input--suffix"><input readonly="readonly" placeholder=" " type="text" value=" " class="t-input__inner"><span class="t-input__suffix t-input__suffix-icon"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-time"><path fill="currentColor" d="M7.5 4v4.39L10 11l.7-.7-2.2-2.33V4h-1z" fill-opacity="0.9"></path><path fill="currentColor" d="M15 8A7 7 0 111 8a7 7 0 0114 0zm-1 0A6 6 0 102 8a6 6 0 0012 0z" fill-opacity="0.9"></path></svg></span></div>
+      <div class="t-input t-size-m t-is-readonly t-input--suffix"><input readonly="readonly" placeholder=" " type="text" value=" " class="t-input__inner"><span class="t-input__suffix t-input__suffix-icon"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-time"><path fill="currentColor" d="M7.5 4v4.39L10 11l.7-.7-2.2-2.33V4h-1z" fill-opacity="0.9"></path><path fill="currentColor" d="M15 8A7 7 0 111 8a7 7 0 0114 0zm-1 0A6 6 0 102 8a6 6 0 0012 0z" fill-opacity="0.9"></path></svg></span></div>
       <div size="medium" class="t-time-picker__input"><span class="t-time-picker__input-item"><input readonly="readonly" disabled="disabled" value="下午" class="t-time-picker__input-item-input t-time-picker__input-item-input-meridiem"></span><span class="t-time-picker__input-item"><input disabled="disabled" value="10" class="t-time-picker__input-item-input"></span><span class="t-time-picker__input-item">:<input disabled="disabled" value="20" class="t-time-picker__input-item-input"></span><span class="t-time-picker__input-item">:<input disabled="disabled" value="30" class="t-time-picker__input-item-input"></span></div>
     </div>
   </div>
diff --git a/test/unit/date-picker/__snapshots__/demo.test.js.snap b/test/unit/date-picker/__snapshots__/demo.test.js.snap
index 6b4b79d54..65a3562cd 100644
--- a/test/unit/date-picker/__snapshots__/demo.test.js.snap
+++ b/test/unit/date-picker/__snapshots__/demo.test.js.snap
@@ -720,7 +720,7 @@ exports[`DatePicker base demo works fine 1`] = `
       >
         <div
           allowinput="0"
-          class="t-input t-size-m t-input--suffix"
+          class="t-input t-size-m t-is-readonly t-input--suffix"
         >
           <input
             class="t-input__inner"
@@ -2174,7 +2174,7 @@ exports[`DatePicker datePresets demo works fine 1`] = `
       >
         <div
           allowinput="0"
-          class="t-input t-size-m t-input--suffix"
+          class="t-input t-size-m t-is-readonly t-input--suffix"
         >
           <input
             class="t-input__inner"
@@ -3640,7 +3640,7 @@ exports[`DatePicker datePresetsAlt demo works fine 1`] = `
         >
           <div
             allowinput="0"
-            class="t-input t-size-m t-input--suffix"
+            class="t-input t-size-m t-is-readonly t-input--suffix"
           >
             <input
               class="t-input__inner"
@@ -4410,7 +4410,7 @@ exports[`DatePicker datePresetsAlt demo works fine 1`] = `
         >
           <div
             allowinput="0"
-            class="t-input t-size-m t-input--suffix"
+            class="t-input t-size-m t-is-readonly t-input--suffix"
           >
             <input
               class="t-input__inner"
@@ -5875,7 +5875,7 @@ exports[`DatePicker datePresetsTime demo works fine 1`] = `
       >
         <div
           allowinput="0"
-          class="t-input t-size-m t-input--suffix"
+          class="t-input t-size-m t-is-readonly t-input--suffix"
         >
           <input
             class="t-input__inner"
@@ -7314,7 +7314,7 @@ exports[`DatePicker dateRange demo works fine 1`] = `
       >
         <div
           allowinput="0"
-          class="t-input t-size-m t-input--suffix"
+          class="t-input t-size-m t-is-readonly t-input--suffix"
         >
           <input
             class="t-input__inner"
@@ -8786,7 +8786,7 @@ exports[`DatePicker dateRange demo works fine 1`] = `
       >
         <div
           allowinput="0"
-          class="t-input t-size-m t-input--suffix"
+          class="t-input t-size-m t-is-readonly t-input--suffix"
         >
           <input
             class="t-input__inner"
@@ -9111,7 +9111,7 @@ exports[`DatePicker month demo works fine 1`] = `
       >
         <div
           allowinput="0"
-          class="t-input t-size-m t-input--suffix"
+          class="t-input t-size-m t-is-readonly t-input--suffix"
         >
           <input
             class="t-input__inner"
@@ -9404,7 +9404,7 @@ exports[`DatePicker year demo works fine 1`] = `
       >
         <div
           allowinput="0"
-          class="t-input t-size-m t-input--suffix"
+          class="t-input t-size-m t-is-readonly t-input--suffix"
         >
           <input
             class="t-input__inner"
diff --git a/test/unit/date-picker/__snapshots__/index.test.js.snap b/test/unit/date-picker/__snapshots__/index.test.js.snap
index ec44f78f0..251d735bd 100644
--- a/test/unit/date-picker/__snapshots__/index.test.js.snap
+++ b/test/unit/date-picker/__snapshots__/index.test.js.snap
@@ -57,7 +57,7 @@ exports[`DatePicker :mode 1`] = `
       </div>
     </transition-stub>
     <div class="t-form-controls">
-      <div allowinput="0" class="t-input t-size-m t-input--suffix"><input readonly="readonly" placeholder="请选择年份" type="text" class="t-input__inner"><span class="t-input__suffix t-input__suffix-icon"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-calendar"><path fill="currentColor" d="M10 3H6V1.5H5V3H3a1 1 0 00-1 1v9a1 1 0 001 1h10a1 1 0 001-1V4a1 1 0 00-1-1h-2V1.5h-1V3zM5 5h1V4h4v1h1V4h2v2H3V4h2v1zM3 7h10v6H3V7z" fill-opacity="0.9"></path></svg></span></div>
+      <div allowinput="0" class="t-input t-size-m t-is-readonly t-input--suffix"><input readonly="readonly" placeholder="请选择年份" type="text" class="t-input__inner"><span class="t-input__suffix t-input__suffix-icon"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-calendar"><path fill="currentColor" d="M10 3H6V1.5H5V3H3a1 1 0 00-1 1v9a1 1 0 001 1h10a1 1 0 001-1V4a1 1 0 00-1-1h-2V1.5h-1V3zM5 5h1V4h4v1h1V4h2v2H3V4h2v1zM3 7h10v6H3V7z" fill-opacity="0.9"></path></svg></span></div>
     </div>
   </div>
 </div>
@@ -179,7 +179,7 @@ exports[`DatePicker :range 1`] = `
       </div>
     </transition-stub>
     <div class="t-form-controls">
-      <div allowinput="0" class="t-input t-size-m t-input--suffix"><input readonly="readonly" placeholder="请选择月份" type="text" class="t-input__inner"><span class="t-input__suffix t-input__suffix-icon"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-calendar"><path fill="currentColor" d="M10 3H6V1.5H5V3H3a1 1 0 00-1 1v9a1 1 0 001 1h10a1 1 0 001-1V4a1 1 0 00-1-1h-2V1.5h-1V3zM5 5h1V4h4v1h1V4h2v2H3V4h2v1zM3 7h10v6H3V7z" fill-opacity="0.9"></path></svg></span></div>
+      <div allowinput="0" class="t-input t-size-m t-is-readonly t-input--suffix"><input readonly="readonly" placeholder="请选择月份" type="text" class="t-input__inner"><span class="t-input__suffix t-input__suffix-icon"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-calendar"><path fill="currentColor" d="M10 3H6V1.5H5V3H3a1 1 0 00-1 1v9a1 1 0 001 1h10a1 1 0 001-1V4a1 1 0 00-1-1h-2V1.5h-1V3zM5 5h1V4h4v1h1V4h2v2H3V4h2v1zM3 7h10v6H3V7z" fill-opacity="0.9"></path></svg></span></div>
     </div>
   </div>
 </div>
@@ -248,7 +248,7 @@ exports[`DatePicker :value 1`] = `
       </div>
     </transition-stub>
     <div class="t-form-controls">
-      <div allowinput="0" class="t-input t-size-m t-input--suffix"><input readonly="readonly" placeholder="请选择月份" type="text" class="t-input__inner"><span class="t-input__suffix t-input__suffix-icon"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-calendar"><path fill="currentColor" d="M10 3H6V1.5H5V3H3a1 1 0 00-1 1v9a1 1 0 001 1h10a1 1 0 001-1V4a1 1 0 00-1-1h-2V1.5h-1V3zM5 5h1V4h4v1h1V4h2v2H3V4h2v1zM3 7h10v6H3V7z" fill-opacity="0.9"></path></svg></span></div>
+      <div allowinput="0" class="t-input t-size-m t-is-readonly t-input--suffix"><input readonly="readonly" placeholder="请选择月份" type="text" class="t-input__inner"><span class="t-input__suffix t-input__suffix-icon"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-calendar"><path fill="currentColor" d="M10 3H6V1.5H5V3H3a1 1 0 00-1 1v9a1 1 0 001 1h10a1 1 0 001-1V4a1 1 0 00-1-1h-2V1.5h-1V3zM5 5h1V4h4v1h1V4h2v2H3V4h2v1zM3 7h10v6H3V7z" fill-opacity="0.9"></path></svg></span></div>
     </div>
   </div>
 </div>
diff --git a/test/unit/input/__snapshots__/demo.test.js.snap b/test/unit/input/__snapshots__/demo.test.js.snap
index be77343ff..b05ba9379 100644
--- a/test/unit/input/__snapshots__/demo.test.js.snap
+++ b/test/unit/input/__snapshots__/demo.test.js.snap
@@ -433,6 +433,16 @@ exports[`Input status demo works fine 1`] = `
   class="tdesign-demo-block-column"
   style="max-width: 500px;"
 >
+  <div
+    class="t-input t-size-m"
+  >
+    <input
+      class="t-input__inner"
+      placeholder="请输入"
+      type="text"
+    />
+  </div>
+   
   <div
     class="t-input t-size-m t-is-success"
   >
@@ -462,5 +472,83 @@ exports[`Input status demo works fine 1`] = `
       type="text"
     />
   </div>
+   
+  <br />
+   
+  <div
+    class="t-input__wrap"
+  >
+    <div
+      class="t-input t-size-m"
+    >
+      <input
+        class="t-input__inner"
+        placeholder="请输入"
+        type="text"
+      />
+    </div>
+    <div
+      class="t-input__tips t-input__tips--normal"
+    >
+      这是普通文本提示
+    </div>
+  </div>
+   
+  <div
+    class="t-input__wrap"
+  >
+    <div
+      class="t-input t-size-m t-is-success"
+    >
+      <input
+        class="t-input__inner"
+        placeholder="请输入"
+        type="text"
+      />
+    </div>
+    <div
+      class="t-input__tips t-input__tips--success"
+    >
+      校验通过文本提示
+    </div>
+  </div>
+   
+  <div
+    class="t-input__wrap"
+  >
+    <div
+      class="t-input t-size-m t-is-warning"
+    >
+      <input
+        class="t-input__inner"
+        placeholder="请输入"
+        type="text"
+      />
+    </div>
+    <div
+      class="t-input__tips t-input__tips--warning"
+    >
+      校验不通过文本提示
+    </div>
+  </div>
+   
+  <div
+    class="t-input__wrap"
+  >
+    <div
+      class="t-input t-size-m t-is-error"
+    >
+      <input
+        class="t-input__inner"
+        placeholder="请输入"
+        type="text"
+      />
+    </div>
+    <div
+      class="t-input__tips t-input__tips--error"
+    >
+      校验存在严重问题文本提示
+    </div>
+  </div>
 </div>
 `;
diff --git a/test/unit/input/__snapshots__/index.test.js.snap b/test/unit/input/__snapshots__/index.test.js.snap
index 05565f439..ad51c0cf7 100644
--- a/test/unit/input/__snapshots__/index.test.js.snap
+++ b/test/unit/input/__snapshots__/index.test.js.snap
@@ -8,7 +8,7 @@ exports[`Input :props :disabled 1`] = `<div class="t-input t-size-m t-is-disable
 
 exports[`Input :props :prefix-icon 1`] = `<div class="t-input t-size-m t-input--prefix"><span class="t-input__prefix t-input__prefix-icon"><i class="icon"></i></span><input placeholder="请输入" type="text" class="t-input__inner"></div>`;
 
-exports[`Input :props :readonly 1`] = `<div class="t-input t-size-m"><input readonly="readonly" placeholder="请输入" type="text" class="t-input__inner"></div>`;
+exports[`Input :props :readonly 1`] = `<div class="t-input t-size-m t-is-readonly"><input readonly="readonly" placeholder="请输入" type="text" class="t-input__inner"></div>`;
 
 exports[`Input :props :size 1`] = `<div class="t-input t-size-l"><input placeholder="请输入" type="text" class="t-input__inner"></div>`;
 
diff --git a/test/unit/select/__snapshots__/demo.test.js.snap b/test/unit/select/__snapshots__/demo.test.js.snap
index 6bc244a59..c0fc75a87 100644
--- a/test/unit/select/__snapshots__/demo.test.js.snap
+++ b/test/unit/select/__snapshots__/demo.test.js.snap
@@ -988,7 +988,7 @@ exports[`Steps Steps creatable demo works fine 1`] = `
           +0
         </span>
         <div
-          class="t-input t-size-m t-select__input"
+          class="t-input t-size-m t-is-readonly t-select__input"
         >
           <input
             class="t-input__inner"
@@ -2711,7 +2711,7 @@ exports[`Steps Steps filterable demo works fine 1`] = `
           +0
         </span>
         <div
-          class="t-input t-size-m t-select__input"
+          class="t-input t-size-m t-is-readonly t-select__input"
         >
           <input
             class="t-input__inner"
@@ -2869,7 +2869,7 @@ exports[`Steps Steps filterable demo works fine 1`] = `
           +0
         </span>
         <div
-          class="t-input t-size-m t-select__input"
+          class="t-input t-size-m t-is-readonly t-select__input"
         >
           <input
             class="t-input__inner"
@@ -5145,7 +5145,7 @@ exports[`Steps Steps remoteSearch demo works fine 1`] = `
           +0
         </span>
         <div
-          class="t-input t-size-m t-select__input"
+          class="t-input t-size-m t-is-readonly t-select__input"
         >
           <input
             class="t-input__inner"
@@ -5242,7 +5242,7 @@ exports[`Steps Steps remoteSearch demo works fine 1`] = `
           +0
         </span>
         <div
-          class="t-input t-size-m t-select__input"
+          class="t-input t-size-m t-is-readonly t-select__input"
         >
           <input
             class="t-input__inner"
diff --git a/test/unit/time-picker/__snapshots__/demo.test.js.snap b/test/unit/time-picker/__snapshots__/demo.test.js.snap
index d30e8edca..d9bc7ae77 100644
--- a/test/unit/time-picker/__snapshots__/demo.test.js.snap
+++ b/test/unit/time-picker/__snapshots__/demo.test.js.snap
@@ -803,7 +803,7 @@ exports[`Time-picker base demo works fine 1`] = `
       class="t-time-picker__group"
     >
       <div
-        class="t-input t-size-m t-input--suffix"
+        class="t-input t-size-m t-is-readonly t-input--suffix"
       >
         <input
           class="t-input__inner"
@@ -1667,7 +1667,7 @@ exports[`Time-picker base demo works fine 1`] = `
       class="t-time-picker__group"
     >
       <div
-        class="t-input t-size-m t-input--suffix"
+        class="t-input t-size-m t-is-readonly t-input--suffix"
       >
         <input
           class="t-input__inner"