diff --git a/docs/App.vue b/docs/App.vue
index 789bc897c..2eef4573b 100644
--- a/docs/App.vue
+++ b/docs/App.vue
@@ -20,7 +20,7 @@ export default {
 @import '~@/stylesheets/default';
 
 * {
-  font-family: 'NanumGothic', Arial, 'Helvetica Neue', Helvetica, sans-serif;
+  font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
 }
 
 #app {
diff --git a/docs/components/CodeView.vue b/docs/components/CodeView.vue
new file mode 100644
index 000000000..cdbfeb9d2
--- /dev/null
+++ b/docs/components/CodeView.vue
@@ -0,0 +1,21 @@
+<template>
+  <div>
+    CodeView
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'CodeView',
+  components: {
+  },
+  props: {
+  },
+  setup() {
+
+  },
+};
+</script>
+
+<style scoped>
+</style>
diff --git a/docs/components/Example.vue b/docs/components/Example.vue
index cadc7de4c..bdbc687e4 100644
--- a/docs/components/Example.vue
+++ b/docs/components/Example.vue
@@ -1,17 +1,25 @@
 <template>
   <section>
     <h2>{{ title }}</h2>
+    <br>
     <p class="example-desc">
       {{ description }}
     </p>
-    <div>
-      123
-    </div>
+    <br><br>
+    <component
+      :is="contents"
+    />
+    <br>
+    url : {{ url }}
+    <br>
     <hr class="example-splitter">
   </section>
 </template>
 
 <script>
