diff --git a/.eslintrc.js b/.eslintrc.js
index 81b2f5903d..2f27e31faf 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -82,10 +82,24 @@ module.exports = {
     '@typescript-eslint/explicit-module-boundary-types': 'off',
     '@typescript-eslint/explicit-function-return-type' : 'off',
     '@typescript-eslint/strict-boolean-expressions'    : 'off',
-    'align-assignments/align-assignments'              : [2, { requiresOnly: false }],
-    'vue/multi-word-component-names'                   : 'off',
-    'vue/no-reserved-component-names'                  : 'off',
-    'vue/html-closing-bracket-newline'                 : [
+    '@typescript-eslint/member-delimiter-style'        : [
+      'error',
+      {
+        multiline: {
+          delimiter  : 'comma',
+          requireLast: true,
+        },
+        singleline: {
+          delimiter  : 'comma',
+          requireLast: false,
+        },
+        multilineDetection: 'brackets',
+      },
+    ],
+    'align-assignments/align-assignments': [2, { requiresOnly: false }],
+    'vue/multi-word-component-names'     : 'off',
+    'vue/no-reserved-component-names'    : 'off',
+    'vue/html-closing-bracket-newline'   : [
       'error',
       {
         singleline: 'never',
diff --git a/.vscode/settings.json b/.vscode/settings.json
index acbbb4e6a0..77bcce0a73 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -6,5 +6,7 @@
   "eslint.packageManager": "yarn",
   "eslint.run": "onSave",
   "eslint.lintTask.options": "--cache .",
-  "eslint.lintTask.enable": true
+  "eslint.lintTask.enable": true,
+  "volar.autoCompleteRefs": false,
+  "volar.vueserver.useSecondServer": true,
 }
diff --git a/components/.vitepress/config.ts b/components/.vitepress/config.ts
index 4f251e5eac..810a4bc3fa 100644
--- a/components/.vitepress/config.ts
+++ b/components/.vitepress/config.ts
@@ -1,5 +1,4 @@
 import { defineConfig } from 'vitepress'
-import fonts from 'vite-plugin-fonts'
 
 export default defineConfig({
   base       : process.env.BASE_URL ?? '/design-system/',
@@ -14,7 +13,6 @@ export default defineConfig({
     nextLinks   : false,
     prevLinks   : false,
     lastUpdated : 'Last Updated',
-    smoothScroll: true,
     nav         : [],
     sidebar     : [
       {
diff --git a/components/avatar/Avatar.spec.ts b/components/avatar/Avatar.spec.ts
index 1a51a0d36c..a46db396f8 100644
--- a/components/avatar/Avatar.spec.ts
+++ b/components/avatar/Avatar.spec.ts
@@ -3,12 +3,10 @@ import Avatar from './Avatar.vue'
 import IconUser from '@carbon/icons-vue/lib/events/20'
 import MockImage from './__mocks__/image'
 import { vi } from 'vitest'
+import { delay } from 'nanodelay'
 
 vi.stubGlobal('Image', MockImage)
 
-// eslint-disable-next-line @typescript-eslint/promise-function-async
-const delay = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms))
-
 it('should render properly', () => {
   const screen = render({
     components: { Avatar },
diff --git a/components/calendar/Calendar.vue b/components/calendar/Calendar.vue
index bb5f859f45..7c3ab781d4 100644
--- a/components/calendar/Calendar.vue
+++ b/components/calendar/Calendar.vue
@@ -69,10 +69,18 @@ import Button from '../button/Button.vue'
 import IconNext from '@carbon/icons-vue/lib/chevron--right/20'
 import IconBack from '@carbon/icons-vue/lib/chevron--left/20'
 import {
-  defineComponent, ref, computed, watch, toRef, PropType,
+  defineComponent,
+  ref,
+  computed,
+  watch,
+  toRef,
+  PropType,
 } from 'vue-demi'
 import {
-  CalendarAdapter, CalendarFormat, CalendarItem, CalendarMode,
+  CalendarAdapter,
+  CalendarFormat,
+  CalendarItem,
+  CalendarMode,
 } from './adapter/adapter'
 import DateAdapter from './adapter/date'
 import MonthAdapter from './adapter/month'
diff --git a/components/calendar/adapter/adapter.ts b/components/calendar/adapter/adapter.ts
index 42da690720..bcd98bdcc9 100644
--- a/components/calendar/adapter/adapter.ts
+++ b/components/calendar/adapter/adapter.ts
@@ -1,28 +1,28 @@
 import { Ref } from 'vue-demi'
 
 export interface CalendarItem {
-  value: Date
-  text: string
-  disabled: boolean
-  readonly: boolean
-  active: boolean
+  value: Date,
+  text: string,
+  disabled: boolean,
+  readonly: boolean,
+  active: boolean,
 }
 
 export interface CalendarContext {
-  cursor: Ref<Date>
-  model: Ref<Date>
-  max: Ref<Date | undefined>
-  min: Ref<Date | undefined>
+  cursor: Ref<Date>,
+  model: Ref<Date>,
+  max: Ref<Date | undefined>,
+  min: Ref<Date | undefined>,
 }
 
 export interface CalendarAdapter {
-  getItems: (this: this, context: CalendarContext) => CalendarItem[]
-  getTitle: (this: this, context: CalendarContext) => string
-  getNextCursor: (this: this, context: CalendarContext) => Date
-  getPrevCursor: (this: this, context: CalendarContext) => Date
+  getItems: (this: this, context: CalendarContext) => CalendarItem[],
+  getTitle: (this: this, context: CalendarContext) => string,
+  getNextCursor: (this: this, context: CalendarContext) => Date,
+  getPrevCursor: (this: this, context: CalendarContext) => Date,
 
-  canNext: (this: this, context: CalendarContext) => boolean
-  canPrev: (this: this, context: CalendarContext) => boolean
+  canNext: (this: this, context: CalendarContext) => boolean,
+  canPrev: (this: this, context: CalendarContext) => boolean,
 }
 
 export const CalendarFormat = [
diff --git a/components/checkbox/use-checkbox.ts b/components/checkbox/use-checkbox.ts
index 47f5daabd9..491a1e1086 100644
--- a/components/checkbox/use-checkbox.ts
+++ b/components/checkbox/use-checkbox.ts
@@ -1,6 +1,8 @@
 import { syncRef } from '@vueuse/shared'
 import {
-  computed, getCurrentInstance, ref,
+  computed,
+  getCurrentInstance,
+  ref,
 } from 'vue-demi'
 import { InputProps } from '../input/use-input'
 import { valueIn, isEqual } from '../utils/value'
@@ -12,9 +14,9 @@ function isChecked (modelValue: unknown, checked: unknown): boolean {
 }
 
 export interface CheckboxProps extends InputProps<unknown> {
-  checked: boolean
-  value: unknown
-  uncheckedValue: unknown
+  checked: boolean,
+  value: unknown,
+  uncheckedValue: unknown,
 }
 
 export function useVModel (props: CheckboxProps) {
@@ -32,14 +34,12 @@ export function useVModel (props: CheckboxProps) {
 
       if (Array.isArray(props.modelValue)) {
         if (value) {
-          if (!valueIn(props.modelValue, newValue)) emit('update:modelValue', [...props.modelValue, newValue])
-        } else {
-          emit(
-            'update:modelValue',
-            props.modelValue.filter((old) => !isEqual(old, checked)),
-          )
-        }
-      } else emit('update:modelValue', newValue)
+          if (!valueIn(props.modelValue, newValue))
+            emit('update:modelValue', [...props.modelValue, newValue])
+        } else
+          emit('update:modelValue', props.modelValue.filter((old) => !isEqual(old, checked)))
+      } else
+        emit('update:modelValue', newValue)
 
       emit('change', value)
     },
diff --git a/components/dropdown/DropdownGroup.vue b/components/dropdown/DropdownGroup.vue
index 3b4384abb1..32553f4735 100644
--- a/components/dropdown/DropdownGroup.vue
+++ b/components/dropdown/DropdownGroup.vue
@@ -90,7 +90,7 @@ export default defineComponent({
     },
   },
   setup (props, { slots }) {
-    const context    = inject(DROPDOWN_TREE)
+    const context    = inject(DROPDOWN_TREE, undefined, true)
     const transition = ref<'slide-left' | 'slide-right' | 'none'>('slide-left')
 
     const isRoot = computed(() => {
diff --git a/components/input/use-input.ts b/components/input/use-input.ts
index 7c3c8a98d5..4d84f2c887 100644
--- a/components/input/use-input.ts
+++ b/components/input/use-input.ts
@@ -4,7 +4,7 @@ import {
 } from 'vue-demi'
 
 export interface InputProps<V = string> {
-  modelValue: V
+  modelValue: V,
 }
 
 export function useVModel<V> (props: InputProps<V>): Ref<V> {
diff --git a/components/overlay/utils/use-loading.spec.ts b/components/overlay/utils/use-loading.spec.ts
index 312a795e9c..c7bf883c76 100644
--- a/components/overlay/utils/use-loading.spec.ts
+++ b/components/overlay/utils/use-loading.spec.ts
@@ -1,9 +1,7 @@
 import { vi } from 'vitest'
 import { nextTick } from 'vue-demi'
 import useLoading from './use-loading'
-
-// eslint-disable-next-line @typescript-eslint/promise-function-async
-const delay = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms))
+import { delay } from 'nanodelay'
 
 beforeEach(() => {
   vi.useFakeTimers()
diff --git a/components/overlay/utils/use-loading.ts b/components/overlay/utils/use-loading.ts
index 60e9d12725..86f459b29a 100644
--- a/components/overlay/utils/use-loading.ts
+++ b/components/overlay/utils/use-loading.ts
@@ -2,7 +2,7 @@ import { tryOnMounted } from '@vueuse/shared'
 import { computed, ref } from 'vue-demi'
 
 export interface LoadingOptions {
-  elapsed: number | boolean
+  elapsed: number | boolean,
 }
 
 export default function useLoading (options_?: LoadingOptions) {
diff --git a/components/select/Select.vue b/components/select/Select.vue
index e4662e6c73..8022704c99 100644
--- a/components/select/Select.vue
+++ b/components/select/Select.vue
@@ -3,10 +3,12 @@
     v-model="isOpen"
     class="select"
     data-testid="select"
+    aria-label="select"
     :class="classNames">
     <template #activator>
       <Input
         v-model="search"
+        data-testid="select-search"
         class="select__search"
         :placeholder="placeholder"
         :disabled="disabled"
@@ -15,7 +17,9 @@
     </template>
 
     <template v-if="!isLoading && items.length === 0">
-      <div class="select__empty">
+      <div
+        data-testid="select-item"
+        class="select__empty">
         <slot name="empty">
           No Data
         </slot>
@@ -26,13 +30,16 @@
       <DropdownItem
         v-for="(item, i) in items"
         :key="i"
+        data-testid="select-item"
         :class="{ selected: isSelected(item) }"
         @click="select(item)">
         <slot
           name="option"
           :item="item">
           <div class="select__option">
-            <span class="select__option-text">{{ item.text }}</span>
+            <span class="select__option-text">
+              {{ item.text }}
+            </span>
             <IconCheck
               class="select__option-checked" />
           </div>
@@ -41,7 +48,9 @@
     </template>
 
     <template v-if="isLoading">
-      <div class="select__loading">
+      <div
+        data-testid="select-loading"
+        class="select__loading">
         <slot name="loading">
           <IconLoading
             width="14"
@@ -126,7 +135,7 @@ export default defineComponent({
   setup (props, { emit }) {
     const keyword   = ref('')
     const isOpen    = ref(false)
-    const isLoading = useLoading()
+    const isLoading = useLoading({ elapsed: false })
     const context   = {
       props,
       keyword,
diff --git a/components/select/__mocks__/use-on-scroll.ts b/components/select/__mocks__/use-on-scroll.ts
new file mode 100644
index 0000000000..03d8a08977
--- /dev/null
+++ b/components/select/__mocks__/use-on-scroll.ts
@@ -0,0 +1,10 @@
+export const handlers: Array<() => void> = []
+
+export function triggerScroll () {
+  for (const handler of handlers)
+    handler()
+}
+
+export function onScrollBottom (_: unknown, handler: () => void): void {
+  handlers.push(handler)
+}
diff --git a/components/select/adapter/adapter.spec.ts b/components/select/adapter/adapter.spec.ts
new file mode 100644
index 0000000000..d7911a7020
--- /dev/null
+++ b/components/select/adapter/adapter.spec.ts
@@ -0,0 +1,88 @@
+import { SelectProps, SelectItem } from '../use-select'
+import { useOptionsProp } from './adapter'
+
+it('should be able to convert Array of String into Array of SelectItem', () => {
+  const props: SelectProps = {
+    modelValue: undefined,
+    selected  : undefined,
+    options   : [
+      'Apple',
+      'Grape',
+      'Orange',
+    ],
+  }
+
+  const result                 = useOptionsProp(props)
+  const expected: SelectItem[] = [
+    {
+      text : 'Apple',
+      value: 'Apple',
+    },
+    {
+      text : 'Grape',
+      value: 'Grape',
+    },
+    {
+      text : 'Orange',
+      value: 'Orange',
+    },
+  ]
+
+  expect(result.value).toBeArray()
+  expect(result.value).toStrictEqual(expected)
+})
+
+it('should be return as is if options is already an Array of SelectItem', () => {
+  const props: SelectProps = {
+    modelValue: undefined,
+    selected  : undefined,
+    options   : [
+      {
+        text : 'Apple',
+        value: 'Apple',
+      },
+      {
+        text : 'Grape',
+        value: 'Grape',
+      },
+      {
+        text : 'Orange',
+        value: 'Orange',
+      },
+    ],
+  }
+
+  const result                 = useOptionsProp(props)
+  const expected: SelectItem[] = [
+    {
+      text : 'Apple',
+      value: 'Apple',
+    },
+    {
+      text : 'Grape',
+      value: 'Grape',
+    },
+    {
+      text : 'Orange',
+      value: 'Orange',
+    },
+  ]
+
+  expect(result.value).toBeArray()
+  expect(result.value).toStrictEqual(expected)
+})
+
+it('should return empty array if props is not valid array', () => {
+  const props: SelectProps = {
+    modelValue: undefined,
+    selected  : undefined,
+    // @ts-expect-error
+    options   : {},
+  }
+
+  const result                 = useOptionsProp(props)
+  const expected: SelectItem[] = []
+
+  expect(result.value).toBeArray()
+  expect(result.value).toStrictEqual(expected)
+})
diff --git a/components/select/adapter/adapter.ts b/components/select/adapter/adapter.ts
index 9233a8d7d3..fd5ed982a8 100644
--- a/components/select/adapter/adapter.ts
+++ b/components/select/adapter/adapter.ts
@@ -2,14 +2,14 @@ import { computed, Ref } from 'vue-demi'
 import { SelectItem, SelectProps } from '../use-select'
 
 export interface AdapterContext {
-  props: SelectProps
-  keyword: Ref<string>
-  isOpen: Ref<boolean>
-  isLoading: Ref<boolean>
+  props: SelectProps,
+  keyword: Ref<string>,
+  isOpen: Ref<boolean>,
+  isLoading: Ref<boolean>,
 }
 
 export interface Adapter {
-  setup: (context: AdapterContext) => Ref<SelectItem[]>
+  setup: (context: AdapterContext) => Ref<SelectItem[]>,
 }
 
 /**
diff --git a/components/select/adapter/async-adapter.spec.ts b/components/select/adapter/async-adapter.spec.ts
new file mode 100644
index 0000000000..1fbe0bd6b0
--- /dev/null
+++ b/components/select/adapter/async-adapter.spec.ts
@@ -0,0 +1,282 @@
+import { onScrollBottom, triggerScroll } from '../__mocks__/use-on-scroll'
+import { fireEvent, render } from '@testing-library/vue'
+import { vi } from 'vitest'
+import Select from '../Select.vue'
+import defineAsyncAdapter, { LoadFn } from './async-adapter'
+import { nextTick, ref } from 'vue-demi'
+import { delay } from 'nanodelay'
+
+vi.mock('../utils/use-on-scroll', () => {
+  return { onScrollBottom: onScrollBottom }
+})
+
+function createMockAdapter () {
+  const value           = ref('Apple')
+  const handler: LoadFn = vi.fn(async (keyword, page, perPage) => {
+    await delay(1)
+
+    if (keyword === 'fail')
+      throw new Error('Mock Error')
+
+    if (page >= 2)
+      return []
+
+    const result = []
+    const start  = (page - 1) * perPage
+    const until  = start + perPage
+
+    for (let i = start + 1; i <= until; ++i) {
+      result.push({
+        text : `${value.value} ${i}`,
+        value: i,
+      })
+    }
+
+    return result
+  })
+
+  const adapter = defineAsyncAdapter(handler, [value])
+
+  return {
+    value,
+    handler,
+    adapter,
+  }
+}
+
+it('should be call Async Handler', async () => {
+  const { adapter, handler } = createMockAdapter()
+  const screen               = render({
+    components: { Select },
+    template  : `
+      <Select
+        :adapter="adapter" />
+    `,
+    setup () {
+      return { adapter }
+    },
+  })
+
+  const select = screen.queryByTestId('select')
+
+  expect(select).toBeInTheDocument()
+  expect(handler).toBeCalled()
+  expect(handler).toBeCalledWith('', 1, 20)
+})
+
+it('should be show loading if request is not finish', async () => {
+  const { adapter, handler } = createMockAdapter()
+  const screen               = render({
+    components: { Select },
+    template  : `
+      <Select
+        :adapter="adapter" />
+    `,
+    setup () {
+      return { adapter }
+    },
+  })
+
+  const select = screen.queryByTestId('select')
+
+  await fireEvent.click(select)
+
+  const loading = screen.queryByTestId('select-loading')
+
+  expect(handler).toBeCalledTimes(1)
+  expect(select).toBeInTheDocument()
+  expect(loading).toBeInTheDocument()
+
+  await delay(2)
+
+  expect(handler).toBeCalledTimes(1)
+  expect(loading).not.toBeInTheDocument()
+})
+
+it('should be show loading user start typing', async () => {
+  const { adapter, handler } = createMockAdapter()
+  const screen               = render({
+    components: { Select },
+    template  : `
+      <Select
+        :adapter="adapter" />
+    `,
+    setup () {
+      return { adapter }
+    },
+  })
+
+  const select = screen.queryByTestId('select')
+  const search = screen.queryByTestId('select-search')
+
+  await delay(2)
+  await fireEvent.click(select)
+
+  expect(handler).toBeCalledTimes(1)
+  expect(select).toBeInTheDocument()
+
+  await fireEvent.focus(search)
+  await fireEvent.update(search, 'nn')
+
+  const loading = screen.queryByTestId('select-loading')
+
+  expect(loading).toBeInTheDocument()
+})
+
+it('should be reload when user finish typing', async () => {
+  const { adapter, handler } = createMockAdapter()
+  const screen               = render({
+    components: { Select },
+    template  : `
+      <Select
+        :adapter="adapter" />
+    `,
+    setup () {
+      return { adapter }
+    },
+  })
+
+  const select = screen.queryByTestId('select')
+  const search = screen.queryByTestId('select-search')
+
+  await delay(2)
+  await fireEvent.click(select)
+
+  expect(handler).toBeCalledTimes(1)
+  expect(select).toBeInTheDocument()
+
+  vi.useFakeTimers()
+
+  await fireEvent.focus(search)
+  await fireEvent.update(search, 'nn')
+
+  vi.advanceTimersByTime(501)
+
+  expect(handler).toBeCalledTimes(2)
+  expect(handler).toBeCalledWith('nn', 1, 20)
+
+  vi.useRealTimers()
+})
+
+it('should load next items if user scroll to bottom', async () => {
+  const { adapter, handler } = createMockAdapter()
+  const screen               = render({
+    components: { Select },
+    template  : `
+      <Select
+        :adapter="adapter" />
+    `,
+    setup () {
+      return { adapter }
+    },
+  })
+
+  const select = screen.queryByTestId('select')
+
+  await delay(2)
+  await fireEvent.click(select)
+
+  expect(handler).toBeCalledTimes(1)
+  expect(select).toBeInTheDocument()
+
+  triggerScroll()
+
+  expect(handler).toBeCalledTimes(2)
+  expect(handler).toBeCalledWith('', 2, 20)
+})
+
+it('should not load next items if all items already loaded (finished loaded)', async () => {
+  const { adapter, handler } = createMockAdapter()
+  const screen               = render({
+    components: { Select },
+    template  : `
+      <Select
+        :adapter="adapter" />
+    `,
+    setup () {
+      return { adapter }
+    },
+  })
+
+  const select = screen.queryByTestId('select')
+
+  await delay(2)
+  await fireEvent.click(select)
+
+  expect(handler).toBeCalledTimes(1)
+  expect(select).toBeInTheDocument()
+
+  triggerScroll()
+
+  expect(handler).toBeCalledTimes(2)
+  expect(handler).toBeCalledWith('', 2, 20)
+
+  triggerScroll()
+
+  expect(handler).toBeCalledTimes(2)
+})
+
+it('should reload if handler have track deps, and the deps is changed', async () => {
+  const { adapter, handler, value } = createMockAdapter()
+  const screen                      = render({
+    components: { Select },
+    template  : `
+      <Select
+        :adapter="adapter" />
+    `,
+    setup () {
+      return { adapter }
+    },
+  })
+
+  const select = screen.queryByTestId('select')
+
+  await delay(2)
+  await fireEvent.click(select)
+
+  expect(handler).toBeCalledTimes(1)
+  expect(select).toBeInTheDocument()
+
+  value.value = 'Grape'
+  await nextTick()
+
+  expect(handler).toBeCalledTimes(2)
+  expect(handler).toBeCalledWith('', 1, 20)
+})
+
+it('should no nothing if handler throw an error', async () => {
+  const { adapter, handler } = createMockAdapter()
+  const screen               = render({
+    components: { Select },
+    template  : `
+      <Select
+        :adapter="adapter" />
+    `,
+    setup () {
+      return { adapter }
+    },
+  })
+
+  const select = screen.queryByTestId('select')
+  const search = screen.queryByTestId('select-search')
+
+  await delay(2)
+  await fireEvent.click(select)
+
+  expect(handler).toBeCalledTimes(1)
+  expect(select).toBeInTheDocument()
+
+  vi.useFakeTimers()
+
+  await fireEvent.focus(search)
+  await fireEvent.update(search, 'fail')
+
+  vi.advanceTimersByTime(501)
+
+  const loading = screen.queryByTestId('select-loading')
+
+  vi.advanceTimersByTime(2)
+  await nextTick()
+
+  expect(loading).not.toBeInTheDocument()
+})
diff --git a/components/select/adapter/async-adapter.ts b/components/select/adapter/async-adapter.ts
index 9bc1490266..2c8709f9fc 100644
--- a/components/select/adapter/async-adapter.ts
+++ b/components/select/adapter/async-adapter.ts
@@ -1,23 +1,19 @@
-import { computed } from 'vue'
-import { useEventListener } from '@vueuse/core'
-import { tryOnMounted, watchDebounced } from '@vueuse/shared'
+import { tryOnMounted } from '@vueuse/shared'
 import { SelectItem } from '../use-select'
 import { defineAdapter } from './adapter'
+import { onFinishTyping, onStartTyping } from '../utils/use-on-typing'
 import {
   getCurrentInstance,
   ref,
   watch,
-  WatchSource,
 } from 'vue-demi'
+import { onScrollBottom } from '../utils/use-on-scroll'
 
 export type LoadFn = (keyword: string, page: number, perPage: number) => Promise<SelectItem[]>
 
-export interface AsyncHandler {
-  load: LoadFn
-  watch: WatchSource
-}
+export type WatchDeps = Parameters<typeof watch>[0]
 
-export default function defineAsyncAdapter (handler: LoadFn | AsyncHandler) {
+export default function defineAsyncAdapter (loadFn: LoadFn, deps?: WatchDeps) {
   return defineAdapter({
     setup ({ isLoading, keyword }) {
       const options  = ref([])
@@ -28,22 +24,18 @@ export default function defineAsyncAdapter (handler: LoadFn | AsyncHandler) {
       const vm      = getCurrentInstance()
       const menuDiv = ref<HTMLDivElement>()
 
-      const loadFn = computed(() => {
-        return typeof handler !== 'function' ? handler.load : handler
-      })
-
       function load () {
         isLoading.value = true
 
-        loadFn
-          .value(keyword.value, page.value, 20)
+        loadFn(keyword.value, page.value, 20)
           .then((result) => {
-            if (result && result.length > 0) {
+            if (Array.isArray(result) && result.length > 0) {
               options.value.push(...result)
               page.value++
             } else
               isFinish.value = true
           })
+          .catch(console.error)
           .finally(() => {
             isLoading.value = false
           })
@@ -55,43 +47,43 @@ export default function defineAsyncAdapter (handler: LoadFn | AsyncHandler) {
         options.value  = []
       }
 
-      watch(keyword, () => {
+      if (deps !== undefined) {
+        watch(deps, () => {
+          reset()
+          load()
+        })
+      }
+
+      tryOnMounted(() => {
+        if (vm?.proxy?.$el) {
+          menuDiv.value = (vm.proxy.$el as HTMLElement)
+            .querySelector('.dropdown__menu')
+        }
+
+        load()
+      })
+
+      onStartTyping(keyword, () => {
         isTyping.value = true
+
         reset()
       })
 
-      watchDebounced(keyword, () => {
+      onFinishTyping(keyword, () => {
         isTyping.value = false
 
         load()
-      }, { debounce: 500 })
+      })
 
       watch(isTyping, (value) => {
-        // syncRef isTyping to isLoading
         isLoading.value = value
       })
 
-      if (typeof handler !== 'function' && handler.watch) {
-        watch(handler.watch, () => {
-          reset()
+      onScrollBottom(menuDiv, () => {
+        if (!isLoading.value && !isFinish.value)
           load()
-        })
-      }
-
-      tryOnMounted(() => {
-        menuDiv.value = (vm.proxy.$el as HTMLElement).querySelector('.dropdown__menu')
-
-        load()
       })
 
-      useEventListener(menuDiv, 'scroll', (event) => {
-        const target   = event.target as HTMLDivElement
-        const isBottom = (target.scrollTop + target.offsetHeight) >= target.scrollHeight
-
-        if (isBottom && !isLoading.value && !isFinish.value)
-          load()
-      }, { passive: true })
-
       return options
     },
   })
diff --git a/components/select/adapter/basic-adapter.spec.ts b/components/select/adapter/basic-adapter.spec.ts
new file mode 100644
index 0000000000..3c4dbfbca7
--- /dev/null
+++ b/components/select/adapter/basic-adapter.spec.ts
@@ -0,0 +1,101 @@
+import { fireEvent, render } from '@testing-library/vue'
+import Select from '../Select.vue'
+import Adapter from './basic-adapter'
+
+it('should be able to display items from props `options`', async () => {
+  const screen = render({
+    components: { Select },
+    template  : `
+      <Select
+        :adapter="adapter"
+        :options="options" />
+    `,
+    setup () {
+      const options = [
+        {
+          text : 'Apple',
+          value: 'Apple',
+        },
+        {
+          text : 'Grape',
+          value: 'Grape',
+        },
+        {
+          text : 'Orange',
+          value: 'Orange',
+        },
+      ]
+
+      return {
+        options,
+        adapter: Adapter,
+      }
+    },
+  })
+
+  const select = screen.queryByTestId('select')
+
+  await fireEvent.click(select)
+
+  const items  = screen.queryAllByTestId('select-item')
+  const apple  = screen.queryByText('Apple')
+  const grape  = screen.queryByText('Grape')
+  const orange = screen.queryByText('Orange')
+
+  expect(select).toBeInTheDocument()
+  expect(items).toHaveLength(3)
+
+  expect(apple).toBeInTheDocument()
+  expect(grape).toBeInTheDocument()
+  expect(orange).toBeInTheDocument()
+})
+
+it('should be able to filter (search) items by keyword', async () => {
+  const screen = render({
+    components: { Select },
+    template  : `
+      <Select
+        :adapter="adapter"
+        :options="options" />
+    `,
+    setup () {
+      const options = [
+        {
+          text : 'Apple',
+          value: 'Apple',
+        },
+        {
+          text : 'Grape',
+          value: 'Grape',
+        },
+        {
+          text : 'Orange',
+          value: 'Orange',
+        },
+      ]
+
+      return {
+        options,
+        adapter: Adapter,
+      }
+    },
+  })
+
+  const select = screen.queryByTestId('select')
+  const search = screen.queryByTestId('select-search')
+
+  await fireEvent.click(select)
+
+  expect(select).toBeInTheDocument()
+
+  expect(screen.queryByText('Apple')).toBeInTheDocument()
+  expect(screen.queryByText('Grape')).toBeInTheDocument()
+  expect(screen.queryByText('Orange')).toBeInTheDocument()
+
+  await fireEvent.focus(search)
+  await fireEvent.update(search, 'orange')
+
+  expect(screen.queryByText('Apple')).not.toBeInTheDocument()
+  expect(screen.queryByText('Grape')).not.toBeInTheDocument()
+  expect(screen.queryByText('Orange')).toBeInTheDocument()
+})
diff --git a/components/select/adapter/fuzzy-adapter.spec.ts b/components/select/adapter/fuzzy-adapter.spec.ts
new file mode 100644
index 0000000000..23d5bc197e
--- /dev/null
+++ b/components/select/adapter/fuzzy-adapter.spec.ts
@@ -0,0 +1,101 @@
+import { fireEvent, render } from '@testing-library/vue'
+import Select from '../Select.vue'
+import Adapter from './fuzzy-adapter'
+
+it('should be able to display items from props `options`', async () => {
+  const screen = render({
+    components: { Select },
+    template  : `
+      <Select
+        :adapter="adapter"
+        :options="options" />
+    `,
+    setup () {
+      const options = [
+        {
+          text : 'Apple',
+          value: 'Apple',
+        },
+        {
+          text : 'Grape',
+          value: 'Grape',
+        },
+        {
+          text : 'Orange',
+          value: 'Orange',
+        },
+      ]
+
+      return {
+        options,
+        adapter: Adapter,
+      }
+    },
+  })
+
+  const select = screen.queryByTestId('select')
+
+  await fireEvent.click(select)
+
+  const items  = screen.queryAllByTestId('select-item')
+  const apple  = screen.queryByText('Apple')
+  const grape  = screen.queryByText('Grape')
+  const orange = screen.queryByText('Orange')
+
+  expect(select).toBeInTheDocument()
+  expect(items).toHaveLength(3)
+
+  expect(apple).toBeInTheDocument()
+  expect(grape).toBeInTheDocument()
+  expect(orange).toBeInTheDocument()
+})
+
+it('should be able to filter (search) items by keyword', async () => {
+  const screen = render({
+    components: { Select },
+    template  : `
+      <Select
+        :adapter="adapter"
+        :options="options" />
+    `,
+    setup () {
+      const options = [
+        {
+          text : 'Apple',
+          value: 'Apple',
+        },
+        {
+          text : 'Grape',
+          value: 'Grape',
+        },
+        {
+          text : 'Banana',
+          value: 'Banana',
+        },
+      ]
+
+      return {
+        options,
+        adapter: Adapter,
+      }
+    },
+  })
+
+  const select = screen.queryByTestId('select')
+  const search = screen.queryByTestId('select-search')
+
+  await fireEvent.click(select)
+
+  expect(select).toBeInTheDocument()
+
+  expect(screen.queryByText('Apple')).toBeInTheDocument()
+  expect(screen.queryByText('Grape')).toBeInTheDocument()
+  expect(screen.queryByText('Banana')).toBeInTheDocument()
+
+  await fireEvent.focus(search)
+  await fireEvent.update(search, 'nn')
+
+  expect(screen.queryByText('Apple')).not.toBeInTheDocument()
+  expect(screen.queryByText('Grape')).not.toBeInTheDocument()
+  expect(screen.queryByText('Banana')).toBeInTheDocument()
+})
diff --git a/components/select/adapter/fuze-adapter.ts b/components/select/adapter/fuzzy-adapter.ts
similarity index 91%
rename from components/select/adapter/fuze-adapter.ts
rename to components/select/adapter/fuzzy-adapter.ts
index d76a7955f7..af6f016ad2 100644
--- a/components/select/adapter/fuze-adapter.ts
+++ b/components/select/adapter/fuzzy-adapter.ts
@@ -14,7 +14,8 @@ export default defineAdapter({
 
     const normalizeOptions = useOptionsProp(props)
     const filteredOptions  = computed(() => {
-      if (!keyword.value) return normalizeOptions.value
+      if (!keyword.value)
+        return normalizeOptions.value
 
       return fuse.value.search(keyword.value).map((result) => {
         return result.item
diff --git a/components/select/component.md b/components/select/component.md
index 4797b8abfe..83bc66221a 100644
--- a/components/select/component.md
+++ b/components/select/component.md
@@ -1,35 +1,32 @@
 <script setup>
   import Select from "./Select.vue"
-  import FuzeAdapter from "../select/adapter/fuze-adapter"
+  import FuzzyAdapter from "../select/adapter/fuzzy-adapter"
   import defineAsyncAdapter from "./adapter/async-adapter"
   import { ref } from "vue-demi"
 
   const value = ref('')
   const valueA = ref('')
-  const asyncAdapter = defineAsyncAdapter({
-    watch: [value],
-    load : (keyword, page, perPage) => {
-      return new Promise((resolve) => {
-        setTimeout(() => {
-          if (page >= 3)
-            resolve([])
-
-          const result = []
-          const start  = (page - 1) * perPage
-          const until  = start + perPage
-
-          for (let i = start + 1; i <= until; ++i) {
-            result.push({
-              text : `${value.value} ${i}`,
-              value: i,
-            })
-          }
-
-          resolve(result)
-        }, 1000)
-      })
-    }
-  })
+  const asyncAdapter = defineAsyncAdapter((keyword, page, perPage) => {
+    return new Promise((resolve) => {
+      setTimeout(() => {
+        if (page >= 3)
+          resolve([])
+
+        const result = []
+        const start  = (page - 1) * perPage
+        const until  = start + perPage
+
+        for (let i = start + 1; i <= until; ++i) {
+          result.push({
+            text : `${value.value} ${i}`,
+            value: i,
+          })
+        }
+
+        resolve(result)
+      }, 1000)
+    })
+  }, [value])
 </script>
 
 
@@ -46,7 +43,7 @@
 **Result:** <pre><code>{{ value }}</code></pre>
 
 <preview>
-  <Select placeholder="Coba" :options="[{ text: '🍎 Apple', value: 'Apple' }, { text: '🍇 Grape', value: 'Grape' }, { text: '🍌 Banana', value: 'Banana'}]" v-model="value" :adapter="FuzeAdapter" />
+  <Select placeholder="Coba" :options="[{ text: '🍎 Apple', value: 'Apple' }, { text: '🍇 Grape', value: 'Grape' }, { text: '🍌 Banana', value: 'Banana'}]" v-model="value" :adapter="FuzzyAdapter" />
 </preview>
 
 <preview>
diff --git a/components/select/use-select.ts b/components/select/use-select.ts
index c3286c282c..78b0b32561 100644
--- a/components/select/use-select.ts
+++ b/components/select/use-select.ts
@@ -1,12 +1,12 @@
 export interface SelectItem {
-  text: string
-  value: unknown
+  text: string,
+  value: unknown,
 }
 
 export interface SelectProps {
-  modelValue: unknown
-  selected: SelectItem
-  [key: string]: unknown
+  modelValue: unknown,
+  selected?: SelectItem,
+  options?: SelectItem[] | string[],
 }
 
 export function defineOptions (options: SelectItem[]): SelectItem[] {
diff --git a/components/select/utils/use-on-scroll.ts b/components/select/utils/use-on-scroll.ts
new file mode 100644
index 0000000000..f9fc2c90a5
--- /dev/null
+++ b/components/select/utils/use-on-scroll.ts
@@ -0,0 +1,12 @@
+import { useEventListener } from '@vueuse/core'
+import { Ref } from 'vue-demi'
+
+export function onScrollBottom (element: Ref<HTMLElement>, handler: (event: Event) => void) {
+  useEventListener(element, 'scroll', (event) => {
+    const target   = event.target as HTMLDivElement
+    const isBottom = (target.scrollTop + target.offsetHeight) >= target.scrollHeight
+
+    if (isBottom)
+      handler(event)
+  }, { passive: true })
+}
diff --git a/components/select/utils/use-on-typing.ts b/components/select/utils/use-on-typing.ts
new file mode 100644
index 0000000000..d553efe47b
--- /dev/null
+++ b/components/select/utils/use-on-typing.ts
@@ -0,0 +1,10 @@
+import { watchDebounced } from '@vueuse/shared'
+import { Ref, watch } from 'vue-demi'
+
+export function onStartTyping (model: Ref<string>, handler: () => void) {
+  watch(model, handler)
+}
+
+export function onFinishTyping (model: Ref<string>, handler: () => void, debounceTime = 500) {
+  watchDebounced(model, handler, { debounce: debounceTime })
+}
diff --git a/components/toast/use-toast.ts b/components/toast/use-toast.ts
index a1434e5063..0f79f8bb65 100644
--- a/components/toast/use-toast.ts
+++ b/components/toast/use-toast.ts
@@ -6,12 +6,12 @@ export type ToastTypeVariant = 'info' | 'success' | 'warn' | 'error'
 export type ToastStyleVariant = 'simple' | 'filled'
 
 export interface ToastOption {
-  type?: ToastTypeVariant
-  variant?: ToastStyleVariant
-  title: string
-  text: string
-  duration?: number
-  toastClass?: string | string[]
+  type?: ToastTypeVariant,
+  variant?: ToastStyleVariant,
+  title: string,
+  text: string,
+  duration?: number,
+  toastClass?: string | string[],
 }
 
 export default async function showToast (option: ToastOption) {
diff --git a/package.json b/package.json
index 8810a4f697..12318569c3 100644
--- a/package.json
+++ b/package.json
@@ -40,6 +40,7 @@
     "husky": "8.0.1",
     "jest-extended": "2.0.0",
     "lint-staged": "12.4.2",
+    "nanodelay": "^2.0.2",
     "postcss": "8.4.14",
     "postcss-nested": "5.0.6",
     "tailwindcss": "3.0.24",
diff --git a/tsconfig.json b/tsconfig.json
index 51971cd1a8..a4d71782b0 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -13,6 +13,12 @@
     "downlevelIteration": true,
     "lib": ["esnext", "dom"]
   },
+  "include": [
+    "components/**/*.ts",
+    "components/**/*.d.ts",
+    "components/**/*.tsx",
+    "components/**/*.vue"
+  ],
   "exclude": [
     "node_modules",
     "dist",
diff --git a/yarn.lock b/yarn.lock
index 95feda6586..be99e3959c 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -446,6 +446,7 @@ __metadata:
     husky: 8.0.1
     jest-extended: 2.0.0
     lint-staged: 12.4.2
+    nanodelay: ^2.0.2
     postcss: 8.4.14
     postcss-nested: 5.0.6
     tabbable: 5.3.3
@@ -4128,6 +4129,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"nanodelay@npm:^2.0.2":
+  version: 2.0.2
+  resolution: "nanodelay@npm:2.0.2"
+  checksum: 459fb58e3b9d262a16a5f5ab63ff71ca1f83a61c712b5ba7495d03d4d28dc96dcef3bbc282e277187d05e4ccfa7345e7c0082dcc76ae9790bb416eb2f6e627ae
+  languageName: node
+  linkType: hard
+
 "nanoid@npm:^3.3.1":
   version: 3.3.1
   resolution: "nanoid@npm:3.3.1"