diff --git a/components/_style/mixin/theme.components.styl b/components/_style/mixin/theme.components.styl
index b609b572..91a2aee1 100644
--- a/components/_style/mixin/theme.components.styl
+++ b/components/_style/mixin/theme.components.styl
@@ -162,35 +162,24 @@ drop-menu-disabled-opacity = opacity-disabled
 field-padding-h = h-gap-sl
 field-padding-v = v-gap-sl
 field-bg-color = color-bg-inverse
+field-header-gap = v-gap-lg
+field-footer-gap = v-gap-md
 field-title-color = color-text-base
 field-title-font-size = font-caption-large
 field-title-font-weight = font-weight-normal
-field-title-operator-color = color-text-minor
-field-title-operator-font-size = font-body-large
-field-title-margin = 36px
-field-item-padding-v = v-gap-lg
-field-item-bg-tap-color = color-bg-tap
-field-item-label-color = color-text-base
-field-item-label-font-size = font-caption-normal
-field-item-label-font-weight = font-weight-normal
-field-item-content-color = color-text-base
-field-item-content-font-size = font-caption-normal
-field-item-content-font-weight = font-weight-medium
-field-item-icon-color = #ccc
+field-describe-color = color-text-caption
+field-describe-font-size = font-body-large
+field-action-color = color-text-minor
+field-action-font-size = font-body-large
+
+// field-item
+field-item-min-height = 108px
+field-item-padding-v = 30px
+field-item-color = color-text-base
+field-item-font-size = font-caption-normal
+field-item-after-color = color-text-caption
+field-item-after-font-size = font-body-large
 field-item-border-color = color-border-base
-field-item-color-disabled = opacity-disabled
-field-item-brief-font-size = font-body-normal
-field-item-brief-color = color-text-caption
-field-title-plain-color = color-text-body
-field-title-plain-font-size = font-body-large
-field-padding-plain-h = h-gap-lg
-field-padding-plain-v = v-gap-lg
-field-bg-plain-color = color-bg-base
-field-item-padding-plain-v = h-gap-md
-field-item-label-plain-color = color-text-caption
-field-item-label-plain-font-size = font-body-large
-field-item-content-plain-color = color-text-body
-field-item-content-plain-font-size = font-body-large
 
 // icon
 icon-size-xs = 20px
@@ -205,6 +194,7 @@ image-viewer-index-bottom = 100px
 
 // input-item
 input-item-height = 100px
+input-item-border-color = color-border-base
 input-item-title-width = 170px
 input-item-title-gap = 22px
 input-item-font-size = font-caption-normal
diff --git a/components/_style/mixin/theme.variable.styl b/components/_style/mixin/theme.variable.styl
index f2253232..fbb48b57 100644
--- a/components/_style/mixin/theme.variable.styl
+++ b/components/_style/mixin/theme.variable.styl
@@ -105,23 +105,27 @@ tag-small-font-size = var(--tag-small-font-size)
 tag-tiny-font-size = var(--tag-tiny-font-size)
 
 // field
-field-padding = var(--field-padding)
 field-padding-h = var(--field-padding-h)
 field-padding-v = var(--field-padding-v)
-field-title-font-size = var(--field-title-font-size)
+field-bg-color = var(--field-bg-color)
+field-header-gap = var(--field-header-gap)
+field-footer-gap = var(--field-footer-gap)
 field-title-color = var(--field-title-color)
+field-title-font-size = var(--field-title-font-size)
 field-title-font-weight = var(--field-title-font-weight)
-field-title-margin = var(--field-title-margin)
+field-describe-color = var(--field-describe-color)
+field-describe-font-size = var(--field-describe-font-size)
+field-action-color = var(--field-action-color)
+field-action-font-size = var(--field-action-font-size)
+
+// field-item
+field-item-min-height = var(--field-item-min-height)
 field-item-padding-v = var(--field-item-padding-v)
-field-item-bg-color = var(--field-item-bg-color)
-field-item-bg-tap-color = var(--field-item-bg-tap-color)
 field-item-color = var(--field-item-color)
 field-item-font-size = var(--field-item-font-size)
-field-item-icon-color = var(--field-item-icon-color)
+field-item-after-color = var(--field-item-after-color)
+field-item-after-font-size = var(--field-item-after-font-size)
 field-item-border-color = var(--field-item-border-color)
-field-item-color-disabled = var(--field-item-color-disabled)
-field-item-brief-font-size = var(--field-item-brief-font-size)
-field-item-brief-color = var(--field-item-brief-color)
 
 // input-item
 input-item-height = var(--input-item-height)
