diff --git a/docs/src/lib/example.svelte b/docs/src/lib/example.svelte
index 72aa5c08..09e66d4d 100644
--- a/docs/src/lib/example.svelte
+++ b/docs/src/lib/example.svelte
@@ -11,7 +11,7 @@
     CaretTop,
   } from '@svelement-ui/icon';
   export let code = '';
-  $: code = code.replaceAll('@@@>', '').trimStart().trimEnd();
+  $: code = code.replaceAll('@@@>', '').replaceAll('@@@dolor', '$').trimStart().trimEnd();
 
   let codeShowFlg = false;
 
diff --git a/docs/src/lib/i18n/zh/input.js b/docs/src/lib/i18n/zh/input.js
index 97c328dc..dcf28073 100644
--- a/docs/src/lib/i18n/zh/input.js
+++ b/docs/src/lib/i18n/zh/input.js
@@ -4,4 +4,17 @@ export default {
   cinput02010: '基础用法',
   cinput03010: '禁用状态',
   cinput03020: '通过 disabled 属性指定是否禁用 input 组件',
+  cinput04010: '一键清空',
+  cinput04020: '使用clearable属性即可得到一个可一键清空的输入框',
+  cinput05010: '格式化',
+  cinput05020: '在 formatter的情况下显示值，我们通常同时使用 parser',
+  cinput06010: '密码框',
+  cinput06020: '使用 showPassword 属性即可得到一个可切换显示隐藏的密码框',
+  cinput07010: '带图标的输入框',
+  cinput07020: '带有图标标记输入类型',
+  cinput07030: '要在输入框中添加图标，你可以简单地使用prefix 和 suffix 命名的插槽。',
+  cinput08010: '文本域',
+  cinput08020:
+    '用于输入多行文本信息可缩放的输入框。 添加 type="textarea" 属性来将 input 元素转换为原生的 textarea 元素。',
+  cinput08030: '文本域高度可通过 rows 属性控制',
 };
diff --git a/docs/src/routes/+layout.svelte b/docs/src/routes/+layout.svelte
index 8d2feefd..c2b2fd36 100644
--- a/docs/src/routes/+layout.svelte
+++ b/docs/src/routes/+layout.svelte
@@ -2,16 +2,16 @@
   import './app.css';
   import { PUBLIC_BASE_PATH } from '$env/static/public';
   import {
+    SvelButton,
     SvelCol,
     SvelContainer,
     SvelFooter,
     SvelHeader,
+    SvelLink,
     SvelMain,
     SvelRow,
-    SvelLink,
-    SvelButton,
   } from '@svelement-ui/all';
-  import { SvelIcon, Github } from '@svelement-ui/icon';
+  import { Github, SvelIcon } from '@svelement-ui/icon';
   import { setContext } from 'svelte';
   import { writable } from 'svelte/store';
   import { default as zh } from '$lib/i18n/zh/index.js';
@@ -33,26 +33,26 @@
   }
 </script>
 
-<SvelContainer direction="vertical" class="docs-container">
+<SvelContainer class="docs-container" direction="vertical">
   <SvelHeader class="flex border-b border-solid border-gray-200">
     <SvelRow class="lg:w-6/12 mx-auto items-center">
-      <SvelCol span={6} class="title">
+      <SvelCol class="title" span={6}>
         <SvelLink href={PUBLIC_BASE_PATH} type="primary" underline={false}>
           <span class="text-2xl font-bold">SvelementUI</span>
         </SvelLink>
       </SvelCol>
-      <SvelCol span={18} class="flex justify-end">
+      <SvelCol class="flex justify-end" span={18}>
         <SvelLink href="{PUBLIC_BASE_PATH}component" type="primary" underline={false}>
           Component
         </SvelLink>
-        <SvelButton class="ml-2" type="primary" text on:click={handleLang}>
+        <SvelButton class="ml-2" on:click={handleLang} text type="primary">
           {langString}
         </SvelButton>
         <SvelLink
           class="ml-2"
           href="https://github.com/koory1st/svelement-ui"
-          type="primary"
           target="_blank"
+          type="primary"
           underline={false}
         >
           <SvelIcon size={24}>
@@ -64,7 +64,7 @@
   </SvelHeader>
 
   <SvelMain>
-    <div class="xs:w-12/12 sm:w-8/12 md:w-6/12 lg:w-6/12 xl:w-6/12 mx-auto">
+    <div class="xs:w-12/12 sm:w-8/12 md:w-8/12 lg:w-12/12 xl:w-12/12 mx-auto">
       <slot />
     </div>
   </SvelMain>