+import { ref } from 'vue';
+import axios from 'axios';
+
 export default {
   name: 'Example',
   components: {
@@ -25,8 +33,26 @@ export default {
       type: String,
       default: '',
     },
+    contents: {
+      type: Object,
+      default: null,
+    },
+    url: {
+      type: String,
+      default: '',
+    },
   },
-  methods: {
+  setup(props) {
+    const codeData = ref('');
+
+    console.log(`props.url : ${props.url}`);
+    axios.get(props.url).then((result) => {
+      codeData.value = `\`\`\`html\n${result.data}\n\`\`\``;
+    });
+
+    return {
+      codeData,
+    };
   },
 };
 </script>
diff --git a/docs/components/Menu.vue b/docs/components/Menu.vue
index 6c545b020..fb7c38feb 100644
--- a/docs/components/Menu.vue
+++ b/docs/components/Menu.vue
@@ -40,12 +40,12 @@ export default {
       },
       {
         name: 'CheckBox',
-        routerLink: '/checkBox',
+        routerLink: '/checkbox',
         content: '체크박스',
       },
       {
         name: 'RadioButton',
-        routerLink: '/radioButton',
+        routerLink: '/radio',
         content: '라디오버튼',
       },
       {
@@ -55,7 +55,7 @@ export default {
       },
       {
         name: 'SelectBox',
-        routerLink: '/selectBox',
+        routerLink: '/select',
         content: '셀렉트 박스',
       },
       {
diff --git a/docs/router/index.js b/docs/router/index.js
index 49984d49b..f34cbab65 100644
--- a/docs/router/index.js
+++ b/docs/router/index.js
@@ -23,14 +23,14 @@ const routes = [
     component: () => import(/* webpackChunkName: "button" */ '../views/button'),
   },
   {
-    path: '/checkBox',
-    name: 'CheckBox',
-    component: () => import(/* webpackChunkName: "checkBox" */ '../views/checkBox'),
+    path: '/checkbox',
+    name: 'Checkbox',
+    component: () => import(/* webpackChunkName: "checkbox" */ '../views/checkbox'),
   },
   {
-    path: '/radioButton',
-    name: 'RadioButton',
-    component: () => import(/* webpackChunkName: "radioButton" */ '../views/radioButton'),
+    path: '/radio',
+    name: 'Radio',
+    component: () => import(/* webpackChunkName: "radio" */ '../views/radio'),
   },
   {
     path: '/inputNumber',
@@ -38,9 +38,9 @@ const routes = [
     component: () => import(/* webpackChunkName: "inputNumber" */ '../views/inputNumber'),
   },
   {
-    path: '/selectBox',
-    name: 'SelectBox',
-    component: () => import(/* webpackChunkName: "selectBox" */ '../views/selectBox'),
+    path: '/select',
+    name: 'Select',
+    component: () => import(/* webpackChunkName: "select" */ '../views/select'),
   },
   {
     path: '/slider',
diff --git a/docs/views/checkBox/index.vue b/docs/views/checkBox/index.vue
deleted file mode 100644
index 8c80937da..000000000
--- a/docs/views/checkBox/index.vue
+++ /dev/null
@@ -1,73 +0,0 @@
-<template>
-  <div class="article-title">
-    <h1> CHECK BOX </h1>
-  </div>
-  <br>
-  <h3>일반적인 v-model 사용</h3>
-  <br>
-  <EvCheckBox
-    v-model="checkVal1"
-  >
-    TEST1
-  </EvCheckBox>
-  <br>
-  {{ checkVal1 }}
-  <br><br><br>
-  <h3>일반적인 v-model 사용 + change 이벤트 사용</h3>
-  <br>
-  <EvCheckBox
-    v-model="checkVal2"
-    @change="onChange"
-  >
-    TEST2
-  </EvCheckBox>
-  <br>
-  {{ checkVal2 }}
-  <br><br><br>
-  <h3>disabled</h3>
-  <br>
-  <EvCheckBox
-    v-model="checkVal3"
-    disabled
-  >
-    TEST3
-  </EvCheckBox>
-  <br>
-  {{ checkVal3 }}
-  <br><br><br><br>
-  <Example
-    title="'TITLE'"
-    description="'DESC'"
-  />
-</template>
-
-<script>
-import { ref, onMounted } from 'vue';
-import Example from '../../components/Example';
-
-export default {
-  name: 'CheckBox',
-  components: { Example },
-  inheritAttrs: false,
-  setup() {
-    const checkVal1 = ref(true);
-    const checkVal2 = ref(false);
-    const checkVal3 = ref(false);
-
-    const onChange = (value, e) => {
-      console.log(`value: ${value}, e : ${e}`);
-    };
-
-    onMounted(() => {
-      console.log('onMounted');
-    });
-
-    return {
-      checkVal1,
-      checkVal2,
-      checkVal3,
-      onChange,
-    };
-  },
-};
-</script>
diff --git a/docs/views/checkbox/example/Default.vue b/docs/views/checkbox/example/Default.vue
new file mode 100644
index 000000000..842965fd8
--- /dev/null
+++ b/docs/views/checkbox/example/Default.vue
@@ -0,0 +1,80 @@
+<template>
+  <div>
+    <h5># Common</h5>
+    <br>
+    <EvCheckbox
+      v-model="checkVal1"
+    >
+      Checkbox
+    </EvCheckbox>
+    <br>
+    <br>
+    <button @click="clickButton1">
+      click to change the check value
+    </button>
+    <br>
+    <br>
+    <h5># Use Change Event</h5>
+    <br>
+    <EvCheckbox
+      v-model="checkVal2"
+      @change="changeVal2"
+    >
+      Single Checkbox
+    </EvCheckbox>
+    <br>
+    <br>
+    Value in changeEvent : {{ checkResult2.value }}
+    <br>
+    Event in changeEvent : {{ checkResult2.e }}
+    <br>
+    <br>
+    <h5># Disabled</h5>
+    <br>
+    <EvCheckbox
+      v-model="checkVal3"
+      disabled
+    >
+      DISABLED
+    </EvCheckbox>
+    <br>
+    <br>
+  </div>
+</template>
+
+<script>
+import { ref, reactive } from 'vue';
+
+export default {
+  setup() {
+    const checkVal1 = ref(false);
+    const clickButton1 = () => {
+      checkVal1.value = !checkVal1.value;
+    };
+
+    const checkVal2 = ref(true);
+    const checkResult2 = reactive({
+      value: '',
+      e: null,
+    });
+    const changeVal2 = (value, e) => {
+      checkResult2.value = value;
+      checkResult2.e = e;
+    };
+
+    const checkVal3 = ref(false);
+
+    return {
+      checkVal1,
+      checkVal2,
+      clickButton1,
+      checkResult2,
+      changeVal2,
+      checkVal3,
+    };
+  },
+};
+</script>
+
+<style lang="scss">
+</style>
diff --git a/docs/views/checkbox/index.vue b/docs/views/checkbox/index.vue
new file mode 100644
index 000000000..c2a288c90
--- /dev/null
+++ b/docs/views/checkbox/index.vue
@@ -0,0 +1,54 @@
+<template>
+  <div class="article-title">
+    <h1> CHECK BOX </h1>
+  </div>
+  <br><hr><br>
+  <Example
+    v-for="(component, index) in components"
+    :key="`${component.title}_${index}`"
+    :title="component.title"
+    :description="component.description"
+    :contents="component.component"
+    :url="component.url"
+  />
+</template>
+
+<script>
+import { ref, defineAsyncComponent } from 'vue';
+import Example from '../../components/Example';
+import Default from './example/Default';
+
+export default {
+  name: 'Checkbox',
+  components: {
+    Example,
+  },
+  inheritAttrs: false,
+  setup() {
+    const checkVal1 = ref(true);
+    const checkVal2 = ref(false);
+    const checkVal3 = ref(false);
+
+    const onChange = (value, e) => {
+      console.log(`value: ${value}, e : ${e}`);
+    };
+
+    const components = [
+      {
+        title: 'Default',
+        description: '여러 개의 선택 사항을 고르기 위한 단일 체크 박스의 기능입니다.',
+        component: defineAsyncComponent(() => Promise.resolve(Default)),
+        url: './docs/views/checkbox/example/Default.vue',
+      },
+    ];
+
+    return {
+      checkVal1,
+      checkVal2,
+      checkVal3,
+      components,
+      onChange,
+    };
+  },
+};
+</script>
diff --git a/docs/views/radioButton/index.vue b/docs/views/radio/index.vue
similarity index 100%
rename from docs/views/radioButton/index.vue
rename to docs/views/radio/index.vue
diff --git a/docs/views/selectBox/index.vue b/docs/views/select/index.vue
similarity index 100%
rename from docs/views/selectBox/index.vue
rename to docs/views/select/index.vue
diff --git a/package-lock.json b/package-lock.json
index a4781ebc2..cf342c9ab 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11147,6 +11147,12 @@
         "repeat-string": "^1.0.0"
       }
     },
+    "marked": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/marked/-/marked-1.1.1.tgz",
+      "integrity": "sha512-mJzT8D2yPxoPh7h0UXkB+dBj4FykPJ2OIfxAWeIHrvoHDkFxukV/29QxoFQoPM6RLEwhIFdJpmKBlqVM3s2ZIw==",
+      "dev": true
+    },
     "mathml-tag-names": {
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/mathml-tag-names/-/mathml-tag-names-2.1.3.tgz",
diff --git a/package.json b/package.json
index 2033b7da8..7c46d869d 100644
--- a/package.json
+++ b/package.json
@@ -35,6 +35,7 @@
     "eslint-plugin-import": "^2.21.2",
     "eslint-plugin-vue": "^7.0.0-0",
     "lodash-es": "^4.17.15",
+    "marked": "^1.1.1",
     "moment": "^2.27.0",
     "node-sass": "^4.12.0",
     "sass-loader": "^8.0.2",
diff --git a/src/components/checkBox/index.vue b/src/components/checkbox/Checkbox.vue
similarity index 87%
rename from src/components/checkBox/index.vue
rename to src/components/checkbox/Checkbox.vue
index 4683e31b5..f224b058e 100644
--- a/src/components/checkBox/index.vue
+++ b/src/components/checkbox/Checkbox.vue
@@ -16,8 +16,10 @@
 </template>
 
 <script>
+import { nextTick } from 'vue';
+
 export default {
-  name: 'CheckBox',
+  name: 'EvCheckbox',
   props: {
     modelValue: {
       type: Boolean,
@@ -33,7 +35,8 @@ export default {
     change: val => typeof val === 'boolean',
   },
   setup(props, { emit }) {
-    const onChange = (e) => {
+    const onChange = async (e) => {
+      await nextTick();
       const value = !props.modelValue;
       emit('update:modelValue', value);
       emit('change', value, e);
@@ -49,6 +52,7 @@ export default {
 <style lang="scss">
 .ev-checkbox {
   cursor: pointer;
+  user-select: none;
   input {
     cursor: pointer;
   }
diff --git a/src/components/checkbox/index.js b/src/components/checkbox/index.js
new file mode 100644
index 000000000..34723d3d1
--- /dev/null
+++ b/src/components/checkbox/index.js
@@ -0,0 +1,7 @@
+import EvCheckbox from './Checkbox';
+
+EvCheckbox.install = (app) => {
+  app.component(EvCheckbox.name, EvCheckbox);
+};
+
+export default EvCheckbox;
diff --git a/src/components/checkboxGroup/CheckboxGroup.vue b/src/components/checkboxGroup/CheckboxGroup.vue
new file mode 100644
index 000000000..2a6e6a186
--- /dev/null
+++ b/src/components/checkboxGroup/CheckboxGroup.vue
@@ -0,0 +1,30 @@
+<template>
+  <div>EvCheckboxGroup</div>
+</template>
+
+<script>
+export default {
+  name: 'EvCheckboxGroup',
+  props: {
+  },
+  setup() {
+  },
+};
+</script>
+
+<style lang="scss">
+.ev-checkbox {
+  cursor: pointer;
+  input {
+    cursor: pointer;
+  }
+
+  &.disabled {
+    color: #C0C4CC;
+    cursor: not-allowed;
+    input {
+      cursor: not-allowed;
+    }
+  }
+}
+</style>
diff --git a/src/components/checkboxGroup/index.js b/src/components/checkboxGroup/index.js
new file mode 100644
index 000000000..180d60ba2
--- /dev/null
+++ b/src/components/checkboxGroup/index.js
@@ -0,0 +1,7 @@
+import EvCheckboxGroup from './CheckboxGroup';
+
+EvCheckboxGroup.install = (app) => {
+  app.component(EvCheckboxGroup.name, EvCheckboxGroup);
+};
+
+export default EvCheckboxGroup;
diff --git a/src/main.js b/src/main.js
index 5c9dc2401..71318ae36 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,31 +1,26 @@
-import EvCheckBox from '@/components/checkBox';
+import EvCheckbox from '@/components/checkbox/Checkbox.vue';
+import { version } from '../package.json';
 
-const components = {
-  EvCheckBox,
-};
-
-const evui = {
-  ...components,
-};
+const components = [
+  EvCheckbox,
+];
 
 const install = (app) => {
   if (!app) {
     return;
   }
-
-  Object.keys(evui).forEach((key) => {
-    app.component(key, evui[key]);
+  components.forEach((component) => {
+    app.component(component.name, component);
   });
-
-  // app.config.globalProperties.$message = () => EvMessage;
-  // app.config.globalProperties.$messagebox = () => EvMessageBox;
-  // app.config.globalProperties.$notify = () => EvNotification;
 };
 
-const API = {
-  version: '"2.0"',
+const EVUI = {
+  version,
   install,
-  ...components,
 };
 
-export default API;
+export {
+  EvCheckbox,
+};
+
+export default EVUI;
diff --git a/src/stylesheets/themes/variables.scss b/src/stylesheets/themes/variables.scss
index 4ed8bf635..0345c503a 100644
--- a/src/stylesheets/themes/variables.scss
+++ b/src/stylesheets/themes/variables.scss
@@ -29,7 +29,7 @@ $ev-themes: (
     checkbox-border: $color-gray30,
     checkbox-disabled: $color-gray30,
 
-    /* radioButton
+    /* radio
     -------------------------- */
     radio: $color-gray80,
     radio-border: $color-gray30,
@@ -130,7 +130,7 @@ $ev-themes: (
     checkbox-border: $color-gray19,
     checkbox-disabled: $color-gray60,
 
-    /* radioButton
+    /* radio
     -------------------------- */
     radio: $color-gray8,
     radio-border: $color-gray8,
diff --git a/tests/unit/example.spec.js b/tests/unit/example.spec.js
index 9bcd7fa20..6879601cc 100644
--- a/tests/unit/example.spec.js
+++ b/tests/unit/example.spec.js
@@ -1,10 +1,10 @@
 import { shallowMount } from '@vue/test-utils';
-import HelloWorld from '@/components/checkBox';
+import Checkbox from '@/components/checkbox/Checkbox';
 
-describe('index.vue', () => {
+describe('Checkbox.vue', () => {
   it('renders props.msg when passed', () => {
     const msg = 'new message';
-    const wrapper = shallowMount(HelloWorld, {
+    const wrapper = shallowMount(Checkbox, {
       props: { msg },
     });
     expect(wrapper.text()).toMatch(msg);