From 6957bb6983eddd153bbd176f2f5be8cd37be19c5 Mon Sep 17 00:00:00 2001
From: catchonme <catchonme@163.com>
Date: Tue, 11 Jun 2019 10:09:44 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8Dgrid=E5=86=85=E5=AE=B9?=
 =?UTF-8?q?=E4=B8=BA=E5=85=B6=E4=BB=96=E6=97=B6=E4=B8=8D=E8=83=BD=E8=AF=86?=
 =?UTF-8?q?=E5=88=AB=E6=B8=B2=E6=9F=93=E5=99=A8=E7=9A=84=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Form/__snapshots__/array.test.tsx.snap    | 144 +++++++++
 .../Form/__snapshots__/button.test.tsx.snap   | 233 +++++++++++++++
 .../__snapshots__/buttonGroup.test.tsx.snap   | 275 ++++++++++++++++++
 .../__snapshots__/buttonToolBar.test.tsx.snap | 195 +++++++++++++
 .../Form/__snapshots__/checkbox.test.tsx.snap |  62 ++++
 .../__snapshots__/checkboxes.test.tsx.snap    | 237 +++++++++++++++
 .../Form/__snapshots__/grid.test.tsx.snap     |  76 +++++
 .../Form/__snapshots__/group.test.tsx.snap    | 224 ++++++++++++++
 .../Form/__snapshots__/hbox.test.tsx.snap     |  76 +++++
 .../Form/__snapshots__/index.test.tsx.snap    |  13 +-
 .../Form/__snapshots__/list.test.tsx.snap     | 270 +++++++++++++++++
 .../Form/__snapshots__/panel.test.tsx.snap    | 154 ++++++++++
 .../Form/__snapshots__/radios.test.tsx.snap   | 237 +++++++++++++++
 .../Form/__snapshots__/service.test.tsx.snap  | 138 +++++++++
 .../Form/__snapshots__/static.test.tsx.snap   | 103 +++++++
 .../Form/__snapshots__/switch.test.tsx.snap   |  61 ++++
 .../Form/__snapshots__/tabs.test.tsx.snap     | 154 ++++++++++
 __tests__/renderers/Form/array.test.tsx       |  46 +++
 __tests__/renderers/Form/button.test.tsx      |  60 ++++
 __tests__/renderers/Form/buttonGroup.test.tsx |  92 ++++++
 .../renderers/Form/buttonToolBar.test.tsx     |  55 ++++
 __tests__/renderers/Form/checkbox.test.tsx    |  35 +++
 __tests__/renderers/Form/checkboxes.test.tsx  |  63 ++++
 __tests__/renderers/Form/grid.test.tsx        |  50 ++++
 __tests__/renderers/Form/group.test.tsx       |  88 ++++++
 __tests__/renderers/Form/hbox.test.tsx        |  47 +++
 __tests__/renderers/Form/list.test.tsx        |  93 ++++++
 __tests__/renderers/Form/panel.test.tsx       |  73 +++++
 __tests__/renderers/Form/radios.test.tsx      |  59 ++++
 __tests__/renderers/Form/service.test.tsx     |  73 +++++
 __tests__/renderers/Form/static.test.tsx      |  65 +++++
 __tests__/renderers/Form/switch.test.tsx      |  46 +++
 __tests__/renderers/Form/tabs.test.tsx        |  52 ++++
 docs/renderers/Form/Combo.md                  |   2 +-
 docs/renderers/Form/FieldSet.md               |   1 +
 docs/renderers/Grid.md                        |   2 +-
 docs/renderers/Tabs.md                        |   1 +
 src/renderers/Form/Grid.tsx                   |   2 +-
 38 files changed, 3649 insertions(+), 8 deletions(-)
 create mode 100644 __tests__/renderers/Form/__snapshots__/array.test.tsx.snap
 create mode 100644 __tests__/renderers/Form/__snapshots__/button.test.tsx.snap
 create mode 100644 __tests__/renderers/Form/__snapshots__/buttonGroup.test.tsx.snap
 create mode 100644 __tests__/renderers/Form/__snapshots__/buttonToolBar.test.tsx.snap
 create mode 100644 __tests__/renderers/Form/__snapshots__/checkbox.test.tsx.snap
 create mode 100644 __tests__/renderers/Form/__snapshots__/checkboxes.test.tsx.snap
 create mode 100644 __tests__/renderers/Form/__snapshots__/grid.test.tsx.snap
 create mode 100644 __tests__/renderers/Form/__snapshots__/group.test.tsx.snap
 create mode 100644 __tests__/renderers/Form/__snapshots__/hbox.test.tsx.snap
 create mode 100644 __tests__/renderers/Form/__snapshots__/list.test.tsx.snap
 create mode 100644 __tests__/renderers/Form/__snapshots__/panel.test.tsx.snap
 create mode 100644 __tests__/renderers/Form/__snapshots__/radios.test.tsx.snap
 create mode 100644 __tests__/renderers/Form/__snapshots__/service.test.tsx.snap
 create mode 100644 __tests__/renderers/Form/__snapshots__/static.test.tsx.snap
 create mode 100644 __tests__/renderers/Form/__snapshots__/switch.test.tsx.snap
 create mode 100644 __tests__/renderers/Form/__snapshots__/tabs.test.tsx.snap
 create mode 100644 __tests__/renderers/Form/array.test.tsx
 create mode 100644 __tests__/renderers/Form/button.test.tsx
 create mode 100644 __tests__/renderers/Form/buttonGroup.test.tsx
 create mode 100644 __tests__/renderers/Form/buttonToolBar.test.tsx
 create mode 100644 __tests__/renderers/Form/checkbox.test.tsx
 create mode 100644 __tests__/renderers/Form/checkboxes.test.tsx
 create mode 100644 __tests__/renderers/Form/grid.test.tsx
 create mode 100644 __tests__/renderers/Form/group.test.tsx
 create mode 100644 __tests__/renderers/Form/hbox.test.tsx
 create mode 100644 __tests__/renderers/Form/list.test.tsx
 create mode 100644 __tests__/renderers/Form/panel.test.tsx
 create mode 100644 __tests__/renderers/Form/radios.test.tsx
 create mode 100644 __tests__/renderers/Form/service.test.tsx
 create mode 100644 __tests__/renderers/Form/static.test.tsx
 create mode 100644 __tests__/renderers/Form/switch.test.tsx
 create mode 100644 __tests__/renderers/Form/tabs.test.tsx