diff --git a/components/field-item/test/index.spec.js b/components/field-item/test/index.spec.js
index 5582e98c..cfd8271b 100644
--- a/components/field-item/test/index.spec.js
+++ b/components/field-item/test/index.spec.js
@@ -19,69 +19,43 @@ describe('FieldItem', () => {
     expect(wrapper.vm.title).to.equal('field item title')
   })
 
-  it('create a simple field-item with brief', () => {
+  it('create a simple field-item with describe', () => {
     wrapper = mount(FieldItem, {
       propsData: {
         title: 'field item title',
-        brief: 'field item brief',
+        describe: 'field item describe',
       },
     })
 
-    expect(wrapper.find('.md-field-item-brief').length).to.equal(1)
+    expect(wrapper.find('.md-field-item-describe').length).to.equal(1)
   })
 
   it('create a simple field-item with arrow', () => {
     wrapper = mount(FieldItem, {
       propsData: {
         title: 'field item title',
-        brief: 'field item brief',
-        arrow: 'arrow-right',
+        describe: 'field item describe',
+        arrow: true,
       },
     })
 
-    expect(wrapper.hasClass('has-arrow')).to.be.true
+    expect(wrapper.contains('.md-icon-arrow-right')).to.be.true
 
     const eventStub = sinon.stub(wrapper.vm, '$emit')
     wrapper.trigger('click')
     expect(eventStub.calledWith('click')).to.be.true
   })
 
-  it('create a field-item with solid title', () => {
-    wrapper = mount(FieldItem, {
-      propsData: {
-        title: 'field item title',
-        brief: 'field item brief',
-        arrow: 'arrow-right',
-        solid: true,
-      },
-    })
-
-    expect(wrapper.find('.solid').length).to.equal(1)
-  })
-
-  it('create a field-item with customized value align right', () => {
-    wrapper = mount(FieldItem, {
-      propsData: {
-        title: 'field item title',
-        brief: 'field item brief',
-        customized: true,
-        align: 'right',
-      },
-    })
-
-    expect(wrapper.vm.customized).to.be.true
-  })
-
   it('create a disabled field-item', () => {
     wrapper = mount(FieldItem, {
       propsData: {
         title: 'field item title',
-        brief: 'field item brief',
-        arrow: 'arrow-right',
+        describe: 'field item describe',
+        arrow: true,
         disabled: true,
       },
     })
 
-    expect(wrapper.hasClass('disabled')).to.be.true
+    expect(wrapper.hasClass('is-disabled')).to.be.true
   })
 })
diff --git a/components/field/README.en-US.md b/components/field/README.en-US.md
index 9a6f3502..7295a775 100644
--- a/components/field/README.en-US.md
+++ b/components/field/README.en-US.md
@@ -23,37 +23,69 @@ Vue.component(FieldItem.name, FieldItem)
 |Props | Description | Type | Default | Note|
 |----|-----|------|------|------|
 |title|title|String|-|-|