diff --git a/docs/src/routes/component/input/+page.svelte b/docs/src/routes/component/input/+page.svelte
index b66f8832..586da254 100644
--- a/docs/src/routes/component/input/+page.svelte
+++ b/docs/src/routes/component/input/+page.svelte
@@ -1,11 +1,15 @@
 <script>
   import Example from '$lib/example.svelte';
   import { getContext } from 'svelte';
-  let langFn = getContext('langFn');
+  import { SvelCol, SvelInput, SvelRow } from '@svelement-ui/all';
+  import { Calendar, Search, SvelIcon } from '@svelement-ui/icon';
 
-  import { SvelInput } from '@svelement-ui/all';
+  let langFn = getContext('langFn');
 
   let input1 = '';
+  let inputF = '';
+
+  let textarea = '';
 </script>
 
 <h1>{$langFn('cinput01010')}</h1>
@@ -34,5 +38,123 @@
 <SvelInput bind:value={input1} placeholder="Please input" disabled />
 `}
 >
-  <SvelInput bind:value={input1} placeholder="Please input" disabled />
+  <SvelInput bind:value={input1} disabled placeholder="Please input" />
+</Example>
+
+<h2>{$langFn('cinput04010')}</h2>
+<p>{$langFn('cinput04020')}</p>
+
+<Example
+  code={`
+<script>
+  let input1 = '';
+@@@/script>
+<SvelInput bind:value={input1} placeholder="Please input" clearable />
+`}
+>
+  <SvelInput bind:value={input1} clearable placeholder="Please input" />
+</Example>
+
+<h2>{$langFn('cinput05010')}</h2>
+<p>{$langFn('cinput05020')}</p>
+<Example
+  code={`
+<script>
+  let inputF = '';
+@@@/script>
+<SvelInput
+  bind:value={inputF}
+  placeholder="Please input"
+    formatter={(value) => \`$ @@@dolor{value}\`.replace(/\\B(?=(\\d{3})+(?!\\d))/g, ',')}
+    parser={(value) => value.replace(/\\$\\s?|(,*)/g, '')}
+/>
+`}
+>
+  <SvelInput
+    bind:value={inputF}
+    formatter={(value) => `$ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')}
+    parser={(value) => value.replace(/\$\s?|(,*)/g, '')}
+    placeholder="Please input"
+  />
+</Example>
+
+<h2>{$langFn('cinput06010')}</h2>
+<p>{$langFn('cinput06020')}</p>
+
+<Example
+  code={`
+<script>
+  let input1 = '';
+@@@/script>
+<SvelInput bind:value={input1} type="password" placeholder="Please input password" showPassword />
+`}
+>
+  <SvelInput bind:value={input1} placeholder="Please input password" showPassword type="password" />
+</Example>
+
+<h2>{$langFn('cinput07010')}</h2>
+<p>{$langFn('cinput07020')}</p>
+<p>{$langFn('cinput07030')}</p>
+
+<Example
+  code={`
+<div class="demo-input-suffix">
+  <SvelRow gutter={20}>
+    <SvelCol span={6}>
+      <span class="text-gray-600 inline-flex items-center">Using slots</span>
+    </SvelCol>
+    <SvelCol span={8}>
+      <SvelInput bind:value={input1} placeholder="Pick a date">
+        <SvelIcon slot="suffix">
+          <Calendar />
+        </SvelIcon>
+      </SvelInput>
+    </SvelCol>
+    <SvelCol span={8}>
+      <SvelInput bind:value={input1} placeholder="Type something">
+        <SvelIcon slot="prefix">
+          <Search />
+        </SvelIcon>
+      </SvelInput>
+    </SvelCol>
+  </SvelRow>
+</div>
+`}
+>
+  <div class="demo-input-suffix">
+    <SvelRow gutter={20}>
+      <SvelCol span={6}>
+        <span class="text-gray-600 inline-flex items-center">Using slots</span>
+      </SvelCol>
+      <SvelCol span={8}>
+        <SvelInput bind:value={input1} placeholder="Pick a date">
+          <SvelIcon slot="suffix">
+            <Calendar />
+          </SvelIcon>
+        </SvelInput>
+      </SvelCol>
+      <SvelCol span={8}>
+        <SvelInput bind:value={input1} placeholder="Type something">
+          <SvelIcon slot="prefix">
+            <Search />
+          </SvelIcon>
+        </SvelInput>
+      </SvelCol>
+    </SvelRow>
+  </div>
+</Example>
+
+<h2>{$langFn('cinput08010')}</h2>
+<p>{$langFn('cinput08020')}</p>
+<p>{$langFn('cinput08030')}</p>
+
+<Example
+  code={`
+<script>
+  let textarea = '';
+@@@/script>
+<SvelInput bind:value={input1} placeholder="Please input" rows={2} type="textarea" />
+`}
+>
+  <SvelInput bind:value={input1} placeholder="Please input" rows={2} type="textarea" />
 </Example>