diff --git a/.gitignore b/.gitignore
index 264fd9d..4166666 100644
--- a/.gitignore
+++ b/.gitignore
@@ -27,6 +27,7 @@ lib
 es
 yarn.lock
 package-lock.json
+pnpm-lock.yaml
 coverage/
 .doc
 
diff --git a/assets/index.less b/assets/index.less
index c0bca85..9a295ff 100644
--- a/assets/index.less
+++ b/assets/index.less
@@ -16,26 +16,21 @@
 .@{segmented-prefix-cls} {
   position: relative;
 
-  display: inline-block;
-  box-sizing: border-box;
-  margin: 0;
-  padding: 0;
-  padding: 2px;
+  display: inline-flex;
+  align-items: stretch;
+  justify-items: flex-start;
 
   background-color: rgba(0, 0, 0, 0.04);
-
   border-radius: 2px;
+  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.04);
 
   &-item {
-    // box-sizing: border-box;
     position: relative;
-    display: inline-block;
-    height: 28px;
+    min-height: 28px;
     padding: 4px 10px;
+
     color: fade(#000, 85%);
-    line-height: 28px;
     text-align: center;
-
     cursor: pointer;
 
     &-selected {
@@ -79,10 +74,10 @@
     .segmented-item-selected();
 
     position: absolute;
-    top: 2px;
-    left: 0px;
+    top: 0;
+    left: 0;
     width: 0;
-    height: 28px;
+    height: 100%;
     padding: 4px 0;
   }
 
diff --git a/assets/style.less b/assets/style.less
index 568d5f9..866d444 100644
--- a/assets/style.less
+++ b/assets/style.less
@@ -1,5 +1,12 @@
 @import './index.less';
 
+// reset
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
 .wrapper {
   margin-bottom: 10px;
 }
diff --git a/docs/demo/custom-render.md b/docs/demo/custom-render.md
new file mode 100644
index 0000000..d3d62b2
--- /dev/null
+++ b/docs/demo/custom-render.md
@@ -0,0 +1,3 @@
+## custom-render
+
+<code src="../examples/custom-render.tsx">
diff --git a/docs/examples/custom-render.tsx b/docs/examples/custom-render.tsx
new file mode 100644
index 0000000..fd39b23
--- /dev/null
+++ b/docs/examples/custom-render.tsx
@@ -0,0 +1,40 @@
+import '../../assets/style.less';
+import * as React from 'react';
+import Segmented from 'rc-segmented';
+
+const options = [
+  {
+    label: (
+      <div>
+        iOS
+        <br />
+        10
+        <br />
+        11
+      </div>
+    ),
+    value: 'iOS',
+  },
+  { label: <h1>Android</h1>, value: 'Android' },
+  {
+    label: (
+      <div>
+        Web
+        <br />
+        345
+      </div>
+    ),
+    value: 'Web',
+  },
+  { label: <h1>Electron</h1>, value: 'Electron', disabled: true },
+  // debug usage
+  // { label: '', value: 'Empty' },
+];
+
+export default () => {
+  return (
+    <>
+      <Segmented options={options} />
+    </>
+  );
+};
diff --git a/tests/__snapshots__/index.spec.tsx.snap b/tests/__snapshots__/index.spec.tsx.snap
index 0751b40..7043665 100644
--- a/tests/__snapshots__/index.spec.tsx.snap
+++ b/tests/__snapshots__/index.spec.tsx.snap
@@ -1,11 +1,111 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`rc-segmented render 1`] = `
+<div
+  class="rc-segmented"
+>
+  <label
+    class="rc-segmented-item rc-segmented-item-selected"
+  >
+    <input
+      checked=""
+      class="rc-segmented-item-input"
+      type="radio"
+    />
+    <span
+      class="rc-segmented-item-label"
+    >
+      iOS
+    </span>
+  </label>
+  <label
+    class="rc-segmented-item"
+  >
+    <input
+      class="rc-segmented-item-input"
+      type="radio"
+    />
+    <span
+      class="rc-segmented-item-label"
+    >
+      <div
+        id="android"
+      >
+        Android
+      </div>
+    </span>
+  </label>
+  <label
+    class="rc-segmented-item"
+  >
+    <input
+      class="rc-segmented-item-input"
+      type="radio"
+    />
+    <span
+      class="rc-segmented-item-label"
+    >
+      <h2>
+        Web
+      </h2>
+    </span>
+  </label>
+</div>
+`;
+
 exports[`rc-segmented render empty segmented 1`] = `
 <div
   class="rc-segmented"
 />
 `;
 
+exports[`rc-segmented render segmented ok 1`] = `
+<div
+  class="rc-segmented"
+>
+  <label
+    class="rc-segmented-item rc-segmented-item-selected"
+  >
+    <input
+      checked=""
+      class="rc-segmented-item-input"
+      type="radio"
+    />
+    <span
+      class="rc-segmented-item-label"
+    >
+      iOS
+    </span>
+  </label>
+  <label
+    class="rc-segmented-item"
+  >
+    <input
+      class="rc-segmented-item-input"
+      type="radio"
+    />
+    <span
+      class="rc-segmented-item-label"
+    >
+      Android
+    </span>
+  </label>
+  <label
+    class="rc-segmented-item"
+  >
+    <input
+      class="rc-segmented-item-input"
+      type="radio"
+    />
+    <span
+      class="rc-segmented-item-label"
+    >
+      Web
+    </span>
+  </label>
+</div>
+`;
+
 exports[`rc-segmented render segmented with CSSMotion 1`] = `
 <div
   class="rc-segmented"
diff --git a/tests/index.spec.tsx b/tests/index.spec.tsx
index cdea903..9853d96 100644
--- a/tests/index.spec.tsx
+++ b/tests/index.spec.tsx
@@ -1,9 +1,9 @@
 import React from 'react';
 import { act } from 'react-dom/test-utils';
-import { mount as emount } from 'enzyme';
 import { mount } from './wrapper';
 
-import Segmented, { SegmentedValue } from '../src';
+import Segmented from '../src';
+import type { SegmentedValue } from '../src';
 
 jest.mock('rc-motion/lib/util/motion', () => {
   return {
@@ -27,6 +27,8 @@ describe('rc-segmented', () => {
       />,
     );
 
+    expect(wrapper.render()).toMatchSnapshot();
+
     expect(
       wrapper
         .find('.rc-segmented-item-input')
@@ -34,6 +36,29 @@ describe('rc-segmented', () => {
     ).toEqual([true, false, false]);
   });
 
+  it('render', () => {
+    const wrapper = mount(
+      <Segmented
+        options={[
+          { label: 'iOS', value: 'iOS' },
+          { label: <div id="android">Android</div>, value: 'Android' },
+          { label: <h2>Web</h2>, value: 'Web' },
+        ]}
+      />,
+    );
+
+    expect(wrapper.render()).toMatchSnapshot();
+
+    expect(
+      wrapper
+        .find('.rc-segmented-item-input')
+        .map((el) => (el.getDOMNode() as HTMLInputElement).checked),
+    ).toEqual([true, false, false]);
+
+    expect(wrapper.find('#android').at(0).text()).toContain('Android');
+    expect(wrapper.find('h2').at(0).text()).toContain('Web');
+  });
+
   it('render segmented with defaultValue', () => {
     const wrapper = mount(
       <Segmented options={['iOS', 'Android', 'Web']} defaultValue="Web" />,
@@ -199,23 +224,6 @@ describe('rc-segmented', () => {
     ).toEqual([true, false, false]);
   });
 
-  it('render segmented with options null/undefined', () => {
-    const handleValueChange = jest.fn();
-    const wrapper = mount(
-      <Segmented
-        options={[null, undefined, ''] as any}
-        disabled
-        onChange={(e) => handleValueChange(e.target.value)}
-      />,
-    );
-    expect(wrapper.render()).toMatchSnapshot();
-    expect(
-      wrapper
-        .find('.rc-segmented-item-label')
-        .map((n) => n.getDOMNode().textContent),
-    ).toEqual(['', '', '']);
-  });
-
   it('render segmented with className and other html attribues', () => {
     const wrapper = mount(
       <Segmented
@@ -361,4 +369,21 @@ describe('rc-segmented', () => {
     // thumb should disappear
     expect(wrapper.find('.rc-segmented-thumb').length).toBe(0);
   });
+
+  it('render segmented with options null/undefined', () => {
+    const handleValueChange = jest.fn();
+    const wrapper = mount(
+      <Segmented
+        options={[null, undefined, ''] as any}
+        disabled
+        onChange={(e) => handleValueChange(e.target.value)}
+      />,
+    );
+    expect(wrapper.render()).toMatchSnapshot();
+    expect(
+      wrapper
+        .find('.rc-segmented-item-label')
+        .map((n) => n.getDOMNode().textContent),
+    ).toEqual(['', '', '']);
+  });
 });