diff --git a/__tests__/renderers/Form/__snapshots__/array.test.tsx.snap b/__tests__/renderers/Form/__snapshots__/array.test.tsx.snap
new file mode 100644
index 00000000..22eff785
--- /dev/null
+++ b/__tests__/renderers/Form/__snapshots__/array.test.tsx.snap
@@ -0,0 +1,144 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Renderer:array 1`] = `
+<div>
+  <div
+    class="a-Panel a-Panel--default a-Panel--form"
+  >
+    <div
+      class="a-Panel-heading"
+    >
+      <h3
+        class="a-Panel-title"
+      >
+        <span
+          class="a-TplField"
+        >
+          The form
+        </span>
+      </h3>
+    </div>
+    <div
+      class="a-Panel-body"
+    >
+      <form
+        class="a-Form a-Form--normal"
+        novalidate=""
+      >
+        <div
+          class="a-Form-item a-Form-item--normal"
+        >
+          <label
+            class="a-Form-label"
+          >
+            <span>
+              颜色集合
+            </span>
+          </label>
+          <div
+            class="a-ComboControl a-Form-control is-inline"
+          >
+            <div
+              class="a-Combo a-Combo--multi a-Combo--hor"
+            >
+              <div
+                class="a-Combo-items"
+              >
+                <div
+                  class="a-Combo-item"
+                >
+                  <div
+                    class="a-Combo-itemInner"
+                  >
+                    <div
+                      class="a-Form a-Form--row a-Combo-form"
+                      novalidate=""
+                    >
+                      <div
+                        class="a-Form-row"
+                      >
+                        <div
+                          class="a-Form-col"
+                        >
+                          <div
+                            class="a-Form-item a-Form-item--row"
+                          >
+                            <div
+                              class="a-Form-rowInner"
+                            >
+                              <div
+                                class="a-ColorControl a-Form-control"
+                              >
+                                <div
+                                  class="a-ColorPicker"
+                                >
+                                  <input
+                                    autocomplete="off"
+                                    class="a-ColorPicker-input"
+                                    placeholder="请选择颜色"
+                                    size="10"
+                                    type="text"
+                                    value="red"
+                                  />
+                                  <a
+                                    class="a-ColorPicker-clear"
+                                  >
+                                    <svg
+                                      class="icon"
+                                      p-id="1463"
+                                      version="1.1"
+                                      viewBox="0 0 1024 1024"
+                                      xmlns="http://www.w3.org/2000/svg"
+                                    >
+                                      <path
+                                        d="M967.81435 106.836237 917.16274 56.18565 512 461.34839 106.836237 56.18565 56.184627 106.836237 461.34839 512 56.184627 917.163763 106.836237 967.815373 512 562.65161 917.16274 967.815373 967.81435 917.163763 562.650587 512Z"
+                                        data-spm-anchor-id="a313x.7781069.0.i0"
+                                        p-id="1464"
+                                      />
+                                    </svg>
+                                  </a>
+                                  <span
+                                    class="a-ColorPicker-preview"
+                                  >
+                                    <i
+                                      class="a-ColorPicker-previewIcon"
+                                      style="background: red;"
+                                    />
+                                  </span>
+                                </div>
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div
+                class="a-Combo-toolbar"
+              >
+                <button
+                  class="a-Button a-Combo-addBtn"
+                  data-tooltip="新增一条数据"
+                  type="button"
+                >
+                  <i
+                    class="a-Button-icon fa fa-plus"
+                  />
+                  <span>
+                    新增
+                  </span>
+                </button>
+                <span
+                  class="a-Combo-dragableTip"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      </form>
+    </div>
+  </div>
+</div>
+`;
diff --git a/__tests__/renderers/Form/__snapshots__/button.test.tsx.snap b/__tests__/renderers/Form/__snapshots__/button.test.tsx.snap
new file mode 100644
index 00000000..c081d6da
--- /dev/null
+++ b/__tests__/renderers/Form/__snapshots__/button.test.tsx.snap
@@ -0,0 +1,233 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Renderer:button 1`] = `
+<div>
+  <div
+    class="a-Panel a-Panel--default a-Panel--form"
+  >
+    <div
+      class="a-Panel-heading"
+    >
+      <h3
+        class="a-Panel-title"
+      >
+        <span
+          class="a-TplField"
+        >
+          The form
+        </span>
+      </h3>
+    </div>
+    <div
+      class="a-Panel-body"
+    >
+      <form
+        class="a-Form a-Form--normal"
+        novalidate=""
+      >
+        <div
+          class="a-Form-item a-Form-item--normal"
+        >
+          <button
+            class="a-Button a-Button--default a-Form-control"
+            type="button"
+          >
+            <span>
+              Text
+            </span>
+            <i
+              class="a-Button-icon fa fa-plus"
+            />
+          </button>
+        </div>
+        <div
+          class="a-Form-item a-Form-item--normal"
+        >
+          <button
+            class="a-Button a-Button--default a-Form-control"
+            type="button"
+          >
+            <span>
+              OpenDialog
+            </span>
+          </button>
+        </div>
+        <div
+          class="a-Form-item a-Form-item--normal"
+        >
+          <button
+            class="a-Button a-Button--primary a-Form-control"
+            type="submit"
+          >
+            <span>
+              Submit
+            </span>
+          </button>
+        </div>
+        <div
+          class="a-Form-item a-Form-item--normal r-2x"
+        >
+          <button
+            class="a-Button a-Button--danger a-Button--sm a-Form-control"
+            type="reset"
+          >
+            <span>
+              Reset
+            </span>
+          </button>
+        </div>
+      </form>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Renderer:button 2`] = `
+<div>
+  <div
+    class="a-Panel a-Panel--default a-Panel--form"
+  >
+    <div
+      class="a-Panel-heading"
+    >
+      <h3
+        class="a-Panel-title"
+      >
+        <span
+          class="a-TplField"
+        >
+          The form
+        </span>
+      </h3>
+    </div>
+    <div
+      class="a-Panel-body"
+    >
+      <form
+        class="a-Form a-Form--normal"
+        novalidate=""
+      >
+        <div
+          class="a-Form-item a-Form-item--normal"
+        >
+          <button
+            class="a-Button a-Button--default a-Form-control"
+            type="button"
+          >
+            <span>
+              Text
+            </span>
+            <i
+              class="a-Button-icon fa fa-plus"
+            />
+          </button>
+        </div>
+        <div
+          class="a-Form-item a-Form-item--normal"
+        >
+          <button
+            class="a-Button a-Button--default a-Form-control"
+            type="button"
+          >
+            <span>
+              OpenDialog
+            </span>
+          </button>
+        </div>
+        <div
+          class="a-Form-item a-Form-item--normal"
+        >
+          <button
+            class="a-Button a-Button--primary a-Form-control"
+            type="submit"
+          >
+            <span>
+              Submit
+            </span>
+          </button>
+        </div>
+        <div
+          class="a-Form-item a-Form-item--normal r-2x"
+        >
+          <button
+            class="a-Button a-Button--danger a-Button--sm a-Form-control"
+            type="reset"
+          >
+            <span>
+              Reset
+            </span>
+          </button>
+        </div>
+      </form>
+    </div>
+  </div>
+  <div
+    class="amis-dialog-widget a-Modal a-Modal--1th"
+    role="dialog"
+  >
+    <div
+      class="a-Modal-overlay in"
+    />
+    <div
+      class="a-Modal-content in"
+    >
+      <div
+        class="a-Modal-header"
+      >
+        <a
+          class="a-Modal-close"
+          data-tooltip="关闭弹窗"
+        >
+          <svg
+            class="icon"
+            p-id="1463"
+            version="1.1"
+            viewBox="0 0 1024 1024"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M967.81435 106.836237 917.16274 56.18565 512 461.34839 106.836237 56.18565 56.184627 106.836237 461.34839 512 56.184627 917.163763 106.836237 967.815373 512 562.65161 917.16274 967.815373 967.81435 917.163763 562.650587 512Z"
+              data-spm-anchor-id="a313x.7781069.0.i0"
+              p-id="1464"
+            />
+          </svg>
+        </a>
+        <div
+          class="a-Modal-title"
+        >
+          提示
+        </div>
+      </div>
+      <div
+        class="a-Modal-body"
+      >
+        <span
+          class="a-TplField"
+        >
+          对，你刚点击了！
+        </span>
+      </div>
+      <div
+        class="a-Modal-footer"
+      >
+        <button
+          class="a-Button a-Button--default"
+          type="button"
+        >
+          <span>
+            取消
+          </span>
+        </button>
+        <button
+          class="a-Button a-Button--primary"
+          type="button"
+        >
+          <span>
+            确认
+          </span>
+        </button>
+      </div>
+    </div>
+  </div>
+</div>
+`;
diff --git a/__tests__/renderers/Form/__snapshots__/buttonGroup.test.tsx.snap b/__tests__/renderers/Form/__snapshots__/buttonGroup.test.tsx.snap
new file mode 100644
index 00000000..a1c6127d
--- /dev/null
+++ b/__tests__/renderers/Form/__snapshots__/buttonGroup.test.tsx.snap
@@ -0,0 +1,275 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Renderer:button-group 1`] = `
+<div>
+  <div
+    class="a-Panel a-Panel--default a-Panel--form"
+  >
+    <div
+      class="a-Panel-heading"
+    >
+      <h3
+        class="a-Panel-title"
+      >
+        <span
+          class="a-TplField"
+        >
+          The form
+        </span>
+      </h3>
+    </div>
+    <div
+      class="a-Panel-body"
+    >
+      <form
+        class="a-Form a-Form--normal"
+        novalidate=""
+      >
+        <div
+          class="a-Form-item a-Form-item--normal"
+        >
+          <label
+            class="a-Form-label"
+          >
+            <span>
+              单选
+            </span>
+          </label>
+          <div
+            class="a-ButtonGroupControl a-Form-control"
+          >
+            <div
+              class="a-ButtonGroup"
+            >
+              <button
+                class="a-Button a-Button--default"
+                type="button"
+              >
+                <span>
+                  Option A
+                </span>
+              </button>
+              <button
+                class="a-Button a-Button--default"
+                type="button"
+              >
+                <span>
+                  Option B
+                </span>
+              </button>
+            </div>
+          </div>
+        </div>
+        <div
+          class="a-Form-item a-Form-item--normal"
+        >
+          <label
+            class="a-Form-label"
+          >
+            <span>
+              当前值
+            </span>
+          </label>
+          <div
+            class="form-control-static"
+          >
+            <div
+              class="a-Form-control"
+            >
+              <span
+                class="a-TplField"
+              >
+                <span
+                  class="text-muted"
+                >
+                  -
+                </span>
+              </span>
+            </div>
+          </div>
+        </div>
+      </form>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Renderer:button-group:multiple clearable 1`] = `
+<div>
+  <div
+    class="a-Panel a-Panel--default a-Panel--form"
+  >
+    <div
+      class="a-Panel-heading"
+    >
+      <h3
+        class="a-Panel-title"
+      >
+        <span
+          class="a-TplField"
+        >
+          The form
+        </span>
+      </h3>
+    </div>
+    <div
+      class="a-Panel-body"
+    >
+      <form
+        class="a-Form a-Form--normal"
+        novalidate=""
+      >
+        <div
+          class="a-Form-item a-Form-item--normal"
+        >
+          <label
+            class="a-Form-label"
+          >
+            <span>
+              多选
+            </span>
+          </label>
+          <div
+            class="a-ButtonGroupControl a-Form-control"
+          >
+            <div
+              class="a-ButtonGroup"
+            >
+              <button
+                class="a-Button a-Button--primary is-active"
+                type="button"
+              >
+                <span>
+                  Option A
+                </span>
+              </button>
+              <button
+                class="a-Button a-Button--primary is-active"
+                type="button"
+              >
+                <span>
+                  Option B
+                </span>
+              </button>
+            </div>
+          </div>
+        </div>
+        <div
+          class="a-Form-item a-Form-item--normal"
+        >
+          <label
+            class="a-Form-label"
+          >
+            <span>
+              当前值
+            </span>
+          </label>
+          <div
+            class="form-control-static"
+          >
+            <div
+              class="a-Form-control"
+            >
+              <span
+                class="a-TplField"
+              >
+                a,b
+              </span>
+            </div>
+          </div>
+        </div>
+      </form>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Renderer:button-group:multiple clearable 2`] = `
+<div>
+  <div
+    class="a-Panel a-Panel--default a-Panel--form"
+  >
+    <div
+      class="a-Panel-heading"
+    >
+      <h3
+        class="a-Panel-title"
+      >
+        <span
+          class="a-TplField"
+        >
+          The form
+        </span>
+      </h3>
+    </div>
+    <div
+      class="a-Panel-body"
+    >
+      <form
+        class="a-Form a-Form--normal"
+        novalidate=""
+      >
+        <div
+          class="a-Form-item a-Form-item--normal"
+        >
+          <label
+            class="a-Form-label"
+          >
+            <span>
+              多选
+            </span>
+          </label>
+          <div
+            class="a-ButtonGroupControl a-Form-control"
+          >
+            <div
+              class="a-ButtonGroup"
+            >
+              <button
+                class="a-Button a-Button--primary is-active"
+                type="button"
+              >
+                <span>
+                  Option A
+                </span>
+              </button>
+              <button
+                class="a-Button a-Button--default"
+                type="button"
+              >
+                <span>
+                  Option B
+                </span>
+              </button>
+            </div>
+          </div>
+        </div>
+        <div
+          class="a-Form-item a-Form-item--normal"
+        >
+          <label
+            class="a-Form-label"
+          >
+            <span>
+              当前值
+            </span>
+          </label>
+          <div
+            class="form-control-static"
+          >
+            <div
+              class="a-Form-control"
+            >
+              <span
+                class="a-TplField"
+              >
+                a
+              </span>
+            </div>
+          </div>
+        </div>
+      </form>
+    </div>
+  </div>
+</div>
+`;
diff --git a/__tests__/renderers/Form/__snapshots__/buttonToolBar.test.tsx.snap b/__tests__/renderers/Form/__snapshots__/buttonToolBar.test.tsx.snap
new file mode 100644
index 00000000..812b2175
--- /dev/null
+++ b/__tests__/renderers/Form/__snapshots__/buttonToolBar.test.tsx.snap
@@ -0,0 +1,195 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Renderer:button-toolbar 1`] = `
+<div>
+  <div
+    class="a-Panel a-Panel--default a-Panel--form"
+  >
+    <div
+      class="a-Panel-heading"
+    >
+      <h3
+        class="a-Panel-title"
+      >
+        <span
+          class="a-TplField"
+        >
+          The form
+        </span>
+      </h3>
+    </div>
+    <div
+      class="a-Panel-body"
+    >
+      <form
+        class="a-Form a-Form--normal"
+        novalidate=""
+      >
+        <div
+          class="a-Form-item a-Form-item--normal"
+        >
+          <div
+            class="a-ButtonToolbar a-Form-control"
+          >
+            <button
+              class="a-Button a-Button--default"
+              type="button"
+            >
+              <span>
+                OpenDialog
+              </span>
+            </button>
+            <button
+              class="a-Button a-Button--default"
+              type="submit"
+            >
+              <span>
+                Submit
+              </span>
+            </button>
+            <button
+              class="a-Button a-Button--default"
+              type="reset"
+            >
+              <span>
+                Reset
+              </span>
+            </button>
+          </div>
+        </div>
+      </form>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Renderer:button-toolbar 2`] = `
+<div>
+  <div
+    class="a-Panel a-Panel--default a-Panel--form"
+  >
+    <div
+      class="a-Panel-heading"
+    >
+      <h3
+        class="a-Panel-title"
+      >
+        <span
+          class="a-TplField"
+        >
+          The form
+        </span>
+      </h3>
+    </div>
+    <div
+      class="a-Panel-body"
+    >
+      <form
+        class="a-Form a-Form--normal"
+        novalidate=""
+      >
+        <div
+          class="a-Form-item a-Form-item--normal"
+        >
+          <div
+            class="a-ButtonToolbar a-Form-control"
+          >
+            <button
+              class="a-Button a-Button--default"
+              type="button"
+            >
+              <span>
+                OpenDialog
+              </span>
+            </button>
+            <button
+              class="a-Button a-Button--default"
+              type="submit"
+            >
+              <span>
+                Submit
+              </span>
+            </button>
+            <button
+              class="a-Button a-Button--default"
+              type="reset"
+            >
+              <span>
+                Reset
+              </span>
+            </button>
+          </div>
+        </div>
+      </form>
+    </div>
+  </div>
+  <div
+    class="amis-dialog-widget a-Modal a-Modal--1th"
+    role="dialog"
+  >
+    <div
+      class="a-Modal-overlay in"
+    />
+    <div
+      class="a-Modal-content in"
+    >
+      <div
+        class="a-Modal-header"
+      >
+        <a
+          class="a-Modal-close"
+          data-tooltip="关闭弹窗"
+        >
+          <svg
+            class="icon"
+            p-id="1463"
+            version="1.1"
+            viewBox="0 0 1024 1024"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M967.81435 106.836237 917.16274 56.18565 512 461.34839 106.836237 56.18565 56.184627 106.836237 461.34839 512 56.184627 917.163763 106.836237 967.815373 512 562.65161 917.16274 967.815373 967.81435 917.163763 562.650587 512Z"
+              data-spm-anchor-id="a313x.7781069.0.i0"
+              p-id="1464"
+            />
+          </svg>
+        </a>
+        <div
+          class="a-Modal-title"
+        >
+          提示
+        </div>
+      </div>
+      <div
+        class="a-Modal-body"
+      >
+        <span
+          class="a-TplField"
+        >
+          对，你刚点击了！
+        </span>
+      </div>
+      <div
+        class="a-Modal-footer"
+      >
+        <button
+          class="a-Button a-Button--default"
+          type="button"
+        >
+          <span>
+            取消
+          </span>
+        </button>
+        <button
+          class="a-Button a-Button--primary"
+          type="button"
+        >
+          <span>
+            确认
+          </span>
+        </button>
+      </div>
+    </div>
+  </div>
+</div>
+`;
diff --git a/__tests__/renderers/Form/__snapshots__/checkbox.test.tsx.snap b/__tests__/renderers/Form/__snapshots__/checkbox.test.tsx.snap
new file mode 100644
index 00000000..eac1a7e8
--- /dev/null
+++ b/__tests__/renderers/Form/__snapshots__/checkbox.test.tsx.snap
@@ -0,0 +1,62 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Renderer:checkbox 1`] = `
+<div>
+  <div
+    class="a-Panel a-Panel--default a-Panel--form"
+  >
+    <div
+      class="a-Panel-heading"
+    >
+      <h3
+        class="a-Panel-title"
+      >
+        <span
+          class="a-TplField"
+        >
+          The form
+        </span>
+      </h3>
+    </div>
+    <div
+      class="a-Panel-body"
+    >
+      <form
+        class="a-Form a-Form--normal"
+        novalidate=""
+      >
+        <div
+          class="a-Form-item a-Form-item--normal"
+        >
+          <label
+            class="a-Form-label"
+          >
+            <span>
+              Checkbox
+            </span>
+          </label>
+          <div
+            class="a-CheckboxControl a-Form-control"
+          >
+            <label
+              class="a-Checkbox a-Checkbox--checkbox a-Checkbox--full"
+            >
+              <input
+                type="checkbox"
+              />
+              <i />
+              <span>
+                <span
+                  class="a-TplField"
+                >
+                  选项说明
+                </span>
+              </span>
+            </label>
+          </div>
+        </div>
+      </form>
+    </div>
+  </div>
+</div>
+`;
diff --git a/__tests__/renderers/Form/__snapshots__/checkboxes.test.tsx.snap b/__tests__/renderers/Form/__snapshots__/checkboxes.test.tsx.snap
new file mode 100644
index 00000000..50328408
--- /dev/null
+++ b/__tests__/renderers/Form/__snapshots__/checkboxes.test.tsx.snap
@@ -0,0 +1,237 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Renderer:checkboxes 1`] = `
+<div>
+  <div
+    class="a-Panel a-Panel--default a-Panel--form"
+  >
+    <div
+      class="a-Panel-heading"
+    >
+      <h3
+        class="a-Panel-title"
+      >
+        <span
+          class="a-TplField"
+        >
+          The form
+        </span>
+      </h3>
+    </div>
+    <div
+      class="a-Panel-body"
+    >
+      <form
+        class="a-Form a-Form--normal"
+        novalidate=""
+      >
+        <div
+          class="a-Form-item a-Form-item--normal"
+        >
+          <label
+            class="a-Form-label"
+          >
+            <span>
+              Checkboxes
+            </span>
+          </label>
+          <div
+            class="a-CheckboxesControl a-Form-control"
+          >
+            <label
+              class="a-Checkbox a-Checkbox--checkbox a-Checkbox--full"
+            >
+              <input
+                type="checkbox"
+              />
+              <i />
+              <span>
+                Option A
+              </span>
+            </label>
+            <label
+              class="a-Checkbox a-Checkbox--checkbox a-Checkbox--full"
+            >
+              <input
+                type="checkbox"
+              />
+              <i />
+              <span>
+                Option B
+              </span>
+            </label>
+            <label
+              class="a-Checkbox a-Checkbox--checkbox a-Checkbox--full"
+            >
+              <input
+                type="checkbox"
+              />
+              <i />
+              <span>
+                Option C
+              </span>
+            </label>
+            <label
+              class="a-Checkbox a-Checkbox--checkbox a-Checkbox--full"
+            >
+              <input
+                type="checkbox"
+              />
+              <i />
+              <span>
+                Option D
+              </span>
+            </label>
+          </div>
+        </div>
+        <div
+          class="a-Form-item a-Form-item--normal"
+        >
+          <label
+            class="a-Form-label"
+          >
+            <span>
+              当前值
+            </span>
+          </label>
+          <div
+            class="form-control-static"
+          >
+            <div
+              class="a-Form-control"
+            >
+              <span
+                class="a-TplField"
+              >
+                <span
+                  class="text-muted"
+                >
+                  -
+                </span>
+              </span>
+            </div>
+          </div>
+        </div>
+      </form>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Renderer:checkboxes 2`] = `
+<div>
+  <div
+    class="a-Panel a-Panel--default a-Panel--form"
+  >
+    <div
+      class="a-Panel-heading"
+    >
+      <h3
+        class="a-Panel-title"
+      >
+        <span
+          class="a-TplField"
+        >
+          The form
+        </span>
+      </h3>
+    </div>
+    <div
+      class="a-Panel-body"
+    >
+      <form
+        class="a-Form a-Form--normal"
+        novalidate=""
+      >
+        <div
+          class="a-Form-item a-Form-item--normal"
+        >
+          <label
+            class="a-Form-label"
+          >
+            <span>
+              Checkboxes
+            </span>
+          </label>
+          <div
+            class="a-CheckboxesControl a-Form-control"
+          >
+            <label
+              class="a-Checkbox a-Checkbox--checkbox a-Checkbox--full"
+            >
+              <input
+                type="checkbox"
+              />
+              <i />
+              <span>
+                Option A
+              </span>
+            </label>
+            <label
+              class="a-Checkbox a-Checkbox--checkbox a-Checkbox--full"
+            >
+              <input
+                type="checkbox"
+              />
+              <i />
+              <span>
+                Option B
+              </span>
+            </label>
+            <label
+              class="a-Checkbox a-Checkbox--checkbox a-Checkbox--full"
+            >
+              <input
+                type="checkbox"
+              />
+              <i />
+              <span>
+                Option C
+              </span>
+            </label>
+            <label
+              class="a-Checkbox a-Checkbox--checkbox a-Checkbox--full"
+            >
+              <input
+                type="checkbox"
+              />
+              <i />
+              <span>
+                Option D
+              </span>
+            </label>
+          </div>
+        </div>
+        <div
+          class="a-Form-item a-Form-item--normal"
+        >
+          <label
+            class="a-Form-label"
+          >
+            <span>
+              当前值
+            </span>
+          </label>
+          <div
+            class="form-control-static"
+          >
+            <div
+              class="a-Form-control"
+            >
+              <span
+                class="a-TplField"
+              >
+                <span
+                  class="text-muted"
+                >
+                  -
+                </span>
+              </span>
+            </div>
+          </div>
+        </div>
+      </form>
+    </div>
+  </div>
+</div>
+`;
diff --git a/__tests__/renderers/Form/__snapshots__/grid.test.tsx.snap b/__tests__/renderers/Form/__snapshots__/grid.test.tsx.snap
new file mode 100644
index 00000000..f422817e
--- /dev/null
+++ b/__tests__/renderers/Form/__snapshots__/grid.test.tsx.snap
@@ -0,0 +1,76 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Renderer:hbox 1`] = `
+<div>
+  <div
+    class="a-Panel a-Panel--default a-Panel--form"
+  >
+    <div
+      class="a-Panel-heading"
+    >
+      <h3
+        class="a-Panel-title"
+      >
+        <span
+          class="a-TplField"
+        >
+          The form
+        </span>
+      </h3>
+    </div>
+    <div
+      class="a-Panel-body"
+    >
+      <form
+        class="a-Form a-Form--normal"
+        novalidate=""
+      >
+        <div
+          class="a-Form-item a-Form-item--normal"
+        >
+          <div
+            class="a-Grid a-Form-control"
+          >
+            <div
+              class="a-Grid-col--md3 bg-white"
+            >
+              <div
+                class="a-Grid-form a-Form--normal"
+              >
+                <div
+                  class="a-Form-item a-Form-item--normal"
+                >
+                  <div
+                    class="a-Form-control a-TextControl"
+                  >
+                    <div
+                      class="a-TextControl-input"
+                    >
+                      <input
+                        autocomplete="off"
+                        name="text"
+                        placeholder="Text"
+                        type="text"
+                        value=""
+                      />
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div
+              class="a-Grid-col--md9"
+            >
+              <span
+                class="a-TplField"
+              >
+                其他渲染器类型
+              </span>
+            </div>
+          </div>
+        </div>
+      </form>
+    </div>
+  </div>
+</div>
+`;
diff --git a/__tests__/renderers/Form/__snapshots__/group.test.tsx.snap b/__tests__/renderers/Form/__snapshots__/group.test.tsx.snap
new file mode 100644
index 00000000..59cb0454
--- /dev/null
+++ b/__tests__/renderers/Form/__snapshots__/group.test.tsx.snap
@@ -0,0 +1,224 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Renderer:group 1`] = `
+<div>
+  <div
+    class="a-Panel a-Panel--default a-Panel--form"
+  >
+    <div
+      class="a-Panel-heading"
+    >
+      <h3
+        class="a-Panel-title"
+      >
+        <span
+          class="a-TplField"
+        >
+          The form
+        </span>
+      </h3>
+    </div>
+    <div
+      class="a-Panel-body"
+    >
+      <form
+        class="a-Form a-Form--normal"
+        novalidate=""
+      >
+        <div
+          class="a-Form-group a-Form-group--hor a-Form-group--horizontal bg-white"
+        >
+          <div
+            class="a-Form-groupColumn"
+          >
+            <div
+              class="a-Form-item a-Form-item--horizontal"
+            >
+              <label
+                class="a-Form-label a-Form-itemColumn--0"
+              >
+                <span>
+                  Label
+                </span>
+              </label>
+              <div
+                class="a-Form-value a-Form-itemColumn--10"
+              >
+                <div
+                  class="a-Form-control a-TextControl"
+                >
+                  <div
+                    class="a-TextControl-input"
+                  >
+                    <input
+                      autocomplete="off"
+                      name="test1"
+                      placeholder="Placeholder"
+                      type="text"
+                      value=""
+                    />
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div
+            class="a-Form-groupColumn"
+          >
+            <div
+              class="a-Form-item a-Form-item--horizontal"
+            >
+              <label
+                class="a-Form-label a-Form-itemColumn--0"
+              >
+                <span>
+                  Label
+                </span>
+              </label>
+              <div
+                class="a-Form-value a-Form-itemColumn--10"
+              >
+                <div
+                  class="a-Form-control a-TextControl"
+                >
+                  <div
+                    class="a-TextControl-input"
+                  >
+                    <input
+                      autocomplete="off"
+                      name="test2"
+                      placeholder="Placeholder"
+                      type="text"
+                      value=""
+                    />
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div
+          class="a-Form-group a-Form-group--hor a-Form-group--inline bg-white"
+        >
+          <div
+            class="a-Form-item a-Form-item--inline"
+          >
+            <label
+              class="a-Form-label"
+            >
+              <span>
+                Label
+              </span>
+            </label>
+            <div
+              class="a-Form-value"
+            >
+              <div
+                class="a-Form-control a-TextControl"
+              >
+                <div
+                  class="a-TextControl-input"
+                >
+                  <input
+                    autocomplete="off"
+                    name="test1"
+                    placeholder="Placeholder"
+                    type="text"
+                    value=""
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
+          <div
+            class="a-Form-item a-Form-item--inline"
+          >
+            <label
+              class="a-Form-label"
+            >
+              <span>
+                Label
+              </span>
+            </label>
+            <div
+              class="a-Form-value"
+            >
+              <div
+                class="a-Form-control a-TextControl"
+              >
+                <div
+                  class="a-TextControl-input"
+                >
+                  <input
+                    autocomplete="off"
+                    name="test2"
+                    placeholder="Placeholder"
+                    type="text"
+                    value=""
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div
+          class="a-Form-group a-Form-group--ver a-Form-group--normal"
+        >
+          <div
+            class="a-Form-item a-Form-item--normal"
+          >
+            <label
+              class="a-Form-label"
+            >
+              <span>
+                Label
+              </span>
+            </label>
+            <div
+              class="a-Form-control a-TextControl"
+            >
+              <div
+                class="a-TextControl-input"
+              >
+                <input
+                  autocomplete="off"
+                  name="test1"
+                  placeholder="Placeholder"
+                  type="text"
+                  value=""
+                />
+              </div>
+            </div>
+          </div>
+          <div
+            class="a-Form-item a-Form-item--normal"
+          >
+            <label
+              class="a-Form-label"
+            >
+              <span>
+                Label
+              </span>
+            </label>
+            <div
+              class="a-Form-control a-TextControl"
+            >
+              <div
+                class="a-TextControl-input"
+              >
+                <input
+                  autocomplete="off"
+                  name="test2"
+                  placeholder="Placeholder"
+                  type="text"
+                  value=""
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      </form>
+    </div>
+  </div>
+</div>
+`;
diff --git a/__tests__/renderers/Form/__snapshots__/hbox.test.tsx.snap b/__tests__/renderers/Form/__snapshots__/hbox.test.tsx.snap
new file mode 100644
index 00000000..ae267380
--- /dev/null
+++ b/__tests__/renderers/Form/__snapshots__/hbox.test.tsx.snap
@@ -0,0 +1,76 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Renderer:hbox 1`] = `
+<div>
+  <div
+    class="a-Panel a-Panel--default a-Panel--form"
+  >
+    <div
+      class="a-Panel-heading"
+    >
+      <h3
+        class="a-Panel-title"
+      >
+        <span
+          class="a-TplField"
+        >
+          The form
+        </span>
+      </h3>
+    </div>
+    <div
+      class="a-Panel-body"
+    >
+      <form
+        class="a-Form a-Form--normal"
+        novalidate=""
+      >
+        <div
+          class="a-Form-item a-Form-item--normal"
+        >
+          <div
+            class="a-FormHbox a-Form-control"
+          >
+            <div
+              class="a-Hbox"
+            >
+              <div
+                class="a-Hbox-col a-Form--normal w-sm"
+              >
+                <div
+                  class="a-Form-item a-Form-item--normal"
+                >
+                  <div
+                    class="a-Form-control a-TextControl"
+                  >
+                    <div
+                      class="a-TextControl-input"
+                    >
+                      <input
+                        autocomplete="off"
+                        name="text"
+                        placeholder="Text"
+                        type="text"
+                        value=""
+                      />
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div
+                class="a-Hbox-col a-Form--normal"
+              >
+                <span
+                  class="a-TplField"
+                >
+                  其他类型的渲染器
+                </span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </form>
+    </div>
+  </div>
+</div>
+`;
diff --git a/__tests__/renderers/Form/__snapshots__/index.test.tsx.snap b/__tests__/renderers/Form/__snapshots__/index.test.tsx.snap
index 5de43e60..9adcc528 100644
--- a/__tests__/renderers/Form/__snapshots__/index.test.tsx.snap
+++ b/__tests__/renderers/Form/__snapshots__/index.test.tsx.snap
@@ -220,17 +220,18 @@ exports[`Renderer:Form sendOn:true 1`] = `
             </span>
           </label>
           <div
