diff --git a/lib/components/SDropdownSection.vue b/lib/components/SDropdownSection.vue
index 6d6c701e..d285caa0 100644
--- a/lib/components/SDropdownSection.vue
+++ b/lib/components/SDropdownSection.vue
@@ -21,6 +21,9 @@ defineProps<{
     :search="section.search"
     :selected="section.selected"
     :options="section.options"
+    :query="section.query"
+    :active="section.active"
+    :option-id-prefix="section.optionIdPrefix"
     :on-click="section.onClick"
   />
   <SDropdownSectionDateRange
diff --git a/lib/components/SDropdownSectionFilter.vue b/lib/components/SDropdownSectionFilter.vue
index d6a71f00..dabdbd59 100644
--- a/lib/components/SDropdownSectionFilter.vue
+++ b/lib/components/SDropdownSectionFilter.vue
@@ -7,12 +7,15 @@ import {
   type DropdownSectionFilterSelectedValue
 } from '../composables/Dropdown'
 import { useTrans } from '../composables/Lang'
+import { smartComputed } from '../support/Reactivity'
 import SDropdownSectionFilterItem from './SDropdownSectionFilterItem.vue'
 
 const props = defineProps<{
-  search?: boolean
+  search?: boolean | 'inline'
   selected: MaybeRef<DropdownSectionFilterSelectedValue>
   options: MaybeRef<DropdownSectionFilterOption[]>
+  active?: DropdownSectionFilterSelectedValue
+  optionIdPrefix?: string
   onClick?(value: any): void
 }>()
 
@@ -30,29 +33,35 @@ const { t } = useTrans({
 const input = ref<HTMLElement | null>(null)
 const query = ref('')
 
-const enabledOptions = computed(() => {
+const enabledOptions = smartComputed(() => {
   return unref(props.options).filter((o) => !o.disabled)
 })
 
 const fuse = computed(() => {
-  return new Fuse(unref(enabledOptions), { keys: ['label'] })
+  return new Fuse(enabledOptions.value, { keys: ['label'] })
 })
 
 const filteredOptions = computed(() => {
-  return !props.search || !query.value
-    ? unref(enabledOptions)
+  return props.search !== true || !query.value
+    ? enabledOptions.value
     : fuse.value.search(query.value).map((r) => r.item)
 })
 
 onMounted(() => {
-  input.value?.focus()
+  if (props.search === true) {
+    input.value?.focus()
+  }
 })
 
-function isActive(value: any) {
+function isSelected(value: any) {
   const selected = unref(props.selected)
   return Array.isArray(selected) ? selected.includes(value) : selected === value
 }
 
+function isActive(value: any) {
+  return props.active === value
+}
+
 function focusPrev(event: any) {
   event.target.parentNode.previousElementSibling?.firstElementChild?.focus()
 }
@@ -65,25 +74,32 @@ function handleClick(option: DropdownSectionFilterOption, value: any) {
   option.onClick && option.onClick(value)
   props.onClick && props.onClick(value)
 }
+
+function getOptionId(index: number) {
+  return props.optionIdPrefix ? `${props.optionIdPrefix}-${index}` : undefined
+}
 </script>
 
 <template>
   <div class="SDropdownSectionFilter">
-    <div v-if="search" class="search">
+    <div v-if="search === true" class="search">
       <input ref="input" v-model="query" class="input" :placeholder="t.i_ph">
     </div>
 
     <ul v-if="filteredOptions.length" class="list">
-      <li v-for="option in filteredOptions" :key="option.label" class="item">
+      <li v-for="(option, i) in filteredOptions" :key="option.label" class="item">
         <button
+          :id="getOptionId(i)"
           class="button"
-          :class="{ active: isActive(option.value) }"
+          :class="{ selected: isSelected(option.value), active: isActive(option.value) }"
+          :role="optionIdPrefix ? 'option' : undefined"
+          :aria-selected="optionIdPrefix ? isSelected(option.value) : undefined"
           tabindex="0"
           @keyup.up.prevent="focusPrev"
           @keyup.down.prevent="focusNext"
           @click="handleClick(option, option.value)"
         >
-          <span v-if="Array.isArray(unref(selected))" class="checkbox">
+          <span v-if="Array.isArray(selected)" class="checkbox">
             <span class="checkbox-box">
               <IconCheck class="checkbox-icon" />
             </span>
@@ -149,7 +165,8 @@ function handleClick(option: DropdownSectionFilterOption, value: any) {
   text-align: left;
   transition: color 0.25s, background-color 0.25s;
 
-  &:hover {
+  &:hover,
+  &.active {
     background-color: var(--c-bg-mute-1);
   }
 }
@@ -171,7 +188,7 @@ function handleClick(option: DropdownSectionFilterOption, value: any) {
   background-color: var(--input-bg-color);
   transition: border-color 0.1s, background-color 0.1s;
 
-  .button.active & {
+  .button.selected & {
     border-color: var(--c-fg-info-1);
     background-color: var(--c-fg-info-1);
   }
@@ -185,7 +202,7 @@ function handleClick(option: DropdownSectionFilterOption, value: any) {
   opacity: 0;
   transition: opacity 0.25s;
 
-  .button.active & {
+  .button.selected & {
     opacity: 1;
   }
 }
@@ -202,7 +219,7 @@ function handleClick(option: DropdownSectionFilterOption, value: any) {
   background-color: var(--input-bg-color);
   transition: border-color 0.25s;
 
-  .button.active & {
+  .button.selected & {
     border-color: var(--c-border-info-1);
   }
 }
@@ -223,7 +240,7 @@ function handleClick(option: DropdownSectionFilterOption, value: any) {
   transform: scale(0);
   transition: opacity 0.25s, transform 0.1s;
 
-  .button.active & {
+  .button.selected & {
     opacity: 1;
     transform: scale(0.6);
   }
diff --git a/lib/components/SInputDropdown.vue b/lib/components/SInputDropdown.vue
index 174a1862..6362f696 100644
--- a/lib/components/SInputDropdown.vue
+++ b/lib/components/SInputDropdown.vue
@@ -1,24 +1,32 @@
 <script setup lang="ts">
 import IconCaretDown from '~icons/ph/caret-down'
 import IconCaretUp from '~icons/ph/caret-up'
+import IconX from '~icons/ph/x'
+import Fuse from 'fuse.js'
 import xor from 'lodash-es/xor'
-import { computed, ref } from 'vue'
+import { computed, nextTick, ref, useId, watch } from 'vue'
 import { type DropdownSectionFilter, useManualDropdownPosition } from '../composables/Dropdown'
 import { useFlyout } from '../composables/Flyout'
 import { useTrans } from '../composables/Lang'
+import { smartComputed } from '../support/Reactivity'
+import SAvatar from './SAvatar.vue'
 import SDropdown from './SDropdown.vue'
 import SInputBase, { type Props as BaseProps } from './SInputBase.vue'
 import SInputDropdownItem from './SInputDropdownItem.vue'
 
 export type { Color, Size } from './SInputBase.vue'
+
 export interface Props extends BaseProps {
   placeholder?: string
   options: Option[]
   position?: 'top' | 'bottom'
+  /** @deprecated use :search="false" */
   noSearch?: boolean
   nullable?: boolean
   closeOnClick?: boolean
   disabled?: boolean
+  search?: boolean | 'inline'
+  insertOnSpace?: boolean
 }
 
 export type PrimitiveValue = any
@@ -44,34 +52,76 @@ export interface OptionAvatar extends OptionBase {
   image?: string | null
 }
 
-const props = defineProps<Props>()
+const props = withDefaults(defineProps<Props>(), {
+  search: true,
+  insertOnSpace: true
+})
 
 const model = defineModel<PrimitiveValue | ArrayValue>({ required: true })
 
 const { t } = useTrans({
   en: {
-    ph: 'Select items'
+    ph: 'Select items',
+    remove: 'Remove'
   },
   ja: {
-    ph: '項目を選択してください'
+    ph: '項目を選択してください',
+    remove: '削除'
   }
 })
 
 const container = ref<HTMLDivElement>()
+const inlineInput = ref<HTMLInputElement>()
+const inlineQuery = ref('')
+const inlineActiveIndex = ref(-1)
+
+const dropdownId = useId()
 
-const { isOpen, open } = useFlyout(container)
+const { isOpen, open, close } = useFlyout(container)
 const { inset, update: updatePosition } = useManualDropdownPosition(container, () => props.position)
 
+const isInlineSearch = computed(() => props.search === 'inline')
+
 const classes = computed(() => [
   props.size ?? 'small',
   { disabled: props.disabled }
 ])
 
+const inlineEnabledOptions = smartComputed(() => {
+  return props.options.filter((o) => !o.disabled)
+})
+
+const inlineFuse = computed(() => {
+  return new Fuse(inlineEnabledOptions.value, { keys: ['label'], threshold: 0.4 })
+})
+
+const inlineFilteredOptions = computed(() => {
+  if (!isInlineSearch.value) {
+    return inlineEnabledOptions.value
+  }
+
+  if (!inlineQuery.value) {
+    return inlineEnabledOptions.value
+  }
+
+  return inlineFuse.value.search(inlineQuery.value).map((r) => r.item)
+})
+
+const inlineActiveOption = computed(() => {
+  if (!isInlineSearch.value || inlineActiveIndex.value === -1) {
+    return null
+  }
+
+  return inlineFilteredOptions.value[inlineActiveIndex.value] ?? null
+})
+
 const dropdownOptions = computed<DropdownSectionFilter[]>(() => [{
   type: 'filter',
-  search: props.noSearch === undefined ? true : !props.noSearch,
+  search: props.search === true && !props.noSearch ? true : isInlineSearch.value ? 'inline' : undefined,
   selected: model.value,
-  options: props.options,
+  options: isInlineSearch.value ? inlineFilteredOptions.value : props.options,
+  active: inlineActiveOption.value?.value,
+  optionIdPrefix: isInlineSearch.value ? `${dropdownId}-option` : undefined,
   onClick: handleSelect
 }])
 
@@ -97,6 +147,49 @@ const removable = computed(() => {
   return !!props.nullable
 })
 
+const selectedChips = computed(() => {
+  if (Array.isArray(selected.value)) {
+    return selected.value
+  }
+
+  return selected.value ? [selected.value] : []
+})
+
+const ariaActiveDescendant = computed(() => {
+  if (!isInlineSearch.value || !inlineActiveOption.value) {
+    return undefined
+  }
+
+  return `${dropdownId}-option-${inlineActiveIndex.value}`
+})
+
+watch(inlineQuery, (value) => {
+  if (!isInlineSearch.value) {
+    return
+  }
+
+  if (!isOpen.value) {
+    handleOpen()
+  }
+
+  inlineActiveIndex.value = value ? (inlineFilteredOptions.value.length ? 0 : -1) : -1
+})
+
+watch(inlineFilteredOptions, (options) => {
+  if (!isInlineSearch.value) {
+    return
+  }
+
+  if (!options.length) {
+    inlineActiveIndex.value = -1
+    return
+  }
+
+  if (inlineActiveIndex.value >= options.length) {
+    inlineActiveIndex.value = options.length - 1
+  }
+})
+
 async function handleOpen() {
   if (!props.disabled) {
     updatePosition()
@@ -104,10 +197,32 @@ async function handleOpen() {
   }
 }
 
+function handleBoxClick() {
+  if (props.disabled) {
+    return
+  }
+
+  if (isInlineSearch.value) {
+    focusInlineInput()
+  }
+
+  handleOpen()
+}
+
+function handleBoxKeyOpen() {
+  if (!isInlineSearch.value && !props.disabled) {
+    handleOpen()
+  }
+}
+
 function handleSelect(value: OptionValue) {
   props.validation?.$touch()
 
   Array.isArray(model.value) ? handleArray(value) : handlePrimitive(value)
+
+  if (isInlineSearch.value) {
+    resetInlineSearch()
+  }
 }
 
 function handlePrimitive(value: OptionValue) {
@@ -127,6 +242,154 @@ function handleArray(value: OptionValue) {
 
   model.value = difference
 }
+
+function handleInlineFocus() {
+  if (props.disabled) {
+    return
+  }
+
+  handleOpen()
+  focusInlineInput()
+}
+
+function handleInlineKeydown(event: KeyboardEvent) {
+  if (!isInlineSearch.value || props.disabled) {
+    return
+  }
+
+  if (event.key === 'Tab' && event.shiftKey) {
+    return
+  }
+
+  if (event.key === 'Escape') {
+    if (inlineQuery.value) {
+      inlineQuery.value = ''
+      inlineActiveIndex.value = -1
+      event.preventDefault()
+      event.stopPropagation()
+    } else {
+      close()
+      event.preventDefault()
+      event.stopPropagation()
+    }
+    return
+  }
+
+  if (event.key === 'ArrowDown') {
+    event.preventDefault()
+    event.stopPropagation()
+    handleOpen()
+    moveInlineActive(1)
+    return
+  }
+
+  if (event.key === 'ArrowUp') {
+    event.preventDefault()
+    event.stopPropagation()
+    handleOpen()
+    moveInlineActive(-1)
+    return
+  }
+
+  if (event.key === 'Enter' || event.key === 'Tab') {
+    handleInlineSelect(event)
+    return
+  }
+
+  if (props.insertOnSpace && (event.key === ' ' || event.key === 'Spacebar')) {
+    handleInlineSelect(event)
+    return
+  }
+
+  if (
+    event.key === 'Backspace'
+    && !inlineQuery.value
+    && removable.value
+  ) {
+    if (Array.isArray(model.value) && (model.value as ArrayValue).length) {
+      const values = model.value as ArrayValue
+      handleSelect(values[values.length - 1])
+      event.preventDefault()
+      return
+    }
+
+    if (!Array.isArray(model.value) && model.value) {
+      handleSelect(model.value)
+      event.preventDefault()
+    }
+  }
+}
+
+function moveInlineActive(delta: number) {
+  const options = inlineFilteredOptions.value
+
+  if (!options.length) {
+    inlineActiveIndex.value = -1
+    return
+  }
+
+  if (inlineActiveIndex.value === -1) {
+    inlineActiveIndex.value = 0
+    return
+  }
+
+  const next = inlineActiveIndex.value + delta
+  const lastIndex = options.length - 1
+
+  if (next > lastIndex) {
+    inlineActiveIndex.value = 0
+    return
+  }
+
+  if (next < 0) {
+    inlineActiveIndex.value = lastIndex
+    return
+  }
+
+  inlineActiveIndex.value = next
+}
+
+function selectInlineActive() {
+  const options = inlineFilteredOptions.value
+  const hasInlineValue = inlineQuery.value || inlineActiveIndex.value !== -1
+
+  if (!options.length || !hasInlineValue) {
+    return false
+  }
+
+  const index = inlineActiveIndex.value === -1 ? 0 : inlineActiveIndex.value
+  const option = options[index]
+
+  if (!option) {
+    return false
+  }
+
+  handleSelect(option.value)
+
+  return true
+}
+
+function handleInlineSelect(event: KeyboardEvent) {
+  const selected = selectInlineActive()
+
+  if (selected) {
+    event.preventDefault()
+    event.stopPropagation()
+  }
+}
+
+function resetInlineSearch() {
+  inlineQuery.value = ''
+  inlineActiveIndex.value = -1
+
+  nextTick(() => {
+    focusInlineInput()
+  })
+}
+
+function focusInlineInput() {
+  inlineInput.value?.focus()
+}
 </script>
 
 <template>
@@ -147,24 +410,70 @@ function handleArray(value: OptionValue) {
     <div ref="container" class="container">
       <div
         class="box"
-        role="button"
-        tabindex="0"
-        @click="handleOpen"
+        :class="{ 'inline-search': isInlineSearch }"
+        :role="isInlineSearch ? 'combobox' : 'button'"
+        :aria-expanded="isInlineSearch ? isOpen : undefined"
+        :aria-controls="isInlineSearch ? dropdownId : undefined"
+        :aria-activedescendant="isInlineSearch ? ariaActiveDescendant : undefined"
+        :tabindex="isInlineSearch ? undefined : 0"
+        @click="handleBoxClick"
         @keydown.down.prevent
-        @keyup.enter="handleOpen"
-        @keyup.down="handleOpen"
+        @keyup.enter="handleBoxKeyOpen"
+        @keyup.down="handleBoxKeyOpen"
       >
-        <div class="box-content">
-          <SInputDropdownItem
-            v-if="hasSelected"
-            :item="selected!"
-            :size="size ?? 'small'"
-            :removable
-            :disabled="disabled ?? false"
-            @remove="handleSelect"
-          />
-
-          <div v-else class="box-placeholder">{{ placeholder ?? t.ph }}</div>
+        <div class="box-content" :class="{ inline: isInlineSearch }">
+          <template v-if="isInlineSearch">
+            <div
+              v-for="(item, i) in selectedChips"
+              :key="item.value ?? i"
+              class="inline-chip"
+              :class="{ avatar: item.type === 'avatar' }"
+            >
+              <template v-if="item.type === 'avatar'">
+                <div class="inline-chip-avatar">
+                  <SAvatar size="fill" :avatar="item.image" />
+                </div>
+                <div class="inline-chip-label">{{ item.label }}</div>
+              </template>
+              <template v-else>
+                <div class="inline-chip-label">{{ item.label }}</div>
+              </template>
+              <button
+                v-if="removable"
+                type="button"
+                class="inline-chip-close"
+                :aria-label="`${t.remove} ${item.label}`"
+                :disabled="disabled ?? false"
+                @click.stop="handleSelect(item.value)"
+              >
+                <IconX class="inline-chip-close-icon" />
+              </button>
+            </div>
+
+            <input
+              ref="inlineInput"
+              v-model="inlineQuery"
+              class="inline-input"
+              :placeholder="!hasSelected ? (placeholder ?? t.ph) : ''"
+              :disabled="disabled ?? false"
+              autocomplete="off"
+              @focus="handleInlineFocus"
+              @click.stop="handleInlineFocus"
+              @keydown="handleInlineKeydown"
+            >
+          </template>
+
+          <template v-else>
+            <SInputDropdownItem
+              v-if="hasSelected"
+              :item="selected!"
+              :size="size ?? 'small'"
+              :removable
+              :disabled="disabled ?? false"
+              @remove="handleSelect"
+            />
+            <div v-else class="box-placeholder">{{ placeholder ?? t.ph }}</div>
+          </template>
         </div>
 
         <div class="box-icon">
@@ -174,7 +483,11 @@ function handleArray(value: OptionValue) {
       </div>
 
       <div v-if="isOpen" class="dropdown" :style="inset">
-        <div class="dropdown-content">
+        <div
+          :id="isInlineSearch ? dropdownId : undefined"
+          class="dropdown-content"
+          :role="isInlineSearch ? 'listbox' : undefined"
+        >
           <SDropdown :sections="dropdownOptions" />
         </div>
       </div>
@@ -201,6 +514,10 @@ function handleArray(value: OptionValue) {
   cursor: pointer;
   transition: border-color 0.25s, background-color 0.25s;
 
+  &.inline-search {
+    cursor: text;
+  }
+
   &:hover {
     border-color: var(--input-hover-border-color);
   }
@@ -211,6 +528,12 @@ function handleArray(value: OptionValue) {
   align-items: center;
   flex-grow: 1;
   max-width: 100%;
+
+  &.inline {
+    flex-wrap: wrap;
+    gap: 6px;
+    cursor: text;
+  }
 }
 
 .box-placeholder {
@@ -237,6 +560,79 @@ function handleArray(value: OptionValue) {
   margin-bottom: -4px;
 }
 
+.inline-input {
+  flex: 1 0 120px;
+  min-width: 80px;
+  border: none;
+  padding: 0;
+  line-height: 24px;
+  font-size: inherit;
+  font-family: var(--input-value-font-family);
+  background: transparent;
+  color: var(--input-text);
+  outline: none;
+
+  &::placeholder {
+    color: var(--input-placeholder-color);
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+  }
+}
+
+.inline-chip {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  border: 1px solid var(--c-divider);
+  border-radius: 12px;
+  padding: 0 10px;
+  height: 24px;
+  background-color: var(--input-bg-color);
+
+  &.avatar {
+    gap: 6px;
+    padding: 1px 8px 1px 1px;
+  }
+}
+
+.inline-chip-avatar {
+  width: 20px;
+  height: 20px;
+}
+
+.inline-chip-label {
+  line-height: 20px;
+  font-size: 12px;
+  font-weight: 400;
+}
+
+.inline-chip-close {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-shrink: 0;
+  width: 16px;
+  height: 16px;
+  color: var(--c-text-2);
+  transition: color 0.25s;
+
+  &:hover {
+    color: var(--c-text-1);
+  }
+
+  &:disabled {
+    color: var(--c-text-3);
+    cursor: not-allowed;
+  }
+}
+
+.inline-chip-close-icon {
+  width: 16px;
+  height: 16px;
+}
+
 .dropdown {
   position: fixed;
   z-index: var(--z-index-dropdown);
@@ -254,6 +650,7 @@ function handleArray(value: OptionValue) {
     font-size: var(--input-font-size, var(--input-mini-font-size));
   }
 
+  .box-content.inline,
   .box-placeholder {
     padding-left: 10px;
   }
@@ -275,6 +672,7 @@ function handleArray(value: OptionValue) {
     font-size: var(--input-font-size, 14px);
   }
 
+  .box-content.inline,
   .box-placeholder {
     padding-left: 10px;
   }
@@ -296,6 +694,7 @@ function handleArray(value: OptionValue) {
     font-size: var(--input-font-size, var(--input-small-font-size));
   }
 
+  .box-content.inline,
   .box-placeholder {
     padding-left: 12px;
   }
@@ -317,6 +716,7 @@ function handleArray(value: OptionValue) {
     font-size: var(--input-font-size, var(--input-medium-font-size));
   }
 
+  .box-content.inline,
   .box-placeholder {
     padding-left: 16px;
   }
diff --git a/lib/components/SInputDropdownItem.vue b/lib/components/SInputDropdownItem.vue
index 8ec11edd..a83e5ab6 100644
--- a/lib/components/SInputDropdownItem.vue
+++ b/lib/components/SInputDropdownItem.vue
@@ -38,26 +38,26 @@ defineEmits<{
 <template>
   <div class="SInputDropdownItem" :class="[size, { disabled }]">
     <div v-if="Array.isArray(item)" class="many">
-      <template v-for="(item, i) in item" :key="i">
-        <div v-if="item.type === undefined || item.type === 'text'" class="many-text">
-          <div class="many-text-value">{{ item.label }}</div>
+      <template v-for="(el, i) in item" :key="i">
+        <div v-if="el.type === undefined || el.type === 'text'" class="many-text">
+          <div class="many-text-value">{{ el.label }}</div>
           <button
             v-if="removable"
             class="many-text-close"
-            @click.stop="$emit('remove', item.value)"
+            @click.stop="$emit('remove', el.value)"
           >
             <IconX class="many-text-close-icon" />
           </button>
         </div>
-        <div v-else-if="item.type === 'avatar'" class="many-avatar">
+        <div v-else-if="el.type === 'avatar'" class="many-avatar">
           <div class="many-avatar-body">
-            <div class="many-avatar-image"><SAvatar size="fill" :avatar="item.image" /></div>
-            <div class="many-avatar-name">{{ item.label }}</div>
+            <div class="many-avatar-image"><SAvatar size="fill" :avatar="el.image" /></div>
+            <div class="many-avatar-name">{{ el.label }}</div>
           </div>
           <button
             v-if="removable"
             class="many-avatar-close"
-            @click.stop="$emit('remove', item.value)"
+            @click.stop="$emit('remove', el.value)"
           >
             <IconX class="many-avatar-close-icon" />
           </button>
diff --git a/lib/composables/Dropdown.ts b/lib/composables/Dropdown.ts
index 1f8866aa..580d4558 100644
--- a/lib/composables/Dropdown.ts
+++ b/lib/composables/Dropdown.ts
@@ -37,9 +37,12 @@ export interface DropdownSectionMenu extends DropdownSectionBase {
 
 export interface DropdownSectionFilter extends DropdownSectionBase {
   type: 'filter'
-  search?: boolean
+  search?: boolean | 'inline'
   selected: MaybeRef<DropdownSectionFilterSelectedValue>
   options: MaybeRef<DropdownSectionFilterOption[]>
+  query?: string
+  active?: DropdownSectionFilterSelectedValue
+  optionIdPrefix?: string
   onClick?(value: any): void
 }
 
diff --git a/stories/components/SInputDropdown.01_Playground.story.vue b/stories/components/SInputDropdown.01_Playground.story.vue
index 1eb1203d..5c83894d 100644
--- a/stories/components/SInputDropdown.01_Playground.story.vue
+++ b/stories/components/SInputDropdown.01_Playground.story.vue
@@ -6,6 +6,7 @@ const title = 'Components / SInputDropdown / 01. Playground'
 
 const singleValue = ref<string | null>(null)
 const multiValue = ref<string[]>([])
+const inlineValue = ref<string[]>([])
 
 const options: OptionText[] = [
   { label: 'Vue.js', value: 'vuejs' },
@@ -73,6 +74,16 @@ function initState() {
             :options
             :nullable="state.nullable"
           />
+          <SInputDropdown
+            v-model="inlineValue"
+            :size="state.size"
+            :position="state.position || undefined"
+            label="Inline search (autocomplete)"
+            placeholder="Type a framework and hit enter"
+            :options
+            :nullable="state.nullable"
+            search="inline"
+          />
         </div>
       </Board>
     </template>
diff --git a/tests/components/SInputDropdown.spec.ts b/tests/components/SInputDropdown.spec.ts
new file mode 100644
index 00000000..657fc073
--- /dev/null
+++ b/tests/components/SInputDropdown.spec.ts
@@ -0,0 +1,938 @@
+import { mount } from '@vue/test-utils'
+import SInputDropdown from 'sefirot/components/SInputDropdown.vue'
+import { nextTick } from 'vue'
+
+describe('components/SInputDropdown', () => {
+  describe('inline search filtering with Fuse.js', () => {
+    it('should filter options based on search query', async () => {
+      const wrapper = mount(SInputDropdown, {
+        props: {
+          search: 'inline',
+          options: [
+            { label: 'Apple', value: 1 },
+            { label: 'Banana', value: 2 },
+            { label: 'Cherry', value: 3 },
+            { label: 'Apricot', value: 4 }
+          ],
+          modelValue: []
+        }
+      })
+
+      // Open dropdown
+      await wrapper.find('.box').trigger('click')
+      await nextTick()
+
+      const input = wrapper.find('.inline-input')
+      await input.setValue('ap')
+      await nextTick()
+
+      // Should filter to only Apple and Apricot using fuzzy search
+      const items = wrapper.findAll('.dropdown .button')
+      const labels = items.map((i) => i.text())
+
+      expect(labels).toContain('Apple')
+      expect(labels).toContain('Apricot')
+      expect(labels).not.toContain('Banana')
+      expect(labels).not.toContain('Cherry')
+    })
+
+    it('should return all options when query is empty', async () => {
+      const options = [
+        { label: 'Apple', value: 1 },
+        { label: 'Banana', value: 2 },
+        { label: 'Cherry', value: 3 }
+      ]
+
+      const wrapper = mount(SInputDropdown, {
+        props: {
+          search: 'inline',
+          options,
+          modelValue: []
+        }
+      })
+
+      await wrapper.find('.box').trigger('click')
+      await nextTick()
+
+      const input = wrapper.find('.inline-input')
+      await input.setValue('ap')
+      await nextTick()
+
+      // Clear query
+      await input.setValue('')
+      await nextTick()
+
+      // All options should be available when query is empty
+      const items = wrapper.findAll('.dropdown .button')
+      expect(items).toHaveLength(options.length)
+    })
+
+    it('should handle no matches gracefully', async () => {
+      const wrapper = mount(SInputDropdown, {
+        props: {
+          search: 'inline',
+          options: [
+            { label: 'Apple', value: 1 },
+            { label: 'Banana', value: 2 }
+          ],
+          modelValue: []
+        }
+      })
+
+      await wrapper.find('.box').trigger('click')
+      await nextTick()
+
+      const input = wrapper.find('.inline-input')
+      await input.setValue('xyz')
+      await nextTick()
+
+      // Component should still render even with no matches
+      const empty = wrapper.find('.empty')
+      expect(empty.exists()).toBe(true)
+      expect(wrapper.findAll('.dropdown .button')).toHaveLength(0)
+    })
+
+    it('should exclude disabled options from filtering', async () => {
+      const wrapper = mount(SInputDropdown, {
+        props: {
+          search: 'inline',
+          options: [
+            { label: 'Apple', value: 1 },
+            { label: 'Banana', value: 2, disabled: true },
+            { label: 'Cherry', value: 3 }
+          ],
+          modelValue: []
+        }
+      })
+
+      await wrapper.find('.box').trigger('click')
+      await nextTick()
+
+      const input = wrapper.find('.inline-input')
+      await input.setValue('a')
+      await nextTick()
+
+      const items = wrapper.findAll('.dropdown .button')
+      const labels = items.map((i) => i.text())
+
+      // Disabled options should not appear in filtered results
+      expect(labels).toContain('Apple')
+      expect(labels).not.toContain('Banana')
+    })
+  })
+
+  describe('keyboard navigation', () => {
+    it('should navigate down with ArrowDown key', async () => {
+      const wrapper = mount(SInputDropdown, {
+        props: {
+          search: 'inline',
+          options: [
+            { label: 'Option 1', value: 1 },
+            { label: 'Option 2', value: 2 },
+            { label: 'Option 3', value: 3 }
+          ],
+          modelValue: []
+        }
+      })
+
+      const input = wrapper.find('.inline-input')
+      await input.trigger('focus')
+      await nextTick()
+
+      // Press ArrowDown
+      await input.trigger('keydown', { key: 'ArrowDown' })
+      await nextTick()
+
+      const box = wrapper.find('.box')
+      const ariaActiveDescendant = box.attributes('aria-activedescendant')
+      expect(ariaActiveDescendant).toMatch(/option-0$/)
+    })
+
+    it('should navigate up with ArrowUp key', async () => {
+      const wrapper = mount(SInputDropdown, {
+        props: {
+          search: 'inline',
+          options: [
+            { label: 'Option 1', value: 1 },
+            { label: 'Option 2', value: 2 },
+            { label: 'Option 3', value: 3 }
+          ],
+          modelValue: []
+        }
+      })
+
+      const input = wrapper.find('.inline-input')
+      await input.trigger('focus')
+      await nextTick()
+
+      // Press ArrowDown twice then ArrowUp once
+      await input.trigger('keydown', { key: 'ArrowDown' })
+      await nextTick()
+      await input.trigger('keydown', { key: 'ArrowDown' })
+      await nextTick()
+      await input.trigger('keydown', { key: 'ArrowUp' })
+      await nextTick()
+
+      const box = wrapper.find('.box')
+      const ariaActiveDescendant = box.attributes('aria-activedescendant')
+      expect(ariaActiveDescendant).toMatch(/option-0$/)
+    })
+
+    it('should wrap to first option when pressing ArrowDown on last option', async () => {
+      const wrapper = mount(SInputDropdown, {
+        props: {
+          search: 'inline',
+          options: [
+            { label: 'Option 1', value: 1 },
+            { label: 'Option 2', value: 2 }
+          ],
+          modelValue: []
+        }
+      })
+
+      const input = wrapper.find('.inline-input')
+      await input.trigger('focus')
+      await nextTick()
+
+      // Navigate to last option and press ArrowDown again
+      await input.trigger('keydown', { key: 'ArrowDown' })
+      await nextTick()
+      await input.trigger('keydown', { key: 'ArrowDown' })
+      await nextTick()
+      await input.trigger('keydown', { key: 'ArrowDown' })
+      await nextTick()
+
+      const box = wrapper.find('.box')
+      const ariaActiveDescendant = box.attributes('aria-activedescendant')
+      expect(ariaActiveDescendant).toMatch(/option-0$/)
+    })
+
+    it('should wrap to last option when pressing ArrowUp on first option', async () => {
+      const wrapper = mount(SInputDropdown, {
+        props: {
+          search: 'inline',
+          options: [
+            { label: 'Option 1', value: 1 },
+            { label: 'Option 2', value: 2 }
+          ],
+          modelValue: []
+        }
+      })
+
+      const input = wrapper.find('.inline-input')
+      await input.trigger('focus')
+      await nextTick()
+
+      // Press ArrowDown to activate first option, then ArrowUp to wrap
+      await input.trigger('keydown', { key: 'ArrowDown' })
+      await nextTick()
+      await input.trigger('keydown', { key: 'ArrowUp' })
+      await nextTick()
+
+      const box = wrapper.find('.box')
+      const ariaActiveDescendant = box.attributes('aria-activedescendant')
+      expect(ariaActiveDescendant).toMatch(/option-1$/)
+    })
+
+    it('should select active option with Enter key', async () => {
+      const wrapper = mount(SInputDropdown, {
+        props: {
+          search: 'inline',
+          options: [
+            { label: 'Option 1', value: 1 },
+            { label: 'Option 2', value: 2 }
+          ],
+          modelValue: []
+        }
+      })
+
+      const input = wrapper.find('.inline-input')
+      await input.trigger('focus')
+      await nextTick()
+
+      // Type to trigger filtering and open dropdown - this sets active index to 0
+      await input.setValue('Option')
+      await nextTick()
+
+      // Press Enter to select the first option (no ArrowDown needed since typing sets index to 0)
+      await input.trigger('keydown', { key: 'Enter' })
+      await nextTick()
+
+      expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([[1]])
+    })
+
+    it('should select active option with Tab key', async () => {
+      const wrapper = mount(SInputDropdown, {
+        props: {
+          search: 'inline',
+          options: [
+            { label: 'Option 1', value: 1 },
+            { label: 'Option 2', value: 2 }
+          ],
+          modelValue: []
+        }
+      })
+
+      const input = wrapper.find('.inline-input')
+      await input.trigger('focus')
+      await nextTick()
+
+      // Type to trigger filtering and open dropdown - this sets active index to 0
+      await input.setValue('Option')
+      await nextTick()
+
+      // Press Tab to select the first option (no ArrowDown needed)
+      await input.trigger('keydown', { key: 'Tab' })
+      await nextTick()
+
+      expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([[1]])
+    })
+
+    it('should remove last selected item with Backspace when query is empty', async () => {
+      const wrapper = mount(SInputDropdown, {
+        props: {
+          search: 'inline',
+          options: [
+            { label: 'Option 1', value: 1 },
+            { label: 'Option 2', value: 2 },
+            { label: 'Option 3', value: 3 }
+          ],
+          modelValue: [1, 2],
+          nullable: true
+        }
+      })
+
+      const input = wrapper.find('.inline-input')
+      expect((input.element as HTMLInputElement).value).toBe('')
+
+      // Press Backspace with empty query
+      await input.trigger('keydown', { key: 'Backspace' })
+      await nextTick()
+
+      // Should remove the last item (value 2)
+      expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([[1]])
+    })
+
+    it('should not remove item with Backspace when query is not empty', async () => {
+      const wrapper = mount(SInputDropdown, {
+        props: {
+          search: 'inline',
+          options: [
+            { label: 'Option 1', value: 1 },
+            { label: 'Option 2', value: 2 }
+          ],
+          modelValue: [1],
+          nullable: true
+        }
+      })
+
+      const input = wrapper.find('.inline-input')
+      await input.setValue('test')
+      await nextTick()
+
+      await input.trigger('keydown', { key: 'Backspace' })
+      await nextTick()
+
+      // Should not emit update event when query is not empty
+      expect(wrapper.emitted('update:modelValue')).toBeUndefined()
+    })
+
+    it('should not navigate when disabled', async () => {
+      const wrapper = mount(SInputDropdown, {
+        props: {
+          search: 'inline',
+          options: [
+            { label: 'Option 1', value: 1 },
+            { label: 'Option 2', value: 2 }
+          ],
+          modelValue: [],
+          disabled: true
+        }
+      })
+
+      const input = wrapper.find('.inline-input')
+      await input.trigger('keydown', { key: 'ArrowDown' })
+      await nextTick()
+
+      const box = wrapper.find('.box')
+      expect(box.attributes('aria-activedescendant')).toBeUndefined()
+    })
+  })
+
+  describe('selection behavior', () => {
+    it('should select option in multi-select mode', async () => {
+      const wrapper = mount(SInputDropdown, {
+        props: {
+          search: 'inline',
+          options: [
+            { label: 'Option 1', value: 1 },
+            { label: 'Option 2', value: 2 }
+          ],
+          modelValue: []
+        }
+      })
+
+      const input = wrapper.find('.inline-input')
+
+      // Type to open dropdown and filter options - this sets active index to 0
+      await input.setValue('Option')
+      await nextTick()
+
+      // Press Enter to select first option
+      await input.trigger('keydown', { key: 'Enter' })
+      await nextTick()
+
+      expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([[1]])
+    })
+
+    it('should deselect option when clicking again in multi-select mode', async () => {
+      const wrapper = mount(SInputDropdown, {
+        props: {
+          search: 'inline',
+          options: [
+            { label: 'Option 1', value: 1 },
+            { label: 'Option 2', value: 2 }
+          ],
+          modelValue: [1],
+          nullable: true
+        }
+      })
+
+      const input = wrapper.find('.inline-input')
+
+      // Type to open dropdown and filter - this sets active index to 0
+      await input.setValue('Option 1')
+      await nextTick()
+
+      // Press Enter to toggle first option (deselect it)
+      await input.trigger('keydown', { key: 'Enter' })
+      await nextTick()
+
+      // Should remove value 1 from the array
+      expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([[]])
+    })
+
+    it('should select option in single-select mode', async () => {
+      const wrapper = mount(SInputDropdown, {
+        props: {
+          search: 'inline',
+          options: [
+            { label: 'Option 1', value: 1 },
+            { label: 'Option 2', value: 2 }
+          ],
+          modelValue: null
+        }
+      })
+
+      const input = wrapper.find('.inline-input')
+
+      // Type to open dropdown and filter - this sets active index to 0
+      await input.setValue('Option')
+      await nextTick()
+
+      // Press Enter to select first option
+      await input.trigger('keydown', { key: 'Enter' })
+      await nextTick()
+
+      expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([1])
+    })
+
+    it('should replace selection in single-select mode', async () => {
+      const wrapper = mount(SInputDropdown, {
+        props: {
+          search: 'inline',
+          options: [
+            { label: 'Option 1', value: 1 },
+            { label: 'Option 2', value: 2 }
+          ],
+          modelValue: 1,
+          nullable: true
+        }
+      })
+
+      const input = wrapper.find('.inline-input')
+      await input.setValue('Option 2')
+      await nextTick()
+
+      // Press Enter to select the filtered option (Option 2)
+      await input.trigger('keydown', { key: 'Enter' })
+      await nextTick()
+
+      expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([2])
+    })
+
+    it('should select first filtered option when pressing Enter with query', async () => {
+      const wrapper = mount(SInputDropdown, {
+        props: {
+          search: 'inline',
+          options: [
+            { label: 'Apple', value: 1 },
+            { label: 'Banana', value: 2 },
+            { label: 'Apricot', value: 3 }
+          ],
+          modelValue: []
+        }
+      })
+
+      const input = wrapper.find('.inline-input')
+      await input.setValue('ap')
+      await nextTick()
+      await input.trigger('keydown', { key: 'Enter' })
+      await nextTick()
+
+      // Should select the first match (Apple, value 1)
+      expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([[1]])
+    })
+  })
+
+  describe('reset behavior after selection', () => {
+    it('should clear query after selection', async () => {
+      const wrapper = mount(SInputDropdown, {
+        props: {
+          search: 'inline',
+          options: [
+            { label: 'Option 1', value: 1 },
+            { label: 'Option 2', value: 2 }
+          ],
+          modelValue: []
+        }
+      })
+
+      const input = wrapper.find('.inline-input')
+      await input.setValue('opt')
+      await nextTick()
+      await input.trigger('keydown', { key: 'Enter' })
+      await nextTick()
+      await nextTick() // Wait for reset
+
+      expect((input.element as HTMLInputElement).value).toBe('')
+    })
+
+    it('should reset active index after selection', async () => {
+      const wrapper = mount(SInputDropdown, {
+        props: {
+          search: 'inline',
+          options: [
+            { label: 'Option 1', value: 1 },
+            { label: 'Option 2', value: 2 }
+          ],
+          modelValue: []
+        }
+      })
+
+      const input = wrapper.find('.inline-input')
+      await input.trigger('keydown', { key: 'ArrowDown' })
+      await nextTick()
+      await input.trigger('keydown', { key: 'ArrowDown' })
+      await nextTick()
+      await input.trigger('keydown', { key: 'Enter' })
+      await nextTick()
+      await nextTick() // Wait for reset
+
+      const box = wrapper.find('.box')
+      // After reset, aria-activedescendant should not be set
+      expect(box.attributes('aria-activedescendant')).toBeUndefined()
+    })
+  })
+
+  describe('chip rendering in multi-select mode', () => {
+    it('should render chips for selected items', async () => {
+      const wrapper = mount(SInputDropdown, {
+        props: {
+          search: 'inline',
+          options: [
+            { label: 'Option 1', value: 1 },
+            { label: 'Option 2', value: 2 },
+            { label: 'Option 3', value: 3 }
+          ],
+          modelValue: [1, 2]
+        }
+      })
+
+      const chips = wrapper.findAll('.inline-chip')
+      expect(chips).toHaveLength(2)
+      expect(chips[0].text()).toContain('Option 1')
+      expect(chips[1].text()).toContain('Option 2')
+    })
+
+    it('should render chip with close button when removable', async () => {
+      const wrapper = mount(SInputDropdown, {
+        props: {
+          search: 'inline',
+          options: [
+            { label: 'Option 1', value: 1 },
+            { label: 'Option 2', value: 2 }
+          ],
+          modelValue: [1],
+          nullable: true
+        }
+      })
+
+      const chip = wrapper.find('.inline-chip')
+      const closeButton = chip.find('.inline-chip-close')
+      expect(closeButton.exists()).toBe(true)
+    })
+
+    it('should remove item when chip close button is clicked', async () => {
+      const wrapper = mount(SInputDropdown, {
+        props: {
+          search: 'inline',
+          options: [
+            { label: 'Option 1', value: 1 },
+            { label: 'Option 2', value: 2 }
+          ],
+          modelValue: [1, 2],
+          nullable: true
+        }
+      })
+
+      const chips = wrapper.findAll('.inline-chip')
+      const closeButton = chips[0].find('.inline-chip-close')
+      await closeButton.trigger('click')
+      await nextTick()
+
+      expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([[2]])
+    })
+
+    it('should render avatar chips correctly', async () => {
+      const wrapper = mount(SInputDropdown, {
+        props: {
+          search: 'inline',
+          options: [
+            { type: 'avatar', label: 'John Doe', value: 1, image: 'avatar1.jpg' },
+            { type: 'avatar', label: 'Jane Smith', value: 2, image: 'avatar2.jpg' }
+          ],
+          modelValue: [1]
+        }
+      })
+
+      const chip = wrapper.find('.inline-chip.avatar')
+      expect(chip.exists()).toBe(true)
+      expect(chip.find('.inline-chip-avatar').exists()).toBe(true)
+      expect(chip.find('.inline-chip-label').text()).toBe('John Doe')
+    })
+
+    it('should have internationalized aria-label on chip close buttons', async () => {
+      const wrapper = mount(SInputDropdown, {
+        props: {
+          search: 'inline',
+          options: [
+            { label: 'Option 1', value: 1 }
+          ],
+          modelValue: [1],
+          nullable: true
+        }
+      })
+
+      const closeButton = wrapper.find('.inline-chip-close')
+      const ariaLabel = closeButton.attributes('aria-label')
+      expect(ariaLabel).toContain('Option 1')
+    })
+  })
+
+  describe('focus management', () => {
+    it('should focus inline input when box is clicked', async () => {
+      const wrapper = mount(SInputDropdown, {
+        props: {
+          search: 'inline',
+          options: [
+            { label: 'Option 1', value: 1 },
+            { label: 'Option 2', value: 2 }
+          ],
+          modelValue: []
+        },
+        attachTo: document.body
+      })
+
+      const box = wrapper.find('.box')
+      await box.trigger('click')
+      await nextTick()
+
+      const input = wrapper.find('.inline-input')
+      expect(document.activeElement).toBe(input.element)
+
+      wrapper.unmount()
+    })
+
+    it('should refocus inline input after selection', async () => {
+      const wrapper = mount(SInputDropdown, {
+        props: {
+          search: 'inline',
+          options: [
+            { label: 'Option 1', value: 1 },
+            { label: 'Option 2', value: 2 }
+          ],
+          modelValue: []
+        },
+        attachTo: document.body
+      })
+
+      const input = wrapper.find('.inline-input')
+      await input.trigger('keydown', { key: 'ArrowDown' })
+      await nextTick()
+      await input.trigger('keydown', { key: 'Enter' })
+      await nextTick()
+      await nextTick() // Wait for focus
+
+      expect(document.activeElement).toBe(input.element)
+
+      wrapper.unmount()
+    })
+
+    it('should not focus when disabled', async () => {
+      const wrapper = mount(SInputDropdown, {
+        props: {
+          search: 'inline',
+          options: [
+            { label: 'Option 1', value: 1 }
+          ],
+          modelValue: [],
+          disabled: true
+        },
+        attachTo: document.body
+      })
+
+      const box = wrapper.find('.box')
+      await box.trigger('click')
+      await nextTick()
+
+      const input = wrapper.find('.inline-input')
+      expect(document.activeElement).not.toBe(input.element)
+
+      wrapper.unmount()
+    })
+  })
+
+  describe('ARIA attributes for inline search', () => {
+    it('should add ARIA attributes when search="inline"', async () => {
+      const wrapper = mount(SInputDropdown, {
+        props: {
+          search: 'inline',
+          options: [
+            { label: 'Option 1', value: 1 },
+            { label: 'Option 2', value: 2 },
+            { label: 'Option 3', value: 3 }
+          ],
+          modelValue: []
+        }
+      })
+
+      const box = wrapper.find('.box')
+
+      // Should have combobox role
+      expect(box.attributes('role')).toBe('combobox')
+
+      // Should have aria-expanded (initially false since dropdown is closed)
+      expect(box.attributes('aria-expanded')).toBe('false')
+
+      // Should have aria-controls
+      expect(box.attributes('aria-controls')).toBeDefined()
+
+      // aria-activedescendant should not be set when no option is active
+      expect(box.attributes('aria-activedescendant')).toBeUndefined()
+    })
+
+    it('should update aria-expanded when dropdown opens', async () => {
+      const wrapper = mount(SInputDropdown, {
+        props: {
+          search: 'inline',
+          options: [
+            { label: 'Option 1', value: 1 },
+            { label: 'Option 2', value: 2 }
+          ],
+          modelValue: []
+        }
+      })
+
+      const box = wrapper.find('.box')
+      expect(box.attributes('aria-expanded')).toBe('false')
+
+      // Click to open dropdown
+      await box.trigger('click')
+      await nextTick()
+
+      expect(box.attributes('aria-expanded')).toBe('true')
+    })
+
+    it('should set aria-activedescendant when navigating options', async () => {
+      const wrapper = mount(SInputDropdown, {
+        props: {
+          search: 'inline',
+          options: [
+            { label: 'Option 1', value: 1 },
+            { label: 'Option 2', value: 2 }
+          ],
+          modelValue: []
+        }
+      })
+
+      // Open dropdown first
+      await wrapper.find('.box').trigger('click')
+      await nextTick()
+
+      const input = wrapper.find('.inline-input')
+
+      // Type to trigger filtering
+      await input.setValue('Option')
+      await nextTick()
+
+      const box = wrapper.find('.box')
+
+      // aria-activedescendant should be set when an option is active
+      const ariaActiveDescendant = box.attributes('aria-activedescendant')
+      expect(ariaActiveDescendant).toBeDefined()
+      expect(ariaActiveDescendant).toMatch(/option-0$/)
+    })
+
+    it('should add role="listbox" to dropdown when search="inline"', async () => {
+      const wrapper = mount(SInputDropdown, {
+        props: {
+          search: 'inline',
+          options: [
+            { label: 'Option 1', value: 1 },
+            { label: 'Option 2', value: 2 }
+          ],
+          modelValue: []
+        }
+      })
+
+      // Open dropdown
+      await wrapper.find('.box').trigger('click')
+      await nextTick()
+
+      const dropdownContent = wrapper.find('.dropdown-content')
+      expect(dropdownContent.attributes('role')).toBe('listbox')
+      expect(dropdownContent.attributes('id')).toBeDefined()
+    })
+
+    it('should not add ARIA attributes when search is not "inline"', async () => {
+      const wrapper = mount(SInputDropdown, {
+        props: {
+          search: true,
+          options: [
+            { label: 'Option 1', value: 1 },
+            { label: 'Option 2', value: 2 }
+          ],
+          modelValue: null
+        }
+      })
+
+      const box = wrapper.find('.box')
+
+      // Should have button role, not combobox
+      expect(box.attributes('role')).toBe('button')
+
+      // Should not have ARIA attributes
+      expect(box.attributes('aria-expanded')).toBeUndefined()
+      expect(box.attributes('aria-controls')).toBeUndefined()
+      expect(box.attributes('aria-activedescendant')).toBeUndefined()
+    })
+  })
+
+  describe('Escape key handling for inline search', () => {
+    it('should clear search query when Escape is pressed with text', async () => {
+      const wrapper = mount(SInputDropdown, {
+        props: {
+          search: 'inline',
+          options: [
+            { label: 'Option 1', value: 1 },
+            { label: 'Option 2', value: 2 },
+            { label: 'Option 3', value: 3 }
+          ],
+          modelValue: []
+        }
+      })
+
+      // Open dropdown
+      await wrapper.find('.box').trigger('click')
+      await nextTick()
+
+      const input = wrapper.find('.inline-input')
+
+      // Type to create a search query
+      await input.setValue('Option')
+      await nextTick()
+
+      // Verify query exists
+      expect((input.element as HTMLInputElement).value).toBe('Option')
+
+      // Press Escape
+      await input.trigger('keydown', { key: 'Escape' })
+      await nextTick()
+
+      // Query should be cleared
+      expect((input.element as HTMLInputElement).value).toBe('')
+
+      // Dropdown should still be open
+      const box = wrapper.find('.box')
+      expect(box.attributes('aria-expanded')).toBe('true')
+    })
+
+    it('should close dropdown when Escape is pressed with empty query', async () => {
+      const wrapper = mount(SInputDropdown, {
+        props: {
+          search: 'inline',
+          options: [
+            { label: 'Option 1', value: 1 },
+            { label: 'Option 2', value: 2 }
+          ],
+          modelValue: []
+        }
+      })
+
+      // Open dropdown
+      await wrapper.find('.box').trigger('click')
+      await nextTick()
+
+      const box = wrapper.find('.box')
+      expect(box.attributes('aria-expanded')).toBe('true')
+
+      const input = wrapper.find('.inline-input')
+
+      // Press Escape with empty query
+      await input.trigger('keydown', { key: 'Escape' })
+      await nextTick()
+
+      // Dropdown should be closed
+      expect(box.attributes('aria-expanded')).toBe('false')
+    })
+
+    it('should clear query then close dropdown on consecutive Escape presses', async () => {
+      const wrapper = mount(SInputDropdown, {
+        props: {
+          search: 'inline',
+          options: [
+            { label: 'Option 1', value: 1 },
+            { label: 'Option 2', value: 2 }
+          ],
+          modelValue: []
+        }
+      })
+
+      // Open dropdown
+      await wrapper.find('.box').trigger('click')
+      await nextTick()
+
+      const input = wrapper.find('.inline-input')
+
+      // Type to create a search query
+      await input.setValue('Opt')
+      await nextTick()
+
+      const box = wrapper.find('.box')
+
+      // First Escape: clear query
+      await input.trigger('keydown', { key: 'Escape' })
+      await nextTick()
+
+      expect((input.element as HTMLInputElement).value).toBe('')
+      expect(box.attributes('aria-expanded')).toBe('true')
+
+      // Second Escape: close dropdown
+      await input.trigger('keydown', { key: 'Escape' })
+      await nextTick()
+
+      expect(box.attributes('aria-expanded')).toBe('false')
+    })
+  })
+})