diff --git a/src/field/README.md b/src/field/README.md
index 736452319..ae18cff5c 100644
--- a/src/field/README.md
+++ b/src/field/README.md
@@ -268,10 +268,11 @@ Use [ref](https://vuejs.org/v2/api/#ref) to get Field instance and call instance
 
 ### Slots
 
-| Name       | Description       |
-| ---------- | ----------------- |
-| label      | Custom label      |
-| input      | Custom input      |
-| left-icon  | Custom left icon  |
-| right-icon | Custom right icon |
-| button     | Insert button     |
+| Name           | Description                 |
+| -------------- | --------------------------- |
+| label          | Custom label                |
+| input          | Custom input                |
+| left-icon      | Custom left icon            |
+| right-icon     | Custom right icon           |
+| button         | Insert button               |
+| extra `v2.8.2` | Custom content on the right |
diff --git a/src/field/README.zh-CN.md b/src/field/README.zh-CN.md
index 332792d7e..e1d71709a 100644
--- a/src/field/README.zh-CN.md
+++ b/src/field/README.zh-CN.md
@@ -293,13 +293,14 @@ export default {
 
 ### Slots
 
-| 名称       | 说明                                                       |
-| ---------- | ---------------------------------------------------------- |
-| label      | 自定义输入框标签                                           |
-| input      | 自定义输入框，使用此插槽后，与输入框相关的属性和事件将失效 |
-| left-icon  | 自定义输入框头部图标                                       |
-| right-icon | 自定义输入框尾部图标                                       |
-| button     | 自定义输入框尾部按钮                                       |
+| 名称           | 说明                                                       |
+| -------------- | ---------------------------------------------------------- |
+| label          | 自定义输入框 label 标签                                    |
+| input          | 自定义输入框，使用此插槽后，与输入框相关的属性和事件将失效 |
+| left-icon      | 自定义输入框头部图标                                       |
+| right-icon     | 自定义输入框尾部图标                                       |
+| button         | 自定义输入框尾部按钮                                       |
+| extra `v2.8.2` | 自定义输入框最右侧的额外内容                               |
 
 ## 常见问题
 
diff --git a/src/field/index.js b/src/field/index.js
index 6b33b71ac..59808aa0d 100644
--- a/src/field/index.js
+++ b/src/field/index.js
@@ -550,6 +550,11 @@ export default createComponent({
       scopedSlots.title = () => Label;
     }
 
+    const extra = this.slots('extra');
+    if (extra) {
+      scopedSlots.extra = () => extra;
+    }
+
     return (
       <Cell
         icon={this.leftIcon}
diff --git a/src/field/test/__snapshots__/index.spec.js.snap b/src/field/test/__snapshots__/index.spec.js.snap
index a124064a8..6e2a72b70 100644
--- a/src/field/test/__snapshots__/index.spec.js.snap
+++ b/src/field/test/__snapshots__/index.spec.js.snap
@@ -79,6 +79,14 @@ exports[`reach max word-limit 1`] = `
 </div>
 `;
 
+exports[`render extra slot 1`] = `
+<div class="van-cell van-field">
+  <div class="van-cell__value van-cell__value--alone van-field__value">
+    <div class="van-field__body"><input type="text" class="van-field__control"></div>
+  </div>Extra
+</div>
+`;
+
 exports[`render input slot 1`] = `
 <div class="van-cell van-field">
   <div class="van-cell__value van-cell__value--alone van-field__value">
diff --git a/src/field/test/index.spec.js b/src/field/test/index.spec.js
index f1758019c..f44aca872 100644
--- a/src/field/test/index.spec.js
+++ b/src/field/test/index.spec.js
@@ -203,14 +203,9 @@ test('clearable', () => {
 });
 
 test('render input slot', () => {
-  const wrapper = mount({
-    template: `
-      <field>
-        <template v-slot:input>Custom Input</template>
-      </field>
-    `,
-    components: {
-      Field,
+  const wrapper = mount(Field, {
+    scopedSlots: {
+      input: () => 'Custom Input',
     },
   });
 
@@ -218,14 +213,19 @@ test('render input slot', () => {
 });
 
 test('render label slot', () => {
-  const wrapper = mount({
-    template: `
-      <field label="Default Label">
-        <template v-slot:label>Custom Label</template>
-      </field>
-    `,
-    components: {
-      Field,
+  const wrapper = mount(Field, {
+    scopedSlots: {
+      label: () => 'Custom Label',
+    },
+  });
+
+  expect(wrapper).toMatchSnapshot();
+});
+
+test('render extra slot', () => {
+  const wrapper = mount(Field, {
+    scopedSlots: {
+      extra: () => 'Extra',
     },
   });
 
diff --git a/src/form/demo/FieldTypeArea.vue b/src/form/demo/FieldTypeArea.vue
index 0540a6db5..01731324c 100644
--- a/src/form/demo/FieldTypeArea.vue
+++ b/src/form/demo/FieldTypeArea.vue
@@ -1,23 +1,26 @@
 <template>
-  <div class="van-hairline--bottom">
-    <van-field
-      readonly
-      clickable
-      name="area"
-      :value="value"
-      :border="false"
-      :label="t('picker')"
-      :placeholder="t('placeholder')"
-      @click="showArea = true"
-    />
-    <van-popup v-model="showArea" position="bottom">
+  <van-field
+    readonly
+    clickable
+    name="area"
+    :value="value"
+    :label="t('picker')"
+    :placeholder="t('placeholder')"
+    @click="showArea = true"
+  >
+    <van-popup
+      v-model="showArea"
+      slot="extra"
+      position="bottom"
+      get-container="body"
+    >
       <van-area
         :area-list="t('areaList')"
         @confirm="onConfirm"
         @cancel="onCancel"
       />
     </van-popup>
-  </div>
+  </van-field>
 </template>
 
 <script>
diff --git a/src/form/demo/FieldTypeCalendar.vue b/src/form/demo/FieldTypeCalendar.vue
index e73e82504..c0bf1a8d9 100644
--- a/src/form/demo/FieldTypeCalendar.vue
+++ b/src/form/demo/FieldTypeCalendar.vue
@@ -1,16 +1,20 @@
 <template>
-  <div>
-    <van-field
-      readonly
-      clickable
-      name="calendar"
-      :value="value"
-      :label="t('calendar')"
-      :placeholder="t('placeholder')"
-      @click="showCalendar = true"
+  <van-field
+    readonly
+    clickable
+    name="calendar"
+    :value="value"
+    :label="t('calendar')"
+    :placeholder="t('placeholder')"
+    @click="showCalendar = true"
+  >
+    <van-calendar
+      v-model="showCalendar"
+      slot="extra"
+      get-container="body"
+      @confirm="onConfirm"
     />
-    <van-calendar v-model="showCalendar" @confirm="onConfirm" />
-  </div>
+  </van-field>
 </template>
 
 <script>
diff --git a/src/form/demo/FieldTypeDatetimePicker.vue b/src/form/demo/FieldTypeDatetimePicker.vue
index 3c844df0d..d0675e3a5 100644
--- a/src/form/demo/FieldTypeDatetimePicker.vue
+++ b/src/form/demo/FieldTypeDatetimePicker.vue
@@ -1,23 +1,26 @@
 <template>
-  <div class="van-hairline--bottom">
-    <van-field
-      readonly
-      clickable
-      name="datetimePicker"
-      :value="value"
-      :border="false"
-      :label="t('label')"
-      :placeholder="t('placeholder')"
-      @click="showPicker = true"
-    />
-    <van-popup v-model="showPicker" position="bottom">
+  <van-field
+    readonly
+    clickable
+    name="datetimePicker"
+    :value="value"
+    :label="t('label')"
+    :placeholder="t('placeholder')"
+    @click="showPicker = true"
+  >
+    <van-popup
+      v-model="showPicker"
+      slot="extra"
+      position="bottom"
+      get-container="body"
+    >
       <van-datetime-picker
         type="time"
         @confirm="onConfirm"
         @cancel="onCancel"
       />
     </van-popup>
-  </div>
+  </van-field>
 </template>
 
 <script>
diff --git a/src/form/demo/FieldTypePicker.vue b/src/form/demo/FieldTypePicker.vue
index 38a57fcc7..14fe1a841 100644
--- a/src/form/demo/FieldTypePicker.vue
+++ b/src/form/demo/FieldTypePicker.vue
@@ -1,16 +1,19 @@
 <template>
-  <div class="van-hairline--bottom">
-    <van-field
-      readonly
-      clickable
-      name="picker"
-      :value="value"
-      :border="false"
-      :label="t('picker')"
-      :placeholder="t('placeholder')"
-      @click="showPicker = true"
-    />
-    <van-popup v-model="showPicker" position="bottom">
+  <van-field
+    readonly
+    clickable
+    name="picker"
+    :value="value"
+    :label="t('picker')"
+    :placeholder="t('placeholder')"
+    @click="showPicker = true"
+  >
+    <van-popup
+      v-model="showPicker"
+      slot="extra"
+      position="bottom"
+      get-container="body"
+    >
       <van-picker
         show-toolbar
         :columns="t('textColumns')"
@@ -18,7 +21,7 @@
         @cancel="onCancel"
       />
     </van-popup>
-  </div>
+  </van-field>
 </template>
 
 <script>
diff --git a/src/form/demo/index.vue b/src/form/demo/index.vue
index 8fb83a612..3f7794103 100644
--- a/src/form/demo/index.vue
+++ b/src/form/demo/index.vue
@@ -19,14 +19,3 @@ export default {
   },
 };
 </script>
-
-<style lang="less">
-.demo-form {
-  width: 100vw;
-  overflow: hidden;
-
-  .van-hairline--bottom::after {
-    margin-left: 16px;
-  }
-}
-</style>
diff --git a/src/form/test/__snapshots__/demo.spec.js.snap b/src/form/test/__snapshots__/demo.spec.js.snap
index 57d86d5a2..341ad1e37 100644
--- a/src/form/test/__snapshots__/demo.spec.js.snap
+++ b/src/form/test/__snapshots__/demo.spec.js.snap
@@ -184,41 +184,29 @@ exports[`renders demo correctly 1`] = `
           </div>
         </div>
       </div>
-      <div class="van-hairline--bottom">
-        <div role="button" tabindex="0" class="van-cell van-cell--clickable van-cell--borderless van-field">
-          <div class="van-cell__title van-field__label"><span>选择器</span></div>
-          <div class="van-cell__value van-field__value">
-            <div class="van-field__body"><input type="text" name="picker" readonly="readonly" placeholder="点击选择城市" class="van-field__control"></div>
-          </div>
+      <div role="button" tabindex="0" class="van-cell van-cell--clickable van-field">
+        <div class="van-cell__title van-field__label"><span>选择器</span></div>
+        <div class="van-cell__value van-field__value">
+          <div class="van-field__body"><input type="text" name="picker" readonly="readonly" placeholder="点击选择城市" class="van-field__control"></div>
         </div>
-        <!---->
       </div>
-      <div class="van-hairline--bottom">
-        <div role="button" tabindex="0" class="van-cell van-cell--clickable van-cell--borderless van-field">
-          <div class="van-cell__title van-field__label"><span>时间选择</span></div>
-          <div class="van-cell__value van-field__value">
-            <div class="van-field__body"><input type="text" name="datetimePicker" readonly="readonly" placeholder="点击选择时间" class="van-field__control"></div>
-          </div>
+      <div role="button" tabindex="0" class="van-cell van-cell--clickable van-field">
+        <div class="van-cell__title van-field__label"><span>时间选择</span></div>
+        <div class="van-cell__value van-field__value">
+          <div class="van-field__body"><input type="text" name="datetimePicker" readonly="readonly" placeholder="点击选择时间" class="van-field__control"></div>
         </div>
-        <!---->
       </div>
-      <div class="van-hairline--bottom">
-        <div role="button" tabindex="0" class="van-cell van-cell--clickable van-cell--borderless van-field">
-          <div class="van-cell__title van-field__label"><span>地区选择</span></div>
-          <div class="van-cell__value van-field__value">
-            <div class="van-field__body"><input type="text" name="area" readonly="readonly" placeholder="点击选择省市区" class="van-field__control"></div>
-          </div>
+      <div role="button" tabindex="0" class="van-cell van-cell--clickable van-field">
+        <div class="van-cell__title van-field__label"><span>地区选择</span></div>
+        <div class="van-cell__value van-field__value">
+          <div class="van-field__body"><input type="text" name="area" readonly="readonly" placeholder="点击选择省市区" class="van-field__control"></div>
         </div>
-        <!---->
       </div>
-      <div>
-        <div role="button" tabindex="0" class="van-cell van-cell--clickable van-field">
-          <div class="van-cell__title van-field__label"><span>日历</span></div>
-          <div class="van-cell__value van-field__value">
-            <div class="van-field__body"><input type="text" name="calendar" readonly="readonly" placeholder="点击选择日期" class="van-field__control"></div>
-          </div>
+      <div role="button" tabindex="0" class="van-cell van-cell--clickable van-field">
+        <div class="van-cell__title van-field__label"><span>日历</span></div>
+        <div class="van-cell__value van-field__value">
+          <div class="van-field__body"><input type="text" name="calendar" readonly="readonly" placeholder="点击选择日期" class="van-field__control"></div>
         </div>
-        <!---->
       </div>
       <div style="margin: 16px 16px 0px;"><button type="submit" class="van-button van-button--info van-button--normal van-button--block van-button--round"><span class="van-button__text">
         提交