-            class="a-Form-control a-TextControl"
+            class="a-Form-control a-TextControl is-disabled"
           >
             <div
               class="a-TextControl-input"
             >
               <input
                 autocomplete="off"
+                disabled=""
                 name="a"
                 placeholder=""
                 type="text"
-                value="1"
+                value=""
               />
             </div>
           </div>
@@ -246,17 +247,18 @@ exports[`Renderer:Form sendOn:true 1`] = `
             </span>
           </label>
           <div
-            class="a-Form-control a-TextControl"
+            class="a-Form-control a-TextControl is-disabled"
           >
             <div
               class="a-TextControl-input"
             >
               <input
                 autocomplete="off"
+                disabled=""
                 name="b"
                 placeholder=""
                 type="text"
-                value="2"
+                value=""
               />
             </div>
           </div>
@@ -268,7 +270,8 @@ exports[`Renderer:Form sendOn:true 1`] = `
         class="a-Panel-btnToolbar a-Panel-footer"
       >
         <button
-          class="a-Button a-Button--primary"
+          class="a-Button a-Button--primary is-disabled"
+          disabled=""
           type="submit"
         >
           <span>
diff --git a/__tests__/renderers/Form/__snapshots__/list.test.tsx.snap b/__tests__/renderers/Form/__snapshots__/list.test.tsx.snap
new file mode 100644
index 00000000..62f1dc4a
--- /dev/null
+++ b/__tests__/renderers/Form/__snapshots__/list.test.tsx.snap
@@ -0,0 +1,270 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Renderer:list 1`] = `
+<div>
+  <div
+    class="a-Panel a-Panel--default a-Panel--form"
+  >
+    <div
+      class="a-Panel-heading"
+    >
+      <h3
+        class="a-Panel-title"
+      >
+        <span
+          class="a-TplField"
+        >
+          The form
+        </span>
+      </h3>
+    </div>
+    <div
+      class="a-Panel-body"
+    >
+      <form
+        class="a-Form a-Form--normal"
+        novalidate=""
+      >
+        <div
+          class="a-Form-item a-Form-item--normal"
+        >
+          <label
+            class="a-Form-label"
+          >
+            <span>
+              单选
+            </span>
+          </label>
+          <div
+            class="a-ListControl a-Form-control"
+          >
+            <div
+              class="a-ListControl-items"
+            >
+              <div
+                class="a-ListControl-item"
+              >
+                <div
+                  class="a-ListControl-itemLabel"
+                >
+                  Option A
+                </div>
+              </div>
+              <div
+                class="a-ListControl-item"
+              >
+                <div
+                  class="a-ListControl-itemLabel"
+                >
+                  Option B
+                </div>
+              </div>
+              <div
+                class="a-ListControl-item"
+              >
+                <div
+                  class="a-ListControl-itemImage"
+                >
+                  <img
+                    alt="OptionC"
+                    src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3893101144,2877209892&fm=23&gp=0.jpg"
+                  />
+                </div>
+                <div
+                  class="a-ListControl-itemLabel"
+                >
+                  OptionC
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </form>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Renderer:list:multiple clearable 1`] = `
+<div>
+  <div
+    class="a-Panel a-Panel--default a-Panel--form"
+  >
+    <div
+      class="a-Panel-heading"
+    >
+      <h3
+        class="a-Panel-title"
+      >
+        <span
+          class="a-TplField"
+        >
+          The form
+        </span>
+      </h3>
+    </div>
+    <div
+      class="a-Panel-body"
+    >
+      <form
+        class="a-Form a-Form--normal"
+        novalidate=""
+      >
+        <div
+          class="a-Form-item a-Form-item--normal"
+        >
+          <label
+            class="a-Form-label"
+          >
+            <span>
+              多选
+            </span>
+          </label>
+          <div
+            class="a-ListControl a-Form-control"
+          >
+            <div
+              class="a-ListControl-items"
+            >
+              <div
+                class="a-ListControl-item is-active"
+              >
+                <div
+                  class="a-ListControl-itemLabel"
+                >
+                  Option A
+                </div>
+              </div>
+              <div
+                class="a-ListControl-item is-active"
+              >
+                <div
+                  class="a-ListControl-itemLabel"
+                >
+                  Option B
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div
+          class="a-Form-item a-Form-item--normal"
+        >
+          <label
+            class="a-Form-label"
+          >
+            <span>
+              当前值
+            </span>
+          </label>
+          <div
+            class="form-control-static"
+          >
+            <div
+              class="a-Form-control"
+            >
+              <span
+                class="a-TplField"
+              >
+                a,b
+              </span>
+            </div>
+          </div>
+        </div>
+      </form>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Renderer:list:multiple clearable 2`] = `
+<div>
+  <div
+    class="a-Panel a-Panel--default a-Panel--form"
+  >
+    <div
+      class="a-Panel-heading"
+    >
+      <h3
+        class="a-Panel-title"
+      >
+        <span
+          class="a-TplField"
+        >
+          The form
+        </span>
+      </h3>
+    </div>
+    <div
+      class="a-Panel-body"
+    >
+      <form
+        class="a-Form a-Form--normal"
+        novalidate=""
+      >
+        <div
+          class="a-Form-item a-Form-item--normal"
+        >
+          <label
+            class="a-Form-label"
+          >
+            <span>
+              多选
+            </span>
+          </label>
+          <div
+            class="a-ListControl a-Form-control"
+          >
+            <div
+              class="a-ListControl-items"
+            >
+              <div
+                class="a-ListControl-item is-active"
+              >
+                <div
+                  class="a-ListControl-itemLabel"
+                >
+                  Option A
+                </div>
+              </div>
+              <div
+                class="a-ListControl-item"
+              >
+                <div
+                  class="a-ListControl-itemLabel"
+                >
+                  Option B
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div
+          class="a-Form-item a-Form-item--normal"
+        >
+          <label
+            class="a-Form-label"
+          >
+            <span>
+              当前值
+            </span>
+          </label>
+          <div
+            class="form-control-static"
+          >
+            <div
+              class="a-Form-control"
+            >
+              <span
+                class="a-TplField"
+              >
+                a
+              </span>
+            </div>
+          </div>
+        </div>
+      </form>
+    </div>
+  </div>
+</div>
+`;
diff --git a/__tests__/renderers/Form/__snapshots__/panel.test.tsx.snap b/__tests__/renderers/Form/__snapshots__/panel.test.tsx.snap
new file mode 100644
index 00000000..448e171b
--- /dev/null
+++ b/__tests__/renderers/Form/__snapshots__/panel.test.tsx.snap
@@ -0,0 +1,154 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Renderer:panel 1`] = `
+<div>
+  <div
+    class="a-Panel a-Panel--default a-Panel--form"
+  >
+    <div
+      class="a-Panel-heading"
+    >
+      <h3
+        class="a-Panel-title"
+      >
+        <span
+          class="a-TplField"
+        >
+          The form
+        </span>
+      </h3>
+    </div>
+    <div
+      class="a-Panel-body"
+    >
+      <form
+        class="a-Form a-Form--normal"
+        novalidate=""
+      >
+        <div
+          class="a-Form-item a-Form-item--normal"
+        >
+          <div
+            class="a-FormHbox a-Form-control"
+          >
+            <div
+              class="a-Hbox"
+            >
+              <div
+                class="a-Hbox-col a-Form--normal"
+              >
+                <div
+                  class="a-Panel a-Panel--default"
+                >
+                  <div
+                    class="a-Panel-heading"
+                  >
+                    <h3
+                      class="a-Panel-title"
+                    >
+                      <span
+                        class="a-TplField"
+                      >
+                        bla bla
+                      </span>
+                    </h3>
+                  </div>
+                  <div
+                    class="bg-white"
+                  >
+                    <span
+                      class="a-PlainField"
+                    >
+                      <span
+                        class="text-muted"
+                      >
+                        Text
+                      </span>
+                    </span>
+                  </div>
+                  <div>
+                    <div
+                      class="bg-black"
+                    >
+                      <span
+                        class="a-TplField"
+                      >
+                        <p>
+                          footer 内容
+                        </p>
+                      </span>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div
+                class="a-Hbox-col a-Form--normal"
+              >
+                <div
+                  class="a-Panel a-Panel--default"
+                >
+                  <div
+                    class="a-Panel-heading"
+                  >
+                    <h3
+                      class="a-Panel-title"
+                    >
+                      <span
+                        class="a-TplField"
+                      >
+                        bla bla
+                      </span>
+                    </h3>
+                  </div>
+                  <div
+                    class="a-Form--normal"
+                  >
+                    <div
+                      class="a-Form-item a-Form-item--normal"
+                    >
+                      <div
+                        class="a-Form-control a-TextControl"
+                      >
+                        <div
+                          class="a-TextControl-input"
+                        >
+                          <input
+                            autocomplete="off"
+                            name="text"
+                            placeholder="Text 1"
+                            type="text"
+                            value=""
+                          />
+                        </div>
+                      </div>
+                    </div>
+                    <div
+                      class="a-Form-item a-Form-item--normal"
+                    >
+                      <div
+                        class="a-Form-control a-TextControl"
+                      >
+                        <div
+                          class="a-TextControl-input"
+                        >
+                          <input
+                            autocomplete="off"
+                            name="text2"
+                            placeholder="Text 2"
+                            type="text"
+                            value=""
+                          />
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </form>
+    </div>
+  </div>
+</div>
+`;
diff --git a/__tests__/renderers/Form/__snapshots__/radios.test.tsx.snap b/__tests__/renderers/Form/__snapshots__/radios.test.tsx.snap
new file mode 100644
index 00000000..aaf4423a
--- /dev/null
+++ b/__tests__/renderers/Form/__snapshots__/radios.test.tsx.snap
@@ -0,0 +1,237 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Renderer:radios 1`] = `
+<div>
+  <div
+    class="a-Panel a-Panel--default a-Panel--form"
+  >
+    <div
+      class="a-Panel-heading"
+    >
+      <h3
+        class="a-Panel-title"
+      >
+        <span
+          class="a-TplField"
+        >
+          The form
+        </span>
+      </h3>
+    </div>
+    <div
+      class="a-Panel-body"
+    >
+      <form
+        class="a-Form a-Form--normal"
+        novalidate=""
+      >
+        <div
+          class="a-Form-item a-Form-item--normal"
+        >
+          <label
+            class="a-Form-label"
+          >
+            <span>
+              radios
+            </span>
+          </label>
+          <div
+            class="a-RadiosControl a-Form-control"
+          >
+            <label
+              class="a-Checkbox a-Checkbox--radio a-Checkbox--full"
+            >
+              <input
+                type="radio"
+              />
+              <i />
+              <span>
+                Option A
+              </span>
+            </label>
+            <label
+              class="a-Checkbox a-Checkbox--radio a-Checkbox--full"
+            >
+              <input
+                type="radio"
+              />
+              <i />
+              <span>
+                Option B
+              </span>
+            </label>
+            <label
+              class="a-Checkbox a-Checkbox--radio a-Checkbox--full"
+            >
+              <input
+                type="radio"
+              />
+              <i />
+              <span>
+                Option C
+              </span>
+            </label>
+            <label
+              class="a-Checkbox a-Checkbox--radio a-Checkbox--full"
+            >
+              <input
+                type="radio"
+              />
+              <i />
+              <span>
+                Option D
+              </span>
+            </label>
+          </div>
+        </div>
+        <div
+          class="a-Form-item a-Form-item--normal"
+        >
+          <label
+            class="a-Form-label"
+          >
+            <span>
+              当前值
+            </span>
+          </label>
+          <div
+            class="form-control-static"
+          >
+            <div
+              class="a-Form-control"
+            >
+              <span
+                class="a-TplField"
+              >
+                <span
+                  class="text-muted"
+                >
+                  -
+                </span>
+              </span>
+            </div>
+          </div>
+        </div>
+      </form>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Renderer:radios 2`] = `
+<div>
+  <div
+    class="a-Panel a-Panel--default a-Panel--form"
+  >
+    <div
+      class="a-Panel-heading"
+    >
+      <h3
+        class="a-Panel-title"
+      >
+        <span
+          class="a-TplField"
+        >
+          The form
+        </span>
+      </h3>
+    </div>
+    <div
+      class="a-Panel-body"
+    >
+      <form
+        class="a-Form a-Form--normal"
+        novalidate=""
+      >
+        <div
+          class="a-Form-item a-Form-item--normal"
+        >
+          <label
+            class="a-Form-label"
+          >
+            <span>
+              radios
+            </span>
+          </label>
+          <div
+            class="a-RadiosControl a-Form-control"
+          >
+            <label
+              class="a-Checkbox a-Checkbox--radio a-Checkbox--full"
+            >
+              <input
+                type="radio"
+              />
+              <i />
+              <span>
+                Option A
+              </span>
+            </label>
+            <label
+              class="a-Checkbox a-Checkbox--radio a-Checkbox--full"
+            >
+              <input
+                type="radio"
+              />
+              <i />
+              <span>
+                Option B
+              </span>
+            </label>
+            <label
+              class="a-Checkbox a-Checkbox--radio a-Checkbox--full"
+            >
+              <input
+                type="radio"
+              />
+              <i />
+              <span>
+                Option C
+              </span>
+            </label>
+            <label
+              class="a-Checkbox a-Checkbox--radio a-Checkbox--full"
+            >
+              <input
+                type="radio"
+              />
+              <i />
+              <span>
+                Option D
+              </span>
+            </label>
+          </div>
+        </div>
+        <div
+          class="a-Form-item a-Form-item--normal"
+        >
+          <label
+            class="a-Form-label"
+          >
+            <span>
+              当前值
+            </span>
+          </label>
+          <div
+            class="form-control-static"
+          >
+            <div
+              class="a-Form-control"
+            >
+              <span
+                class="a-TplField"
+              >
+                <span
+                  class="text-muted"
+                >
+                  -
+                </span>
+              </span>
+            </div>
+          </div>
+        </div>
+      </form>
+    </div>
+  </div>
+</div>
+`;
diff --git a/__tests__/renderers/Form/__snapshots__/service.test.tsx.snap b/__tests__/renderers/Form/__snapshots__/service.test.tsx.snap
new file mode 100644
index 00000000..47863ec7
--- /dev/null
+++ b/__tests__/renderers/Form/__snapshots__/service.test.tsx.snap
@@ -0,0 +1,138 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Renderer:service 1`] = `
+<div>
+  <div
+    class="a-Panel a-Panel--default a-Panel--form"
+  >
+    <div
+      class="a-Panel-heading"
+    >
+      <h3
+        class="a-Panel-title"
+      >
+        <span
+          class="a-TplField"
+        >
+          The form
+        </span>
+      </h3>
+    </div>
+    <div
+      class="a-Panel-body"
+    >
+      <form
+        class="a-Form a-Form--normal"
+        novalidate=""
+      >
+        <div
+          class="a-Form-item a-Form-item--normal is-required"
+        >
+          <label
+            class="a-Form-label"
+          >
+            <span>
+              模板
+              <span
+                class="a-Form-star"
+              >
+                *
+              </span>
+            </span>
+          </label>
+          <div
+            class="a-SelectControl a-Form-control is-inline"
+          >
+            <div
+              aria-expanded="false"
+              aria-haspopup="listbox"
+              aria-labelledby="downshift-0-label"
+              class="a-Select"
+              role="combobox"
+              tabindex="0"
+            >
+              <div
+                class="a-Select-valueWrap"
+              >
+                <div
+                  class="a-Select-value"
+                >
+                  模板1
+                </div>
+              </div>
+              <span
+                class="a-Select-arrow"
+              />
+            </div>
+          </div>
+        </div>
+        <div
+          class="a-Service m-t"
+        >
+          <div
+            class="a-Form--normal"
+          >
+            <div
+              class="a-Form-item a-Form-item--normal is-required"
+            >
+              <label
+                class="a-Form-label"
+              >
+                <span>
+                  动态字段1
+                  <span
+                    class="a-Form-star"
+                  >
+                    *
+                  </span>
+                </span>
+              </label>
+              <div
+                class="a-Form-control a-TextControl"
+              >
+                <div
+                  class="a-TextControl-input"
+                >
+                  <input
+                    autocomplete="off"
+                    name="dy_1"
+                    placeholder=""
+                    type="text"
+                    value=""
+                  />
+                </div>
+              </div>
+            </div>
+            <div
+              class="a-Form-item a-Form-item--normal"
+            >
+              <label
+                class="a-Form-label"
+              >
+                <span>
+                  动态字段2
+                </span>
+              </label>
+              <div
+                class="a-Form-control a-TextControl"
+              >
+                <div
+                  class="a-TextControl-input"
+                >
+                  <input
+                    autocomplete="off"
+                    name="dy_2"
+                    placeholder=""
+                    type="text"
+                    value=""
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </form>
+    </div>
+  </div>
+</div>
+`;
diff --git a/__tests__/renderers/Form/__snapshots__/static.test.tsx.snap b/__tests__/renderers/Form/__snapshots__/static.test.tsx.snap
new file mode 100644
index 00000000..eb098237
--- /dev/null
+++ b/__tests__/renderers/Form/__snapshots__/static.test.tsx.snap
@@ -0,0 +1,103 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Renderer:static 1`] = `
+<div>
+  <div
+    class="a-Panel a-Panel--default a-Panel--form"
+  >
+    <div
+      class="a-Panel-heading"
+    >
+      <h3
+        class="a-Panel-title"
+      >
+        <span
+          class="a-TplField"
+        >
+          The form
+        </span>
+      </h3>
+    </div>
+    <div
+      class="a-Panel-body"
+    >
+      <form
+        class="a-Form a-Form--normal"
+        novalidate=""
+      >
+        <div
+          class="a-Form-item a-Form-item--normal bg-white"
+        >
+          <label
+            class="a-Form-label"
+          >
+            <span>
+              label
+            </span>
+          </label>
+          <div
+            class="form-control-static"
+          >
+            <div
+              class="a-Form-control is-inline"
+            >
+              <span
+                class="a-TplField"
+              >
+                static
+              </span>
+            </div>
+          </div>
+          <span
+            class="a-TplField a-Form-description"
+          >
+            static description
+          </span>
+        </div>
+        <div
+          class="a-Form-item a-Form-item--normal"
+        >
+          <div
+            class="form-control-static"
+          >
+            <div
+              class="a-Form-control"
+            >
+              <span
+                class="a-TplField"
+              >
+                <span
+                  class="text-muted"
+                >
+                  -
+                </span>
+              </span>
+            </div>
+          </div>
+        </div>
+        <div
+          class="a-Form-item a-Form-item--normal"
+        >
+          <div
+            class="form-control-static"
+          >
+            <div
+              class="a-Form-control"
+            >
+              <span
+                class="a-TplField"
+              >
+                <span
+                  class="text-muted"
+                >
+                  -
+                </span>
+              </span>
+            </div>
+          </div>
+        </div>
+      </form>
+    </div>
+  </div>
+</div>
+`;
diff --git a/__tests__/renderers/Form/__snapshots__/switch.test.tsx.snap b/__tests__/renderers/Form/__snapshots__/switch.test.tsx.snap
new file mode 100644
index 00000000..3da020ad
--- /dev/null
+++ b/__tests__/renderers/Form/__snapshots__/switch.test.tsx.snap
@@ -0,0 +1,61 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Renderer:switch 1`] = `
+<div>
+  <div
+    class="a-Panel a-Panel--default a-Panel--form"
+  >
+    <div
+      class="a-Panel-heading"
+    >
+      <h3
+        class="a-Panel-title"
+      >
+        <span
+          class="a-TplField"
+        >
+          The form
+        </span>
+      </h3>
+    </div>
+    <div
+      class="a-Panel-body"
+    >
+      <form
+        class="a-Form a-Form--normal"
+        novalidate=""
+      >
+        <div
+          class="a-Form-item a-Form-item--normal block"
+        >
+          <label
+            class="a-Form-label"
+          >
+            <span>
+              开关
+            </span>
+          </label>
+          <div
+            class="a-SwitchControl a-Form-control"
+          >
+            <label
+              class="a-Switch"
+            >
+              <input
+                checked=""
+                type="checkbox"
+              />
+              <i />
+            </label>
+            <span
+              class="a-Switch-option"
+            >
+              switch
+            </span>
+          </div>
+        </div>
+      </form>
+    </div>
+  </div>
+</div>
+`;
diff --git a/__tests__/renderers/Form/__snapshots__/tabs.test.tsx.snap b/__tests__/renderers/Form/__snapshots__/tabs.test.tsx.snap
new file mode 100644
index 00000000..cfe67bb1
--- /dev/null
+++ b/__tests__/renderers/Form/__snapshots__/tabs.test.tsx.snap
@@ -0,0 +1,154 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Renderer:tabs 1`] = `
+<div>
+  <div
+    class="a-Panel a-Panel--default a-Panel--form"
+  >
+    <div
+      class="a-Panel-heading"
+    >
+      <h3
+        class="a-Panel-title"
+      >
+        <span
+          class="a-TplField"
+        >
+          The form
+        </span>
+      </h3>
+    </div>
+    <div
+      class="a-Panel-body"
+    >
+      <form
+        class="a-Form a-Form--normal"
+        novalidate=""
+      >
+        <div
+          class="a-Tabs"
+          id="1560051753185"
+        >
+          <ul
+            class="a-Tabs-links nav"
+            role="tablist"
+          >
+            <li
+              class="a-Tabs-link active"
+              role="presentation"
+            >
+              <a
+                aria-controls="1560051753185-pane-0"
+                aria-selected="true"
+                href="#"
+                id="1560051753185-tab-0"
+                role="tab"
+              >
+                基本配置
+              </a>
+            </li>
+            <li
+              class="a-Tabs-link"
+              role="presentation"
+            >
+              <a
+                aria-controls="1560051753185-pane-1"
+                aria-selected="false"
+                href="#"
+                id="1560051753185-tab-1"
+                role="tab"
+                tabindex="-1"
+              >
+                其他配置
+              </a>
+            </li>
+          </ul>
+          <div
+            class="a-Tabs-content tab-content"
+          >
+            <div
+              aria-hidden="false"
+              aria-labelledby="1560051753185-tab-0"
+              class="fade tab-pane active in"
+              id="1560051753185-pane-0"
+              role="tabpanel"
+            >
+              <span
+                class="a-TplField"
+              >
+                <p>
+                  tab1 内容
+                </p>
+              </span>
+            </div>
+            <div
+              aria-hidden="true"
+              aria-labelledby="1560051753185-tab-1"
+              class="fade tab-pane"
+              id="1560051753185-pane-1"
+              role="tabpanel"
+            >
+              <div
+                class="a-Form--normal"
+              >
+                <div
+                  class="a-Form-item a-Form-item--normal"
+                >
+                  <label
+                    class="a-Form-label"
+                  >
+                    <span>
+                      文本3
+                    </span>
+                  </label>
+                  <div
+                    class="a-Form-control a-TextControl"
+                  >
+                    <div
+                      class="a-TextControl-input"
+                    >
+                      <input
+                        autocomplete="off"
+                        name="c"
+                        placeholder=""
+                        type="text"
+                        value=""
+                      />
+                    </div>
+                  </div>
+                </div>
+                <div
+                  class="a-Form-item a-Form-item--normal"
+                >
+                  <label
+                    class="a-Form-label"
+                  >
+                    <span>
+                      文本4
+                    </span>
+                  </label>
+                  <div
+                    class="a-Form-control a-TextControl"
+                  >
+                    <div
+                      class="a-TextControl-input"
+                    >
+                      <input
+                        autocomplete="off"
+                        name="d"
+                        placeholder=""
+                        type="text"
+                        value=""
+                      />
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </form>
+    </div>
+  </div>
+</div>
+`;
diff --git a/__tests__/renderers/Form/array.test.tsx b/__tests__/renderers/Form/array.test.tsx
new file mode 100644
index 00000000..dd41c121
--- /dev/null
+++ b/__tests__/renderers/Form/array.test.tsx
@@ -0,0 +1,46 @@
+import React = require('react');
+import {render, cleanup} from 'react-testing-library';
+import '../../../src/themes/default';
+import {
+    render as amisRender
+} from '../../../src/index';
+import {makeEnv} from '../../helper';
+import { clearStoresCache } from '../../../src/factory';
+
+afterEach(() => {
+    cleanup();
+    clearStoresCache();
+});
+
+test('Renderer:array', async () => {
+    const {
+        container
+    } = render(amisRender({
+        type: 'form',
+        title: 'The form',
+        controls: [
+            {
+                name: 'array',
+                label: '颜色集合',
+                type: 'array',
+                addable: true,
+                removeable: true,
+                minLength: 1,
+                maxLength: 4,
+                addButtonText: '新增',
+                draggable: true,
+                draggableTip: '可通过拖动每行中的【交换】按钮进行顺序调整',
+                value: [
+                    'red'
+                ],
+                inline: true,
+                items: {
+                    type: 'color'
+                }
+            }
+        ],
+        submitText: null,
+        actions: []
+    }, {}, makeEnv()));
+    expect(container).toMatchSnapshot();
+});
\ No newline at end of file
diff --git a/__tests__/renderers/Form/button.test.tsx b/__tests__/renderers/Form/button.test.tsx
new file mode 100644
index 00000000..1fe752b2
--- /dev/null
+++ b/__tests__/renderers/Form/button.test.tsx
@@ -0,0 +1,60 @@
+import React = require('react');
+import {render, cleanup, fireEvent} from 'react-testing-library';
+import '../../../src/themes/default';
+import {
+    render as amisRender
+} from '../../../src/index';
+import {makeEnv} from '../../helper';
+import { clearStoresCache } from '../../../src/factory';
+
+afterEach(() => {
+    cleanup();
+    clearStoresCache();
+});
+
+test('Renderer:button', async () => {
+    const {
+        getByText,
+        container
+    } = render(amisRender({
+        type: 'form',
+        title: 'The form',
+        controls: [
+            {
+                type: 'button',
+                name: 'test',
+                label: 'Text',
+                icon: 'fa fa-plus'
+            },
+            {
+                type: 'button',
+                label: 'OpenDialog',
+                actionType: 'dialog',
+                dialog: {
+                    confirmMode: false,
+                    title: '提示',
+                    body: '对，你刚点击了！'
+                }
+            },
+            {
+                type: 'submit',
+                level: 'primary',
+                label: 'Submit'
+            },
+            {
+                type: 'reset',
+                label: 'Reset',
+                level: 'danger',
+                size: 'sm',
+                className: 'r-2x'
+            }
+        ],
+        submitText: null,
+        actions: []
+    }, {}, makeEnv({
+        getModalContainer: () => container
+    })));
+    expect(container).toMatchSnapshot();
+    fireEvent.click(getByText(/OpenDialog/));
+    expect(container).toMatchSnapshot();
+});
\ No newline at end of file
diff --git a/__tests__/renderers/Form/buttonGroup.test.tsx b/__tests__/renderers/Form/buttonGroup.test.tsx
new file mode 100644
index 00000000..6e985830
--- /dev/null
+++ b/__tests__/renderers/Form/buttonGroup.test.tsx
@@ -0,0 +1,92 @@
+import React = require('react');
+import {render, cleanup, fireEvent} from 'react-testing-library';
+import '../../../src/themes/default';
+import {
+    render as amisRender
+} from '../../../src/index';
+import {makeEnv, wait} from '../../helper';
+import { clearStoresCache } from '../../../src/factory';
+
+afterEach(() => {
+    cleanup();
+    clearStoresCache();
+});
+
+test('Renderer:button-group', async () => {
+    const {
+        container
+    } = render(amisRender({
+        type: 'form',
+        title: 'The form',
+        controls: [
+            {
+                type: 'button-group',
+                name: 'select',
+                label: '单选',
+                options: [
+                    {
+                        label: 'Option A',
+                        value: 'a'
+                    },
+                    {
+                        label: 'Option B',
+                        value: 'b'
+                    }
+                ]
+            },
+            {
+                type: 'static',
+                name: 'select',
+                label: '当前值'
+            }
+        ],
+        submitText: null,
+        actions: []
+    }, {}, makeEnv()));
+    expect(container).toMatchSnapshot();
+});
+
+test('Renderer:button-group:multiple clearable', async () => {
+    const {
+        getByText,
+        container
+    } = render(amisRender({
+        type: 'form',
+        title: 'The form',
+        controls: [
+            {
+                type: 'button-group',
+                name: 'select',
+                label: '多选',
+                multiple: true,
+                clearable: true,
+                options: [
+                    {
+                        label: 'Option A',
+                        value: 'a'
+                    },
+                    {
+                        label: 'Option B',
+                        value: 'b'
+                    }
+                ]
+            },
+            {
+                type: 'static',
+                name: 'select',
+                label: '当前值'
+            }
+        ],
+        submitText: null,
+        actions: []
+    }, {}, makeEnv()));
+    await wait(100);
+    fireEvent.click(getByText(/Option A/));
+    await wait(100);
+    fireEvent.click(getByText(/Option B/));
+    expect(container).toMatchSnapshot();
+    await wait(100);
+    fireEvent.click(getByText(/Option B/));
+    await wait(100);
+    expect(container).toMatchSnapshot();
+});
\ No newline at end of file
diff --git a/__tests__/renderers/Form/buttonToolBar.test.tsx b/__tests__/renderers/Form/buttonToolBar.test.tsx
new file mode 100644
index 00000000..b7292b13
--- /dev/null
+++ b/__tests__/renderers/Form/buttonToolBar.test.tsx
@@ -0,0 +1,55 @@
+import React = require('react');
+import {render, cleanup, fireEvent} from 'react-testing-library';
+import '../../../src/themes/default';
+import {
+    render as amisRender
+} from '../../../src/index';
+import {makeEnv} from '../../helper';
+import { clearStoresCache } from '../../../src/factory';
+
+afterEach(() => {
+    cleanup();
+    clearStoresCache();
+});
+
+test('Renderer:button-toolbar', async () => {
+    const {
+        getByText,
+        container
+    } = render(amisRender({
+        type: 'form',
+        title: 'The form',
+        controls: [
+            {
+                type: 'button-toolbar',
+                buttons: [
+                    {
+                        type: 'button',
+                        label: 'OpenDialog',
+                        actionType: 'dialog',
+                        dialog: {
+                            confirmMode: false,
+                            title: '提示',
+                            body: '对，你刚点击了！'
+                        }
+                    },
+                    {
+                        type: 'submit',
+                        label: 'Submit'
+                    },
+                    {
+                        type: 'reset',
+                        label: 'Reset'
+                    }
+                ]
+            }
+        ],
+        submitText: null,
+        actions: []
+    }, {}, makeEnv({
+        getModalContainer: () => container
+    })));
+    expect(container).toMatchSnapshot();
+    fireEvent.click(getByText(/OpenDialog/));
+    expect(container).toMatchSnapshot();
+});
\ No newline at end of file
diff --git a/__tests__/renderers/Form/checkbox.test.tsx b/__tests__/renderers/Form/checkbox.test.tsx
new file mode 100644
index 00000000..3017096f
--- /dev/null
+++ b/__tests__/renderers/Form/checkbox.test.tsx
@@ -0,0 +1,35 @@
+import React = require('react');
+import {render, cleanup, fireEvent} from 'react-testing-library';
+import '../../../src/themes/default';
+import {
+    render as amisRender
+} from '../../../src/index';
+import {makeEnv} from '../../helper';
+import { clearStoresCache } from '../../../src/factory';
+
+afterEach(() => {
+    cleanup();
+    clearStoresCache();
+});
+
+test('Renderer:checkbox', async () => {
+    const {
+        container
+    } = render(amisRender({
+        type: 'form',
+        title: 'The form',
+        controls: [
+            {
+                name: 'checkbox',
+                type: 'checkbox',
+                label: 'Checkbox',
+                option: '选项说明',
+                trueValue: true,
+                falseValue: false
+            }
+        ],
+        submitText: null,
+        actions: []
+    }, {}, makeEnv()));
+    expect(container).toMatchSnapshot();
+});
\ No newline at end of file
diff --git a/__tests__/renderers/Form/checkboxes.test.tsx b/__tests__/renderers/Form/checkboxes.test.tsx
new file mode 100644
index 00000000..b874aca0
--- /dev/null
+++ b/__tests__/renderers/Form/checkboxes.test.tsx
@@ -0,0 +1,63 @@
+import React = require('react');
+import {render, cleanup, fireEvent} from 'react-testing-library';
+import '../../../src/themes/default';
+import {
+    render as amisRender
+} from '../../../src/index';
+import {makeEnv, wait} from '../../helper';
+import { clearStoresCache } from '../../../src/factory';
+
+afterEach(() => {
+    cleanup();
+    clearStoresCache();
+});
+
+test('Renderer:checkboxes', async () => {
+    const {
+        getByText,
+        container
+    } = render(amisRender({
+        type: 'form',
+        title: 'The form',
+        controls: [
+            {
+                name: 'checkboxes',
+                type: 'checkboxes',
+                label: 'Checkboxes',
+                columnsCount: 1,
+                options: [
+                    {
+                        label: 'Option A',
+                        value: 'a'
+                    },
+                    {
+                        label: 'Option B',
+                        value: 'b'
+                    },
+                    {
+                        label: 'Option C',
+                        value: 'c'
+                    },
+                    {
+                        label: 'Option D',
+                        value: 'd'
+                    }
+                ]
+            },
+            {
+                type: 'static',
+                name: 'checkboxes',
+                label: '当前值'
+            }
+        ],
+        submitText: null,
+        actions: []
+    }, {}, makeEnv()));
+    expect(container).toMatchSnapshot();
+    await wait(100);
+    fireEvent.click(getByText(/Option A/));
+    await wait(100);
+    fireEvent.click(getByText(/Option B/));
+    await wait(100);
+    expect(container).toMatchSnapshot();
+});
\ No newline at end of file
diff --git a/__tests__/renderers/Form/grid.test.tsx b/__tests__/renderers/Form/grid.test.tsx
new file mode 100644
index 00000000..7d049d7c
--- /dev/null
+++ b/__tests__/renderers/Form/grid.test.tsx
@@ -0,0 +1,50 @@
+import React = require('react');
+import {render, cleanup} from 'react-testing-library';
+import '../../../src/themes/default';
+import {
+    render as amisRender
+} from '../../../src/index';
+import {makeEnv} from '../../helper';
+import { clearStoresCache } from '../../../src/factory';
+
+afterEach(() => {
+    cleanup();
+    clearStoresCache();
+});
+
+test('Renderer:hbox', async () => {
+    const {
+        container
+    } = render(amisRender({
+        type: 'form',
+        title: 'The form',
+        controls: [
+            {
+                type: "grid",
+                columns: [
+                    {
+                        md: 3,
+                        mdOffset: 1,
+                        columnClassName: 'bg-white',
+                        controls: [
+                            {
+                                name: 'text',
+                                type: 'text',
+                                label: false,
+                                placeholder: 'Text'
+                            }
+                        ]
+                    },
+                    {
+                        md: 9,
+                        type: 'tpl',
+                        tpl: '其他渲染器类型'
+                    }
+                ]
+            }
+        ],
+        submitText: null,
+        actions: []
+    }, {}, makeEnv()));
+    expect(container).toMatchSnapshot();
+});
\ No newline at end of file
diff --git a/__tests__/renderers/Form/group.test.tsx b/__tests__/renderers/Form/group.test.tsx
new file mode 100644
index 00000000..221e8f3b
--- /dev/null
+++ b/__tests__/renderers/Form/group.test.tsx
@@ -0,0 +1,88 @@
+import React = require('react');
+import {render, cleanup} from 'react-testing-library';
+import '../../../src/themes/default';
+import {
+    render as amisRender
+} from '../../../src/index';
+import {makeEnv} from '../../helper';
+import { clearStoresCache } from '../../../src/factory';
+
+afterEach(() => {
+    cleanup();
+    clearStoresCache();
+});
+
+test('Renderer:group', async () => {
+    const {
+        container
+    } = render(amisRender({
+        type: 'form',
+        title: 'The form',
+        controls: [
+            {
+                type: 'group',
+                mode: 'horizontal',
+                className: 'bg-white',
+                horizontal: {
+                    label: 1,
+                    right: 10,
+                    offset: 1
+                },
+                controls: [
+                    {
+                        type: 'text',
+                        name: 'test1',
+                        label: 'Label',
+                        placeholder: 'Placeholder'
+                    },
+                    {
+                        type: 'text',
+                        name: 'test2',
+                        label: 'Label',
+                        placeholder: 'Placeholder'
+                    }
+                ]
+            },
+            {
+                type: 'group',
+                mode: 'inline',
+                className: 'bg-white',
+                controls: [
+                    {
+                        type: 'text',
+                        name: 'test1',
+                        label: 'Label',
+                        placeholder: 'Placeholder'
+                    },
+                    {
+                        type: 'text',
+                        name: 'test2',
+                        label: 'Label',
+                        placeholder: 'Placeholder'
+                    }
+                ]
+            },
+            {
+                type: 'group',
+                direction: 'vertical',
+                controls: [
+                    {
+                        type: 'text',
+                        name: 'test1',
+                        label: 'Label',
+                        placeholder: 'Placeholder'
+                    },
+                    {
+                        type: 'text',
+                        name: 'test2',
+                        label: 'Label',
+                        placeholder: 'Placeholder'
+                    }
+                ]
+            }
+        ],
+        submitText: null,
+        actions: []
+    }, {}, makeEnv()));
+    expect(container).toMatchSnapshot();
+});
\ No newline at end of file
diff --git a/__tests__/renderers/Form/hbox.test.tsx b/__tests__/renderers/Form/hbox.test.tsx
new file mode 100644
index 00000000..025266b6
--- /dev/null
+++ b/__tests__/renderers/Form/hbox.test.tsx
@@ -0,0 +1,47 @@
+import React = require('react');
+import {render, cleanup} from 'react-testing-library';
+import '../../../src/themes/default';
+import {
+    render as amisRender
+} from '../../../src/index';
+import {makeEnv} from '../../helper';
+import { clearStoresCache } from '../../../src/factory';
+
+afterEach(() => {
+    cleanup();
+    clearStoresCache();
+});
+
+test('Renderer:hbox', async () => {
+    const {
+        container
+    } = render(amisRender({
+        type: 'form',
+        title: 'The form',
+        controls: [
+            {
+                type: 'hbox',
+                columns: [
+                    {
+                        columnClassName: 'w-sm',
+                        controls: [
+                            {
+                                name: 'text',
+                                type: 'text',
+                                label: false,
+                                placeholder: 'Text'
+                            }
+                        ]
+                    },
+                    {
+                        type: 'tpl',
+                        tpl: '其他类型的渲染器'
+                    }
+                ]
+            }
+        ],
+        submitText: null,
+        actions: []
+    }, {}, makeEnv()));
+    expect(container).toMatchSnapshot();
+});
\ No newline at end of file
diff --git a/__tests__/renderers/Form/list.test.tsx b/__tests__/renderers/Form/list.test.tsx
new file mode 100644
index 00000000..9c9b00a7
--- /dev/null
+++ b/__tests__/renderers/Form/list.test.tsx
@@ -0,0 +1,93 @@
+import React = require('react');
+import {render, cleanup, fireEvent} from 'react-testing-library';
+import '../../../src/themes/default';
+import {
+    render as amisRender
+} from '../../../src/index';
+import {makeEnv, wait} from '../../helper';
+import { clearStoresCache } from '../../../src/factory';
+
+afterEach(() => {
+    cleanup();
+    clearStoresCache();
+});
+
+test('Renderer:list', async () => {
+    const {
+        container
+    } = render(amisRender({
+        type: 'form',
+        title: 'The form',
+        controls: [
+            {
+                type: 'list',
+                name: 'select',
+                label: '单选',
+                clearable: true,
+                options: [
+                    {
+                        label: 'Option A',
+                        value: 'a'
+                    },
+                    {
+                        label: 'Option B',
+                        value: 'b'
+                    },
+                    {
+                        label: 'OptionC',
+                        value: 'c',
+                        image: 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3893101144,2877209892&fm=23&gp=0.jpg'
+                    }
+                ]
+            }
+        ],
+        submitText: null,
+        actions: []
+    }, {}, makeEnv()));
+    expect(container).toMatchSnapshot();
+});
+
+test('Renderer:list:multiple clearable', async () => {
+    const {
+        getByText,
+        container
+    } = render(amisRender({
+        type: 'form',
+        title: 'The form',
+        controls: [
+            {
+                type: 'list',
+                name: 'select',
+                label: '多选',
+                multiple: true,
+                clearable: true,
+                options: [
+                    {
+                        label: 'Option A',
+                        value: 'a'
+                    },
+                    {
+                        label: 'Option B',
+                        value: 'b'
+                    }
+                ]
+            },
+            {
+                type: 'static',
+                name: 'select',
+                label: '当前值'
+            }
+        ],
+        submitText: null,
+        actions: []
+    }, {}, makeEnv()));
+    await wait(100);
+    fireEvent.click(getByText(/Option A/));
+    await wait(100);
+    fireEvent.click(getByText(/Option B/));
+    expect(container).toMatchSnapshot();
+    await wait(100);
+    fireEvent.click(getByText(/Option B/));
+    await wait(100);
+    expect(container).toMatchSnapshot();
+});
\ No newline at end of file
diff --git a/__tests__/renderers/Form/panel.test.tsx b/__tests__/renderers/Form/panel.test.tsx
new file mode 100644
index 00000000..071d4267
--- /dev/null
+++ b/__tests__/renderers/Form/panel.test.tsx
@@ -0,0 +1,73 @@
+import React = require('react');
+import {render, cleanup} from 'react-testing-library';
+import '../../../src/themes/default';
+import {
+    render as amisRender
+} from '../../../src/index';
+import {makeEnv} from '../../helper';
+import { clearStoresCache } from '../../../src/factory';
+
+afterEach(() => {
+    cleanup();
+    clearStoresCache();
+});
+
+test('Renderer:panel', async () => {
+    const {
+        container
+    } = render(amisRender({
+        type: 'form',
+        title: 'The form',
+        controls: [
+            {
+                type: 'hbox',
+                columns: [
+                    {
+                        controls: [
+                            {
+                                type: 'panel',
+                                title: 'bla bla',
+                                bodyClassName: 'bg-white',
+                                body: [
+                                    {
+                                        name: 'text',
+                                        type: 'text',
+                                        label: false,
+                                        placeholder: 'Text'
+                                    }
+                                ],
+                                footer: '<p>footer 内容</p>',
+                                footerClassName: 'bg-black'
+                            }
+                        ]
+                    },
+                    {
+                        controls: [
+                            {
+                                type: 'panel',
+                                title: 'bla bla',
+                                controls: [
+                                    {
+                                        name: 'text',
+                                        type: 'text',
+                                        label: false,
+                                        placeholder: 'Text 1'
+                                    },
+                                    {
+                                        name: 'text2',
+                                        type: 'text',
+                                        label: false,
+                                        placeholder: 'Text 2'
+                                    }
+                                ]
+                            }
+                        ]
+                    }
+                ]
+            }
+        ],
+        submitText: null,
+        actions: []
+    }, {}, makeEnv()));
+    expect(container).toMatchSnapshot();
+});
\ No newline at end of file
diff --git a/__tests__/renderers/Form/radios.test.tsx b/__tests__/renderers/Form/radios.test.tsx
new file mode 100644
index 00000000..68be0e92
--- /dev/null
+++ b/__tests__/renderers/Form/radios.test.tsx
@@ -0,0 +1,59 @@
+import React = require('react');
+import {render, cleanup, fireEvent} from 'react-testing-library';
+import '../../../src/themes/default';
+import {
+    render as amisRender
+} from '../../../src/index';
+import {makeEnv, wait} from '../../helper';
+import { clearStoresCache } from '../../../src/factory';
+
+afterEach(() => {
+    cleanup();
+    clearStoresCache();
+});
+
+test('Renderer:radios', async () => {
+    const {
+        getByText,
+        container
+    } = render(amisRender({
+        type: 'form',
+        title: 'The form',
+        controls: [
+            {
+                name: 'radios',
+                type: 'radios',
+                label: 'radios',
+                columnsCount: 1,
+                options: [
+                    {
+                        label: 'Option A',
+                        value: 'a'
+                    },
+                    {
+                        label: 'Option B',
+                        value: 'b'
+                    },
+                    {
+                        label: 'Option C',
+                        value: 'c'
+                    },
+                    {
+                        label: 'Option D',
+                        value: 'd'
+                    }
+                ]
+            },
+            {
+                type: 'static',
+                name: 'radios',
+                label: '当前值'
+            }
+        ],
+        submitText: null,
+        actions: []
+    }, {}, makeEnv()));
+    expect(container).toMatchSnapshot();
+    fireEvent.click(getByText(/Option A/));
+    expect(container).toMatchSnapshot();
+});
\ No newline at end of file
diff --git a/__tests__/renderers/Form/service.test.tsx b/__tests__/renderers/Form/service.test.tsx
new file mode 100644
index 00000000..59d602fe
--- /dev/null
+++ b/__tests__/renderers/Form/service.test.tsx
@@ -0,0 +1,73 @@
+import React = require('react');
+import {render, cleanup} from 'react-testing-library';
+import '../../../src/themes/default';
+import {
+    render as amisRender
+} from '../../../src/index';
+import {makeEnv, wait} from '../../helper';
+import { clearStoresCache } from '../../../src/factory';
+
+afterEach(() => {
+    cleanup();
+    clearStoresCache();
+});
+
+test('Renderer:service', async () => {
+    const fetcher = jest.fn().mockImplementation(() => Promise.resolve({
+        data: {
+            status: 0,
+            msg: 'ok',
+            data: {
+                controls: [
+                    {type: "text", label: "动态字段1", name: "dy_1", required: true},
+                    {type: "text", label: "动态字段2", name: "dy_2"}
+                ]
+            }
+        }
+    }));
+
+    const {
+        container
+    } = render(amisRender({
+        type: 'form',
+        title: 'The form',
+        controls: [
+            {
+                name: 'tpl',
+                type: 'select',
+                label: '模板',
+                inline: true,
+                required: true,
+                value: 'tpl1',
+                options: [
+                    {
+                        label: '模板1',
+                        value: 'tpl1'
+                    },
+                    {
+                        label: '模板2',
+                        value: 'tpl2'
+                    },
+                    {
+                        label: '模板3',
+                        value: 'tpl3'
+                    }
+                ]
+            },
+            {
+                type: 'service',
+                className: 'm-t',
+                initFetchSchemaOn: 'data.tpl',
+                schemaApi: 'https://houtai.baidu.com/api/mock2/service/form?tpl=$tpl'
+            }
+        ],
+        submitText: null,
+        actions: []
+    }, {}, makeEnv({
+        fetcher
+    })));
+
+    await wait(100);
+    expect(fetcher).toHaveBeenCalled();
+    expect(container).toMatchSnapshot();
+});
\ No newline at end of file
diff --git a/__tests__/renderers/Form/static.test.tsx b/__tests__/renderers/Form/static.test.tsx
new file mode 100644
index 00000000..664d6ee6
--- /dev/null
+++ b/__tests__/renderers/Form/static.test.tsx
@@ -0,0 +1,65 @@
+import React = require('react');
+import {render, cleanup} from 'react-testing-library';
+import '../../../src/themes/default';
+import {
+    render as amisRender
+} from '../../../src/index';
+import {makeEnv} from '../../helper';
+import { clearStoresCache } from '../../../src/factory';
+
+afterEach(() => {
+    cleanup();
+    clearStoresCache();
+});
+
+test('Renderer:static', async () => {
+    const {
+        container
+    } = render(amisRender({
+        type: 'form',
+        title: 'The form',
+        controls: [
+            {
+                type: 'static',
+                name: 'static',
+                label: 'label',
+                value: 'static',
+                description: 'static description',
+                placeholder: '-',
+                inline: true,
+                className: 'bg-white'
+            },
+            {
+                type: 'static',
+                name: 'static 1',
+                visible: true
+            },
+            {
+                type: 'static',
+                name: 'static 2',
+                visibleOn: 'this.static'
+            },
+            {
+                type: 'static',
+                name: 'static 3',
+                hidden: true
+            },
+            {
+                type: 'static',
+                name: 'static 4',
+                hiddenOn: 'this.static'
+            },
+            {
+                type: 'static',
+                name: 'static 5',
+                hiddenOn: 'this.static',
+                inputClassName: 'padder-xs',
+                labelClassName: 'font-bold',
+                tpl: '<%= static tpl %>'
+            },
+        ],
+        submitText: null,
+        actions: []
+    }, {}, makeEnv()));
+    expect(container).toMatchSnapshot();
+});
\ No newline at end of file
diff --git a/__tests__/renderers/Form/switch.test.tsx b/__tests__/renderers/Form/switch.test.tsx
new file mode 100644
index 00000000..fcdc8297
--- /dev/null
+++ b/__tests__/renderers/Form/switch.test.tsx
@@ -0,0 +1,46 @@
+import React = require('react');
+import {render, cleanup} from 'react-testing-library';
+import '../../../src/themes/default';
+import {
+    render as amisRender
+} from '../../../src/index';
+import {makeEnv} from '../../helper';
+import { clearStoresCache } from '../../../src/factory';
+
+afterEach(() => {
+    cleanup();
+    clearStoresCache();
+});
+
+test('Renderer:switch', async () => {
+    const {
+        container
+    } = render(amisRender({
+        type: 'form',
+        title: 'The form',
+        controls: [
+            {
+                name: 'switch',
+                className: 'block',
+                label: '开关',
+                type: 'switch',
+                addable: true,
+                removeable: true,
+                minLength: 1,
+                maxLength: 4,
+                addButtonText: '新增',
+                draggable: true,
+                draggableTip: '可通过拖动每行中的【交换】按钮进行顺序调整',
+                value: true,
+                trueValue: true,
+                falseValue: false,
+                disabled: false,
+                option: 'switch',
+                optionAtLeft: false
+            }
+        ],
+        submitText: null,
+        actions: []
+    }, {}, makeEnv()));
+    expect(container).toMatchSnapshot();
+});
\ No newline at end of file
diff --git a/__tests__/renderers/Form/tabs.test.tsx b/__tests__/renderers/Form/tabs.test.tsx
new file mode 100644
index 00000000..a81a0fe9
--- /dev/null
+++ b/__tests__/renderers/Form/tabs.test.tsx
@@ -0,0 +1,52 @@
+import React = require('react');
+import {render, cleanup} from 'react-testing-library';
+import '../../../src/themes/default';
+import {
+    render as amisRender
+} from '../../../src/index';
+import {makeEnv} from '../../helper';
+import { clearStoresCache } from '../../../src/factory';
+
+afterEach(() => {
+    cleanup();
+    clearStoresCache();
+});
+
+test('Renderer:tabs', async () => {
+    const {
+        container
+    } = render(amisRender({
+        type: 'form',
+        title: 'The form',
+        controls: [
+            {
+                type: "tabs",
+                tabClassName: 'bg-info',
+                tabs: [
+                    {
+                        title: '基本配置',
+                        body: '<p>tab1 内容</p>',
+                    },
+                    {
+                        title: '其他配置',
+                        controls: [
+                            {
+                                name: 'c',
+                                type: 'text',
+                                label: '文本3'
+                            },
+                            {
+                                name: 'd',
+                                type: 'text',
+                                label: '文本4'
+                            }
+                        ]
+                    }
+                ]
+            }
+        ],
+        submitText: null,
+        actions: []
+    }, {}, makeEnv()));
+    expect(container).toMatchSnapshot();
+});
\ No newline at end of file
diff --git a/docs/renderers/Form/Combo.md b/docs/renderers/Form/Combo.md
index 1a925237..64bea19b 100644
--- a/docs/renderers/Form/Combo.md
+++ b/docs/renderers/Form/Combo.md
@@ -22,7 +22,7 @@
 -   `minLength` 限制最小长度。
 -   `maxLength` 限制最大长度。
 -   `scaffold` 单条初始值。默认为 `{}`。
--   `canAccessSuperData` 指定是否可以自动获取上层的数据并映射到表单项上，默认是`true`。
+-   `canAccessSuperData` 指定是否可以自动获取上层的数据并映射到表单项上，默认是`false`。
 -   更多配置请参考 [FormItem](./FormItem.md)
 
 ```schema:height="450" scope="form"