+|describe|description|String|-|-|
+|disabled|disable content operation|Boolean|false|-|
+|plain|plain style|Boolean|false|-|
+
+When use `disabled` prop, its descendants can use [inject](https://vuejs.org/v2/api/#provide-inject)to have access of `Field` ancestor.
+
+```javascript
+export default {
+  name: 'your-component',
+
+  inject: {
+    rootField: {
+      from: 'rootField',
+      default: () => ({})
+    }
+  },
+
+  computed: {
+    disabled() {
+      return this.rootField.disabled
+    }
+  },
+}
+```
+
+#### Field Slots
+
+##### default
+default content slot
+
+##### header
+header content slot
+
+##### action
+header action slot
+
+##### footer
+footer content slot
+
+---
 
 #### FieldItem Props
 |Props | Description | Type | Default | Note|
 |----|-----|------|------|------|
-|name|name|Number/String|-1|-|
-|title|title|Number/String|-|-|
-|brief|subtitle|String|-|-|
-|disabled|whether to disable it or not|Boolean|true|-|
-|arrow|the name of arrow|String|-|`arrow-up`, `arrow-right`, `arrow-down`, `arrow-left`|
-|customized|the content is customized or not|Boolean|have `slot` or not|-|
-|align|the position of customized contents|String|left|`left`, `right`, `center`|
-|value|content|String|-|-|
-|solid|the width of title is fixed or not|Boolean|false|-|
+|title|title|String|-|-|
+|describe|description|String|-|-|
+|disabled|disable item operation|Boolean|false|-|
+|arrow|arrow indicator|Boolean|false|-|
+
+#### FieldItem Events
+##### @click(event)
+click event when not disabled
 
 #### FieldItem Slots
 
 ##### default
-Default slot of content
+default content slot
 
-##### left
-Left slot of title <sup class="version-after">1.4.0+</sup>
+##### start
+start content slot
 
-##### right
-Right slot of content <sup class="version-after">1.4.0+</sup>
+##### after
+after content slot
 
-#### FieldItem Events
-
-##### @click(name)
-
-Click event
-
-|Props | Description | Type |
-|----|-----|------|
-|name|the name of fieldItem|Number/String|
+##### children
+extra children slot
diff --git a/components/field/README.md b/components/field/README.md
index e0ede63f..1b5c64d4 100644
--- a/components/field/README.md
+++ b/components/field/README.md
@@ -3,7 +3,7 @@ title: Field 区域列表组合
 preview: https://didi.github.io/mand-mobile/examples/#/field
 ---
 
-区域列表垂直排列，显示当前的内容、状态和可进行的操作
+区域列表垂直排列，显示当前的内容、状态和可进行的操作。
 
 ### 引入
 
@@ -23,36 +23,69 @@ Vue.component(FieldItem.name, FieldItem)
 |属性 | 说明 | 类型 | 默认值|备注|
 |----|-----|------|------|------|
 |title|标题|String|-|-|
+|describe|描述内容|String|-|-|
+|disabled|是否禁用区域|Boolean|false|-|
+|plain|镂空样式|Boolean|false|-|
+
+当使用了`disabled`选项时，其后代内容可以通过[inject](https://vuejs.org/v2/api/#provide-inject)的方式获取祖先`Field`的实例属性。
+
+```javascript
+export default {
+  name: 'your-component',
+
+  inject: {
+    rootField: {
+      from: 'rootField',
+      default: () => ({})
+    }
+  },
+
+  computed: {
+    disabled() {
+      return this.rootField.disabled
+    }
+  },
+}
+```
+
+#### Field Slots
+
+##### default
+内容默认插槽
+
+##### header
+页眉内容插槽
+
+##### action
+页眉操作区域插槽
+
+##### footer
+页脚内容插槽
+
+---
 
 #### FieldItem Props
-|属性 | 说明 | 类型 | 默认值 |备注|
+|属性 | 说明 | 类型 | 默认值|备注|
 |----|-----|------|------|------|
-|name|标识|Number/String| `-1`|-|
 |title|标题|String|-|-|
-|brief|子标题|String|-|-|
-|disabled|是否禁用|Boolean|`true`|-|
-|arrow|箭头名称|String|-|`arrow-up`, `arrow-right`, `arrow-down`, `arrow-left`|
-|customized|内容是否自定义|Boolean|是否有`slot`|-|
-|align|自定义内容时，内容位置|String|`left`|`left`, `right`, `center`|
-|value|内容|String|-|-|
-|solid|是否固定标题宽度，超出会自动换行|Boolean|`false`|-|
+|describe|描述内容|String|-|-|
+|disabled|是否禁用项目|Boolean|false|-|
+|arrow|动作箭头标识|Boolean|false|-|
+
+#### FieldItem Events
+##### @click(event)
+非禁用状态下的点击事件
 
 #### FieldItem Slots
 
 ##### default
 内容默认插槽
 
-##### left
-标题左侧插槽 <sup class="version-after">1.4.0+</sup>
+##### start
+头部区域插槽
 
-##### right
-内容右侧插槽 <sup class="version-after">1.4.0+</sup>
+##### after
+末尾预期插槽
 
-#### FieldItem Events
-
-##### @click(name)
-点击事件
-
-|属性 | 说明 | 类型|
-|----|-----|------|
-|name|fieldItem标识|Number/String|
+##### children
+额外内容插槽
diff --git a/components/field/demo/cases/demo0.vue b/components/field/demo/cases/demo0.vue
index 08b71923..734ba9f2 100644
--- a/components/field/demo/cases/demo0.vue
+++ b/components/field/demo/cases/demo0.vue
@@ -1,41 +1,13 @@
 <template>
   <div class="md-example-child md-example-child-field md-example-child-field-0">
-    <md-field title="区域标题">
-      <div
-        class="field-operator"
-        slot="titleValue"
-        @click="onClick('操作')"
-      >
+    <md-field title="区域标题" describe="区域描述性文本，可根据具体场景配置">
+      <template slot="action">
         操作<md-icon name="arrow-right"></md-icon>
-      </div>
-      <div>
-        <md-field-item
-          name="item0"
-          title="普通条目"
-        >
-        </md-field-item>
-        <md-field-item
-          name="item1"
-          title="动作条目"
-          arrow="arrow-right"
-          solid
-          @click="onClick">
-        </md-field-item>
-        <md-field-item
-          name="item2"
-          title="禁用条目"
-          arrow="arrow-right"
-          disabled
-          @click="onClick">
-        </md-field-item>
-        <md-field-item
-          name="item4"
-          title="标题"
-          brief="展示摘要描述"
-          arrow="arrow-right"
-          @click="onClick">
-        </md-field-item>
-      </div>
+      </template>
+      <p slot="footer">区域页脚区域内容插槽</p>
+      <md-field-item title="普通条目" />
+      <md-field-item title="动作条目" arrow @click="onClick" />
+      <md-field-item title="禁用条目" arrow disabled />
     </md-field>
   </div>
 </template>
@@ -44,33 +16,25 @@
 
 export default {
   name: 'field-demo',
+
   components: {
     [Field.name]: Field,
     [FieldItem.name]: FieldItem,
     [Icon.name]: Icon,
   },
+
+  data() {
+    return {
+      open: false,
+    }
+  },
+
   methods: {
-    onClick(name) {
+    onClick() {
       Dialog.alert({
-        content: `点击了 ${name}`,
+        content: '点击了',
       })
     },
   },
 }
 
</script>
-
-<style lang="stylus">
-.md-example-child-field-0
-  .md-field
-    margin-bottom 20px
-  .field-operator
-    display flex
-    align-items center
-    justify-content flex-end
-  .md-input-item
-    background #FFF
-    padding 0 32px
-  .strong-tip
-    font-size 24px
-    color color-text-highlight
-</style>
\ No newline at end of file
diff --git a/components/field/demo/cases/demo1.vue b/components/field/demo/cases/demo1.vue
index e483da7d..fbf7a027 100644
--- a/components/field/demo/cases/demo1.vue
+++ b/components/field/demo/cases/demo1.vue
@@ -1,82 +1,53 @@
 <template>
   <div class="md-example-child md-example-child-field md-example-child-field-1">
-    <md-field
-      title="区域标题"
-    >
-      <md-field-item
-        name="item0"
-        title="步进器"
-        align="right">
-        <md-stepper></md-stepper>
+    <md-field>
+      <md-field-item title="滴水贷" arrow />
+      <md-field-item title="信用付">
+        <md-switch slot="after" v-model="open" />
       </md-field-item>
-      <md-input-item
-        name="item1"
-        title="输入框"
-        placeholder="请输入..."
-      ></md-input-item>
-      <md-field-item
-        name="item2"
-        title="开关"
-        brief="包含子区域"
-        align="right">
-        <md-switch name="switch0" v-model="switchActive"></md-switch>
-        <md-field slot="child" plain>
-          <div>
-            <md-field-item
-              title="企业名称"
-              value="xxxxx"
-              align="right"
-            ></md-field-item>
-            <md-field-item
-              title="社会信用代码"
-              value="xxxxx"
-              align="right"
-            ></md-field-item>
-            <md-field-item
-              title="单位电话"
-              value="xxxxx"
-              align="right"
-            ></md-field-item>
-          </div>
-        </md-field>
+      <md-field-item title="滴水贷" arrow>
+        <span slot="after">可用8000.34</span>
+      </md-field-item>
+      <md-field-item title="信用付">
+        <span slot="after">可用8000.35</span>
+      </md-field-item>
+      <md-field-item title="滴水贷" arrow>
+        <div class="holder" slot="start"></div>
+        <span slot="after">可用8000.34</span>
+      </md-field-item>
+      <md-field-item title="信用付" arrow>
+        <div class="holder" slot="start"></div>
+        <span slot="after">可用8000.34</span>
       </md-field-item>
     </md-field>
   </div>
 </template>
 
-<script>
import {Field, FieldItem, Dialog, InputItem, Stepper, Switch} from 'mand-mobile'
+<script>
import {Field, FieldItem, Switch} from 'mand-mobile'
 
 export default {
   name: 'field-demo',
   /* DELETE */
-  title: '配合控件',
-  titleEnUS: 'With control',
+  title: '单行列表',
+  titleEnUS: 'Simple List',
   /* DELETE */
   components: {
     [Field.name]: Field,
     [FieldItem.name]: FieldItem,
-    [InputItem.name]: InputItem,
-    [Stepper.name]: Stepper,
     [Switch.name]: Switch,
   },
   data() {
     return {
-      switchActive: false,
+      open: false,
     }
   },
-  methods: {
-    onClick(name) {
-      Dialog.alert({
-        content: `点击了 ${name}`,
-      })
-    },
-  },
 }
 
</script>
 
 <style lang="stylus" scoped>
-.md-example-child-field-1
-  .strong-tip
-    font-size 24px
-    color color-text-highlight
-</style>
\ No newline at end of file
+.holder
+  display block
+  width 48px
+  height 48px
+  background-color #E6E6E6
+</style>
diff --git a/components/field/demo/cases/demo2.vue b/components/field/demo/cases/demo2.vue
index eab088c1..fc89822d 100644
--- a/components/field/demo/cases/demo2.vue
+++ b/components/field/demo/cases/demo2.vue
@@ -1,77 +1,56 @@
 <template>
   <div class="md-example-child md-example-child-field md-example-child-field-2">
     <md-field>
-      <md-field-item
-        name="item0"
-        title="短标题"
-        arrow="arrow-right"
-        value="内容靠左展示"
-        align="left"
-        @click="onClick">
+      <md-field-item title="交通银行(尾号3089)" describe="展示摘要描述" />
+      <md-field-item title="招商银行(尾号2342)" describe="展示摘要描述">
+        <md-switch v-model="open" slot="after" />
       </md-field-item>
-      <md-field-item
-        name="item1"
-        title="标题宽度不固定"
-        arrow="arrow-right"
-        value="内容居中展示"
-        align="center"
-        @click="onClick">
+      <md-field-item title="交通银行(尾号3089)" describe="展示摘要描述" arrow>
+        <span slot="after">附加文案</span>
       </md-field-item>
-      <md-field-item
-        name="item2"
-        title="标题宽度固定"
-        arrow="arrow-right"
-        value="内容靠右展示"
-        solid
-        align="right"
-        @click="onClick">
+      <md-field-item title="交通银行" describe="展示摘要描述" arrow>
+        <span class="holder" slot="start"></span>
+        <span slot="after">附加文案</span>
       </md-field-item>
-      <md-field-item
-        name="item2"
-        title="左右插槽"
-        arrow="arrow-right"
-        solid
-        align="right"
-        @click="onClick">
-        <div>内容展示</div>
-        <md-icon name="bank-zs" slot="left"></md-icon>
-        <md-icon name="circle-alert" slot="right"></md-icon>
+      <md-field-item title="招商银行" describe="展示摘要描述" disabled arrow>
+        <span class="holder" slot="start"></span>
+        <span slot="after">禁用的项目</span>
+      </md-field-item>
+      <md-field-item title="建设银行" describe="摘要描述" arrow>
+        <p slot="children">
+          中国建设银行，在全球范围内为台湾、香港、美国、澳大利亚等国家或地区提供全面金融服务，主要经营公司银行业务、个人银行业务和资金业务，包括居民储蓄存款、信贷资金贷款、住房类贷款、外汇、信用卡，以及投资理财等多种业务。
+        </p>
       </md-field-item>
     </md-field>
   </div>
 </template>
 
-<script>
import {Field, FieldItem, Dialog, InputItem, Icon} from 'mand-mobile'
-import '@examples/assets/images/bank-zs.svg'
+<script>
import {Field, FieldItem, Switch} from 'mand-mobile'
 
 export default {
   name: 'field-demo',
   /* DELETE */
-  title: '包含内容',
-  titleEnUS: 'With content',
+  title: '多行列表',
+  titleEnUS: 'Content List',
   /* DELETE */
   components: {
     [Field.name]: Field,
     [FieldItem.name]: FieldItem,
-    [InputItem.name]: InputItem,
-    [Icon.name]: Icon,
+    [Switch.name]: Switch,
   },
-  methods: {
-    onClick(name) {
-      Dialog.alert({
-        content: `点击了 ${name}`,
-      })
-    },
+  data() {
+    return {
+      open: false,
+    }
   },
 }
 
</script>
 
 <style lang="stylus" scoped>
-.md-example-child-field-2
-  .md-input-item
-    background #FFF
-    padding 0 32px
-  .strong-tip
-    font-size 24px
-    color color-text-highlight
-</style>
\ No newline at end of file
+.holder
+  display block
+  width 88px
+  height 88px
+  border-radius 44px
+  background-color #E6E6E6
+</style>
diff --git a/components/field/demo/cases/demo3.vue b/components/field/demo/cases/demo3.vue
deleted file mode 100644
index b31e25cf..00000000
--- a/components/field/demo/cases/demo3.vue
+++ /dev/null
@@ -1,64 +0,0 @@
-<template>
-  <div class="md-example-child md-example-child-field md-example-child-field-3">
-    <md-field
-      title="收款账户"
-      plain
-    >
-      <div
-        class="field-title-value"
-        slot="titleValue"
-      >
-        <md-icon name="bank-zs"></md-icon>&nbsp;招商银行(尾号xxxx)
-      </div>
-      <div>
-        <md-field-item
-          title="借款金额"
-          value="￥30,000"
-          align="right"
-        ></md-field-item>
-        <md-field-item
-          title="借款期数"
-          value="12期"
-          align="right"
-        ></md-field-item>
-        <md-field-item
-          title="正常还款总息"
-          value="￥140.50"
-          align="right"
-        ></md-field-item>
-      </div>
-    </md-field>
-  </div>
-</template>
-
-<script>
import {Field, FieldItem, Icon} from 'mand-mobile'
-
-export default {
-  name: 'field-demo',
-  /* DELETE */
-  title: '纯文列表',
-  titleEnUS: 'Plain text items',
-  /* DELETE */
-  components: {
-    [Field.name]: Field,
-    [FieldItem.name]: FieldItem,
-    [Icon.name]: Icon,
-  },
-}
-
</script>
-
-<style lang="stylus">
-.md-example-child-field-3
-  .md-field
-    margin-bottom 20px
-    .field-title-value
-      display flex
-      align-items center
-      justify-content flex-end
-  .md-input-item
-    background #FFF
-    padding 0 32px
-  .strong-tip
-    font-size 24px
-    color color-text-highlight
-</style>
\ No newline at end of file
diff --git a/components/field/demo/index.vue b/components/field/demo/index.vue
index 7bbf7d13..9c276773 100644
--- a/components/field/demo/index.vue
+++ b/components/field/demo/index.vue
@@ -13,7 +13,5 @@
 import Demo0 from './cases/demo0'
 import Demo1 from './cases/demo1'
 import Demo2 from './cases/demo2'
-import Demo3 from './cases/demo3'
-
-export default {...createDemoModule('field', [Demo0, Demo1, Demo2, Demo3])}
-
</script>
\ No newline at end of file
+export default {...createDemoModule('field', [Demo0, Demo1, Demo2])}
+
</script>
diff --git a/components/field/index.vue b/components/field/index.vue
index a97d2c07..768470f7 100644
--- a/components/field/index.vue
+++ b/components/field/index.vue
@@ -1,25 +1,22 @@
 <template>
-  <div class="md-field" :class="{'is-plain': plain}">
-    <div
-      class="md-field-title"
-      v-if="title !== '' || value !== '' "
-    >
-      <div class="md-field-title-inner">
-        <p class="title" v-if="title !== ''">
-          {{title}}
-        </p>
-        <p class="value" v-if="$slots.titleValue">
-          <slot name="titleValue"></slot>
-        </p>
-        <p class="value" v-else-if="value !== ''">
-          {{value}}
-        </p>
+  <fieldset class="md-field" :class="{'is-plain': plain, 'is-disabled': disabled}">
+    <header class="md-field-header" v-if="title || describe || $slots.header || $slots.action">
+      <div class="md-field-heading">
+        <legend v-if="title" class="md-field-title" v-text="title"></legend>
+        <p v-if="describe" class="md-field-describe" v-text="describe"></p>
+        <slot name="header"></slot>
       </div>
-    </div>
+      <div class="md-field-action">
+        <slot name="action"></slot>
+      </div>
+    </header>
     <div class="md-field-content">
       <slot></slot>
     </div>
-  </div>
+    <footer class="md-field-footer" v-if="$slots.footer">
+      <slot name="footer"></slot>
+    </footer>
+  </fieldset>
 </template>
 
 <script>
export default {
@@ -30,94 +27,76 @@
       type: String,
       default: '',
     },
-    value: {
+    describe: {
       type: String,
       default: '',
     },
-    arrow: {
-      type: String,
-      default: '',
+    disabled: {
+      type: Boolean,
+      default: false,
     },
     plain: {
       type: Boolean,
       default: false,
     },
   },
+
+  provide() {
+    return {
+      rootField: this,
+    }
+  },
 }
 
</script>
 
 <style lang="stylus">
 .md-field
+  padding field-padding-v field-padding-h
+  border none
   background-color field-bg-color
-  .md-field-title
-    padding field-padding-v field-padding-h field-title-margin field-padding-h
-    .md-field-title-inner
-      display flex
-      font-size field-title-font-size
-      font-weight field-title-font-weight
-      color field-title-color
-      &>p
-        flex 1
-        &.title
-          text-align left
-        &.value
-          font-size field-title-operator-font-size
-          color field-title-operator-color
-          text-align right
-  .md-field-content
-    display flex
-    flex-direction column
-    .md-field-item,
-    .md-input-item,
-    .md-input-item-brief,
-    .md-input-item-msg,
-    .md-radio
-      padding-left field-padding-h
-      padding-right field-padding-h
-      box-sizing border-box
-    .md-field-item .md-field-item-inner, .md-input-item-container
-      hairline(bottom, field-item-border-color)
-    .md-field-item:last-of-type
-      .md-field-item-inner::before
-        display none
-    // .md-input-item:last-of-type .md-input-item-container::before
-    //   display none
-    .md-input-item.is-error .md-input-item-container
-      hairline(bottom, input-item-color-error, 0, 4px)
-    .md-input-item.is-focus .md-input-item-container
-      hairline(bottom, color-text-base, 0, 4px)
-
-  .md-radio .md-radio-item
-    padding-left 0 !important
-    padding-right 0 !important
-
   &.is-plain
-    background-color field-bg-plain-color
-    .md-field-title
-      padding field-item-padding-plain-v field-padding-plain-h 0
-      .md-field-title-inner
-        padding-bottom field-item-padding-plain-v
-        font-size field-title-plain-font-size
-        color field-title-plain-color
-        hairline(bottom, field-item-border-color)
-    .md-field-item
-      padding-left field-padding-plain-h
-      padding-right field-padding-plain-h
-      .md-field-item-inner
-        margin-bottom field-item-padding-plain-v
-        padding 0
-        &:before
-          display none
-        .md-field-item-label
-          .md-field-item-title
-            font-size field-item-label-plain-font-size
-            color field-item-label-plain-color
-          .md-field-item-brief
-            display none
-        .md-field-item-content
-          font-size field-item-content-plain-font-size
-          font-weight font-weight-normal
-          color field-item-content-plain-color
-      &:first-of-type
-        margin-top field-item-padding-plain-v
+    padding 0
+    background-color transparent
+
+.md-field-header
+  position relative
+  display flex
+  align-items center
+  justify-content space-between
+  margin-bottom field-header-gap
+
+.md-field-heading
+  flex 1 1 0%
+
+.md-field-action
+  flex-shrink 0
+  display inline-flex
+  align-items center
+  justify-content flex-end
+  margin-left h-gap-sm
+  color field-action-color
+  font-size field-action-font-size
+
+.md-field-title
+  color field-title-color
+  font-size field-title-font-size
+  font-weight field-title-font-weight
+
+.md-field-describe
+  color field-describe-color
+  font-size field-describe-font-size
+  line-height 1.4
+
+.md-field-footer
+  margin-top field-footer-gap
+
+.md-field
+  &:disabled,
+  &.is-disabled
+    .md-field-title,
+    .md-field-describe,
+    .md-field-action,
+    .md-field-content,
+    .md-field-footer
+      color color-text-disabled
 </style>
diff --git a/components/field/item.vue b/components/field/item.vue
index 350565fc..b3b9d4e1 100644
--- a/components/field/item.vue
+++ b/components/field/item.vue
@@ -1,64 +1,26 @@
 <template>
-  <div
-    class="md-field-item"
-    :class="[
-      arrow ? 'has-arrow' : '' ,
-      !!$slots.child ? 'has-child' : '' ,
-      disabled ? 'disabled' : '',
-    ]"
-    :name="name"
-    @click="$_onItemClick($event, name)">
-    <div class="md-field-item-inner">
-      <!-- Left Control -->
-      <div class="md-field-item-extra" v-if="$slots.left">
-        <slot name="left"></slot>
+  <div class="md-field-item" :class="{ 'is-disabled': currentDisabled }" @click="$_onClick">
+    <div class="md-field-item-content">
+      <div class="md-field-item-start" v-if="$slots.start">
+        <slot name="start"></slot>
       </div>
-      <div
-        class="md-field-item-label"
-        :class="[
-          solid ? 'solid' : ''
-        ]">
-        <div class="md-field-item-title" v-html="title"></div>
-        <div class="md-field-item-brief"
-          v-if="brief"
-          v-html="brief"
-        ></div>
-      </div>
-      <!-- Content -->
-      <div
-        v-if="customized"
-        class="md-field-item-content"
-        :class="[align]">
+      <div class="md-field-item-inner">
+        <p class="md-field-item-title" v-if="title" v-text="title"></p>
+        <p class="md-field-item-describe" v-if="describe" v-text="describe"></p>
         <slot></slot>
       </div>
-      <div
-        v-else
-        class="md-field-item-content"
-        :class="[align]">
-        {{value}}
+      <div class="md-field-item-after" v-if="arrow || $slots.after">
+        <slot name="after"></slot>
+        <md-icon v-if="arrow" name="arrow-right" size="lg" />
       </div>
-      <!-- Right Control -->
-      <div
-        class="md-field-right"
-        v-if="$slots.right"
-      >
-        <slot name="right"></slot>
-      </div>
-      <md-icon
-        v-else-if="arrow"
-        class="md-field-arrow"
-        :name="arrow"
-        size="lg">
-      </md-icon>
     </div>
-    <div class="md-field-child" v-if="$slots.child">
-      <slot name="child"></slot>
+    <div class="md-field-item-children" v-if="$slots.children">
+      <slot name="children"></slot>
     </div>
   </div>
 </template>
 
 <script>
import Icon from '../icon'
-import {isEmptyObject, randomId} from '../_util'
 
 export default {
   name: 'md-field-item',
@@ -67,60 +29,43 @@ export default {
     [Icon.name]: Icon,
   },
 
-  props: {
-    name: {
-      type: Number | String,
-      default() {
-        return randomId('field-item')
-      },
+  inject: {
+    rootField: {
+      from: 'rootField',
+      default: () => ({}),
     },
+  },
+
+  props: {
     title: {
       type: String,
       default: '',
     },
-    brief: {
+    describe: {
       type: String,
       default: '',
     },
-    value: {
-      type: String,
-      default: '',
+    arrow: {
+      type: Boolean,
+      default: false,
     },
     disabled: {
       type: Boolean,
       default: false,
     },
-    arrow: {
-      type: String,
-      default: '',
-    },
-    customized: {
-      type: Boolean,
-      default() {
-        return !isEmptyObject(this.$slots)
-      },
-    },
-    align: {
-      // left, right, center
-      type: String,
-      default: 'left',
-      validator(value) {
-        return ['left', 'right', 'center'].indexOf(value) > -1
-      },
-    },
-    solid: {
-      type: Boolean,
-      default: false,
+  },
+
+  computed: {
+    currentDisabled() {
+      return this.rootField.disabled || this.disabled
     },
   },
 
   methods: {
-    // MARK: events handler
-    $_onItemClick(event, name) {
-      if (this.disabled) {
-        return
+    $_onClick(e) {
+      if (!this.currentDisabled) {
+        this.$emit('click', e)
       }
-      this.$emit('click', name)
     },
   },
 }
@@ -128,79 +73,56 @@ export default {
 
 <style lang="stylus">
 .md-field-item
-  -webkit-tap-highlight-color transparent
   position relative
+  &:not(:last-child)
+    hairline(bottom, field-item-border-color)
+
+.md-field-item-content
+  display flex
+  align-items center
+  justify-content space-between
+  min-height field-item-min-height
+  padding-top field-item-padding-v
+  padding-bottom field-item-padding-v
   box-sizing border-box
-  width 100%
-  &.disabled
-    .md-field-item-inner
-      .md-field-item-label, .md-field-item-content
-        opacity field-item-color-disabled
-  &.has-arrow
-    .md-field-item-content
-      padding-right 28px
-    &::after
-      absolute-pos()
-      display none
-      content ''
-      position absolute
-      box-sizing border-box
-      background-color field-item-bg-tap-color
-    &:active::after
-      display block
-  &.has-child
-    padding 0 !important
-    .md-field-item-inner
-      padding field-item-padding-v field-padding-h
-    .md-field-child
-      position relative
-      &:before
-        content ''
-        position absolute
-        top -12px
-        left 10%
-        border-left solid 12px transparent
-        border-right solid 12px transparent
-        border-bottom solid 12px field-bg-plain-color
-      .md-field-item
-        padding-left field-padding-h !important
-        padding-right field-padding-h !important
-  .md-field-item-inner
-      display flex
-      align-items center
-      padding field-item-padding-v 0
-  .md-field-item-extra
-    display flex
-    margin-right field-item-padding-v
-  .md-field-item-label
-    &.solid
-      width input-item-title-width
-    .md-field-item-title
-      font-size field-item-label-font-size
-    .md-field-item-brief
-      font-size field-item-brief-font-size
-      color field-item-brief-color
-  .md-field-item-content
-    display flex
-    flex-grow 1
-    align-items center
-    color field-item-content-color
-    font-size field-item-content-font-size
-    font-weight field-item-content-font-weight
-    &.left
-      margin-left v-gap-lg
-    &.right
-      justify-content flex-end
-    &.center
-      justify-content center
-  .md-field-arrow
-    position absolute
-    right 28px
-    top 50%
-    transform translate(42px, -50%)
-    color field-item-icon-color
-  .md-field-right
-    display flex
-    align-items center
-    justify-content center
+
+.md-field-item-start
+  flex-shrink 0
+  margin-right h-gap-lg
+
+.md-field-item-inner
+  flex 1 1 0%
+  color field-item-color
+  font-size field-item-font-size
+  line-height 1.2
+
+.md-field-item-after
+  flex-shrink 0
+  margin-left h-gap-sm
+  display inline-flex
+  align-items center
+  justify-content flex-end
+  color field-item-after-color
+  font-size field-item-after-font-size
+  .md-icon-arrow-right
+    margin-right -12px
+
+.md-field-item-title
+  line-height 1.2
+
+.md-field-item-describe
+  color #858B9C
+  font-size 24px
+  line-height 1.4
+  margin-top v-gap-sm
+
+.md-field-item-children
+  padding-bottom field-item-padding-v
+
+.md-field-item
+  &.is-disabled
+    .md-field-item-inner,
+    .md-field-item-describe,
+    .md-field-item-after
+      color color-text-disabled
 </style>