diff --git a/docs/renderers/Form/FieldSet.md b/docs/renderers/Form/FieldSet.md
index 88fa3bed..966968e0 100644
--- a/docs/renderers/Form/FieldSet.md
+++ b/docs/renderers/Form/FieldSet.md
@@ -39,6 +39,7 @@
   {
     "type": "fieldSet",
     "title": "其他配置",
+    "collapsable": true,
     "collapsed": true,
     "controls": [
       {
diff --git a/docs/renderers/Grid.md b/docs/renderers/Grid.md
index 6c1de0c5..d5fdb90b 100644
--- a/docs/renderers/Grid.md
+++ b/docs/renderers/Grid.md
@@ -27,7 +27,7 @@
 | columns[x].lgPull   | `int`                             |          | 靠左的距离占比：1 - 12  |
 | columns[x].lgPush   | `int`                             |          | 靠右的距离占比： 1 - 12 |
 
-更多使用说明，请参看 [Grid Props](https://react-bootstrap.github.io/components.html#grid-props-col)
+更多使用说明，请参看 [Grid Props](https://react-bootstrap.github.io/layout/grid/#col-props)
 
 ```schema:height="300" scope="body"
 [
diff --git a/docs/renderers/Tabs.md b/docs/renderers/Tabs.md
index af08cec1..6429095d 100644
--- a/docs/renderers/Tabs.md
+++ b/docs/renderers/Tabs.md
@@ -11,6 +11,7 @@
 | tabs[x].tab       | [Container](#container) |                                     | 内容区                                                   |
 | tabs[x].hash      | `string`                |                                     | 设置以后将跟 url 的 hash 对应                            |
 | tabs[x].reload    | `boolean`               |                                     | 设置以后内容每次都会重新渲染，对于 crud 的重新拉取很有用 |
+| tabs[x].unmountOnExit    | `boolean`               |                                     | 每次退出都会销毁当前tab栏内容 |
 | tabs[x].className | `string`                | `"bg-white b-l b-r b-b wrapper-md"` | Tab 区域样式                                             |
 
 ```schema:height="300" scope="body"
diff --git a/src/renderers/Form/Grid.tsx b/src/renderers/Form/Grid.tsx
index 13b96f99..30189469 100644
--- a/src/renderers/Form/Grid.tsx
+++ b/src/renderers/Form/Grid.tsx
@@ -50,6 +50,6 @@ export class GridRenderer extends Grid<GridProps> {
             );
         }
 
-        return itemRender ?  itemRender(node, key, length, this.props) : render(region, node);
+        return itemRender ?  itemRender(node, key, length, this.props) : render(region, node.body || node);
     }
 }