From 18322150caab7f92d17f5c9e7e5955d55b05aea1 Mon Sep 17 00:00:00 2001
From: Powerplex <julien.bonnin.dev@gmail.com>
Date: Wed, 14 Feb 2024 16:46:18 +0100
Subject: [PATCH 1/2] refactor(combobox): renamed combobox input as trigger

---
 package-lock.json                             |  1 +
 .../components/combobox/src/Combobox.doc.mdx  |  6 +--
 .../combobox/src/Combobox.stories.tsx         | 46 +++++++++----------
 ....styles.tsx => ComboboxTrigger.styles.tsx} |  0
 ...{ComboboxInput.tsx => ComboboxTrigger.tsx} |  6 +--
 packages/components/combobox/src/index.ts     |  8 ++--
 .../combobox/src/tests/Combobox.test.tsx      | 22 ++++-----
 .../combobox/src/tests/itemsGroups.test.tsx   |  2 +-
 .../src/tests/multipleSelection.test.tsx      |  6 +--
 .../combobox/src/tests/withFormField.test.tsx |  2 +-
 10 files changed, 50 insertions(+), 49 deletions(-)
 rename packages/components/combobox/src/{ComboboxInput.styles.tsx => ComboboxTrigger.styles.tsx} (100%)
 rename packages/components/combobox/src/{ComboboxInput.tsx => ComboboxTrigger.tsx} (97%)

diff --git a/package-lock.json b/package-lock.json
index 9649251e7..d5f25689a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2399,6 +2399,7 @@
     },
     "node_modules/@clack/prompts/node_modules/is-unicode-supported": {
       "version": "1.3.0",
+      "extraneous": true,
       "inBundle": true,
       "license": "MIT",
       "engines": {
diff --git a/packages/components/combobox/src/Combobox.doc.mdx b/packages/components/combobox/src/Combobox.doc.mdx
index d39ac4619..0fb8c5285 100644
--- a/packages/components/combobox/src/Combobox.doc.mdx
+++ b/packages/components/combobox/src/Combobox.doc.mdx
@@ -30,8 +30,8 @@ import { Combobox } from '@spark-ui/combobox'
   of={Combobox}
   description="A form input used for selecting a value: when collapsed it shows the currently selected option and when expanded, it shows a scrollable list of predefined options for the user to choose from."
   subcomponents={{
-    'Combobox.Input': {
-      of: Combobox.Input,
+    'Combobox.Trigger': {
+      of: Combobox.Trigger,
       description:
         'The button that toggles the select. The Select.Popover will position itself by aligning over the trigger.',
     },
@@ -136,7 +136,7 @@ You can style this element directly, or you can use it as a wrapper to put an ic
 
 ### Leading icon
 
-Use `Combobox.LeadingIcon` inside `Combobox.Input` to prefix your trigger with an icon.
+Use `Combobox.LeadingIcon` inside `Combobox.Trigger` to prefix your trigger with an icon.
 
 <Canvas of={stories.LeadingIcon} />
 
diff --git a/packages/components/combobox/src/Combobox.stories.tsx b/packages/components/combobox/src/Combobox.stories.tsx
index b4bd620bf..7487d41a9 100644
--- a/packages/components/combobox/src/Combobox.stories.tsx
+++ b/packages/components/combobox/src/Combobox.stories.tsx
@@ -19,7 +19,7 @@ export default meta
  * Minimal anatomy:
  * - Combobox
  *  - Combobox.Trigger
- *    - Combobox.Input
+ *    - Combobox.Trigger
  *  - Combobox.Popover
  *    - Combobox.Items
  *      - Combobox.Item
@@ -29,7 +29,7 @@ export default meta
  *  - Combobox.Trigger
  *    - Combobox.LeadingIcon
  *    - Combobox.SelectedItems
- *    - Combobox.Input
+ *    - Combobox.Trigger
  *    - Combobox.ClearButton
  *    - Combobox.Disclosure
  *  - Combobox.Popover
@@ -64,7 +64,7 @@ export const Default: StoryFn = _args => {
   return (
     <div className="pb-[300px]">
       <Combobox>
-        <Combobox.Input aria-label="Book" placeholder="Pick a book" />
+        <Combobox.Trigger aria-label="Book" placeholder="Pick a book" />
 
         <Combobox.Popover>
           <Combobox.Items>
@@ -88,7 +88,7 @@ export const Controlled: StoryFn = () => {
   return (
     <div className="pb-[300px]">
       <Combobox value={value} onValueChange={setValue}>
-        <Combobox.Input
+        <Combobox.Trigger
           aria-label="Book"
           placeholder="Pick a book"
           value={inputValue}
@@ -126,7 +126,7 @@ export const ControlledOpenState: StoryFn = () => {
 
       <div className="pb-[300px]">
         <Combobox open={open} onOpenChange={setOpen}>
-          <Combobox.Input aria-label="Book" placeholder="Pick a book" />
+          <Combobox.Trigger aria-label="Book" placeholder="Pick a book" />
 
           <Combobox.Popover>
             <Combobox.Items>
@@ -148,7 +148,7 @@ export const CustomItem: StoryFn = _args => {
   return (
     <div className="pb-[300px]">
       <Combobox>
-        <Combobox.Input aria-label="Book" placeholder="Pick a book" />
+        <Combobox.Trigger aria-label="Book" placeholder="Pick a book" />
 
         <Combobox.Popover>
           <Combobox.Items>
@@ -187,7 +187,7 @@ export const Disabled: StoryFn = _args => {
   return (
     <div className="pb-[300px]">
       <Combobox disabled>
-        <Combobox.Input aria-label="Book" placeholder="Pick a book" />
+        <Combobox.Trigger aria-label="Book" placeholder="Pick a book" />
 
         <Combobox.Popover>
           <Combobox.Items>
@@ -217,7 +217,7 @@ export const FilteringAutoFilter: StoryFn = _args => {
   return (
     <div className="pb-[300px]">
       <Combobox autoFilter>
-        <Combobox.Input aria-label="Book" placeholder="Pick a book" />
+        <Combobox.Trigger aria-label="Book" placeholder="Pick a book" />
 
         <Combobox.Popover>
           <Combobox.Items>
@@ -248,7 +248,7 @@ export const FilteringManual: StoryFn = () => {
   return (
     <div className="pb-[300px]">
       <Combobox>
-        <Combobox.Input
+        <Combobox.Trigger
           aria-label="Book"
           placeholder="Pick a book"
           value={inputValue}
@@ -278,7 +278,7 @@ export const ReadOnly: StoryFn = _args => {
   return (
     <div className="pb-[300px]">
       <Combobox readOnly>
-        <Combobox.Input aria-label="Book" placeholder="Pick a book" />
+        <Combobox.Trigger aria-label="Book" placeholder="Pick a book" />
 
         <Combobox.Popover>
           <Combobox.Items>
@@ -299,7 +299,7 @@ export const DisabledItem: StoryFn = _args => {
   return (
     <div className="pb-[300px]">
       <Combobox>
-        <Combobox.Input aria-label="Book" placeholder="Pick a book" />
+        <Combobox.Trigger aria-label="Book" placeholder="Pick a book" />
 
         <Combobox.Popover>
           <Combobox.Items>
@@ -322,7 +322,7 @@ export const Grouped: StoryFn = _args => {
   return (
     <div className="pb-[300px]">
       <Combobox autoFilter>
-        <Combobox.Input aria-label="Book" placeholder="Pick a book" />
+        <Combobox.Trigger aria-label="Book" placeholder="Pick a book" />
         <Combobox.Popover>
           <Combobox.Items>
             <Combobox.Group>
@@ -351,7 +351,7 @@ export const LeadingIcon: StoryFn = _args => {
   return (
     <div className="pb-[300px]">
       <Combobox>
-        <Combobox.Input aria-label="Book" placeholder="Pick a book" />
+        <Combobox.Trigger aria-label="Book" placeholder="Pick a book" />
 
         <Combobox.Popover>
           <Combobox.Items>
@@ -374,7 +374,7 @@ export const ItemIndicator: StoryFn = _args => {
   return (
     <div className="pb-[300px]">
       <Combobox multiple defaultValue={['book-1', 'book-2']}>
-        <Combobox.Input aria-label="Book" placeholder="Pick a book" />
+        <Combobox.Trigger aria-label="Book" placeholder="Pick a book" />
 
         <Combobox.Popover>
           <Combobox.Items>
@@ -419,7 +419,7 @@ export const Statuses: StoryFn = () => {
       {statuses.map(status => {
         return (
           <Combobox state={status}>
-            <Combobox.Input aria-label="Book" placeholder="Pick a book" />
+            <Combobox.Trigger aria-label="Book" placeholder="Pick a book" />
 
             <Combobox.Popover>
               <Combobox.Items>
@@ -442,7 +442,7 @@ export const MultipleSelection: StoryFn = _args => {
   return (
     <div className="pb-[300px]">
       <Combobox multiple autoFilter defaultValue={['book-1', 'book-2']}>
-        <Combobox.Input aria-label="Book" placeholder="Pick a book" />
+        <Combobox.Trigger aria-label="Book" placeholder="Pick a book" />
 
         <Combobox.Popover>
           <Combobox.Items>
@@ -475,7 +475,7 @@ export const MultipleSelectionControlled: StoryFn = () => {
   return (
     <div className="flex flex-col  gap-md pb-[300px]">
       <Combobox autoFilter multiple value={selectedValues} onValueChange={setSelectedValues}>
-        <Combobox.Input
+        <Combobox.Trigger
           aria-label="Book"
           placeholder="todo placeholder"
           value={inputValue}
@@ -505,7 +505,7 @@ export const FormFieldLabel: StoryFn = _args => {
       <FormField>
         <FormField.Label>Book</FormField.Label>
         <Combobox>
-          <Combobox.Input aria-label="Book" placeholder="Pick a book" />
+          <Combobox.Trigger aria-label="Book" placeholder="Pick a book" />
           <Combobox.Popover>
             <Combobox.Items>
               <Combobox.Item value="book-1">To Kill a Mockingbird</Combobox.Item>
@@ -530,7 +530,7 @@ export const FormFieldHiddenLabel: StoryFn = _args => {
           <VisuallyHidden>Book</VisuallyHidden>
         </FormField.Label>
         <Combobox>
-          <Combobox.Input aria-label="Book" placeholder="Pick a book" />
+          <Combobox.Trigger aria-label="Book" placeholder="Pick a book" />
           <Combobox.Popover>
             <Combobox.Items>
               <Combobox.Item value="book-1">To Kill a Mockingbird</Combobox.Item>
@@ -553,7 +553,7 @@ export const FormFieldReadOnly: StoryFn = _args => {
       <FormField readOnly>
         <FormField.Label>Book</FormField.Label>
         <Combobox>
-          <Combobox.Input aria-label="Book" placeholder="Pick a book" />
+          <Combobox.Trigger aria-label="Book" placeholder="Pick a book" />
 
           <Combobox.Popover>
             <Combobox.Items>
@@ -577,7 +577,7 @@ export const FormFieldDisabled: StoryFn = _args => {
       <FormField disabled>
         <FormField.Label>Book</FormField.Label>
         <Combobox>
-          <Combobox.Input aria-label="Book" placeholder="Pick a book" />
+          <Combobox.Trigger aria-label="Book" placeholder="Pick a book" />
           <Combobox.Popover>
             <Combobox.Items>
               <Combobox.Item value="book-1">To Kill a Mockingbird</Combobox.Item>
@@ -600,7 +600,7 @@ export const FormFieldRequired: StoryFn = _args => {
       <FormField isRequired>
         <FormField.Label>Book</FormField.Label>
         <Combobox>
-          <Combobox.Input aria-label="Book" placeholder="Pick a book" />
+          <Combobox.Trigger aria-label="Book" placeholder="Pick a book" />
           <Combobox.Popover>
             <Combobox.Items>
               <Combobox.Item value="book-1">To Kill a Mockingbird</Combobox.Item>
@@ -629,7 +629,7 @@ export const FormFieldValidation: StoryFn = () => {
             setState(value === 'default' ? undefined : (value as 'success' | 'alert' | 'error'))
           }}
         >
-          <Combobox.Input aria-label="Book" placeholder="Pick a book" />
+          <Combobox.Trigger aria-label="Book" placeholder="Pick a book" />
           <Combobox.Popover>
             <Combobox.Items>
               <Combobox.Item value="default">default</Combobox.Item>
diff --git a/packages/components/combobox/src/ComboboxInput.styles.tsx b/packages/components/combobox/src/ComboboxTrigger.styles.tsx
similarity index 100%
rename from packages/components/combobox/src/ComboboxInput.styles.tsx
rename to packages/components/combobox/src/ComboboxTrigger.styles.tsx
diff --git a/packages/components/combobox/src/ComboboxInput.tsx b/packages/components/combobox/src/ComboboxTrigger.tsx
similarity index 97%
rename from packages/components/combobox/src/ComboboxInput.tsx
rename to packages/components/combobox/src/ComboboxTrigger.tsx
index cf4237955..a1894a503 100644
--- a/packages/components/combobox/src/ComboboxInput.tsx
+++ b/packages/components/combobox/src/ComboboxTrigger.tsx
@@ -8,8 +8,8 @@ import { VisuallyHidden } from '@spark-ui/visually-hidden'
 import { ComponentPropsWithoutRef, forwardRef, Fragment, type Ref, useEffect } from 'react'
 
 import { useComboboxContext } from './ComboboxContext'
-import { styles } from './ComboboxInput.styles'
 import { LeadingIcon } from './ComboboxLeadingIcon'
+import { styles } from './ComboboxTrigger.styles'
 
 type InputPrimitiveProps = ComponentPropsWithoutRef<'input'>
 
@@ -18,7 +18,7 @@ interface InputProps extends InputPrimitiveProps {
   onValueChange?: (value: string) => void
 }
 
-export const Input = forwardRef(
+export const Trigger = forwardRef(
   (
     {
       'aria-label': ariaLabel,
@@ -145,4 +145,4 @@ export const Input = forwardRef(
   }
 )
 
-Input.displayName = 'Combobox.Input'
+Trigger.displayName = 'Combobox.Trigger'
diff --git a/packages/components/combobox/src/index.ts b/packages/components/combobox/src/index.ts
index ec95b688a..c0c4e563c 100644
--- a/packages/components/combobox/src/index.ts
+++ b/packages/components/combobox/src/index.ts
@@ -5,7 +5,6 @@ import { ComboboxProvider, useComboboxContext } from './ComboboxContext'
 import { Divider } from './ComboboxDivider'
 import { Empty } from './ComboboxEmpty'
 import { Group } from './ComboboxGroup'
-import { Input } from './ComboboxInput'
 import { Item } from './ComboboxItem'
 import { ItemIndicator } from './ComboboxItemIndicator'
 import { Items } from './ComboboxItems'
@@ -13,6 +12,7 @@ import { ItemText } from './ComboboxItemText'
 import { Label } from './ComboboxLabel'
 import { LeadingIcon } from './ComboboxLeadingIcon'
 import { Popover } from './ComboboxPopover'
+import { Trigger } from './ComboboxTrigger'
 
 export { useComboboxContext, ComboboxProvider }
 
@@ -25,7 +25,7 @@ export const Combobox: FC<ComboboxProps> & {
   Label: typeof Label
   Popover: typeof Popover
   Divider: typeof Divider
-  Input: typeof Input
+  Trigger: typeof Trigger
   LeadingIcon: typeof LeadingIcon
   Empty: typeof Empty
 } = Object.assign(Root, {
@@ -37,7 +37,7 @@ export const Combobox: FC<ComboboxProps> & {
   Label,
   Popover,
   Divider,
-  Input,
+  Trigger,
   LeadingIcon,
   Empty,
 })
@@ -51,6 +51,6 @@ ItemIndicator.displayName = 'Combobox.ItemIndicator'
 Label.displayName = 'Combobox.Label'
 Popover.displayName = 'Combobox.Popover'
 Divider.displayName = 'Combobox.Divider'
-Input.displayName = 'Combobox.Input'
+Trigger.displayName = 'Combobox.Trigger'
 LeadingIcon.displayName = 'Combobox.LeadingIcon'
 Empty.displayName = 'Combobox.Empty'
diff --git a/packages/components/combobox/src/tests/Combobox.test.tsx b/packages/components/combobox/src/tests/Combobox.test.tsx
index 5e65439d5..8f81b58d6 100644
--- a/packages/components/combobox/src/tests/Combobox.test.tsx
+++ b/packages/components/combobox/src/tests/Combobox.test.tsx
@@ -10,7 +10,7 @@ describe('Combobox', () => {
   it('should render input and list of items', () => {
     render(
       <Combobox>
-        <Combobox.Input aria-label="Book" />
+        <Combobox.Trigger aria-label="Book" />
         <Combobox.Popover>
           <Combobox.Items>
             <Combobox.Item value="book-1">War and Peace</Combobox.Item>
@@ -37,7 +37,7 @@ describe('Combobox', () => {
       // Given a close combobox (default state)
       render(
         <Combobox>
-          <Combobox.Input aria-label="Book" />
+          <Combobox.Trigger aria-label="Book" />
           <Combobox.Popover>
             <Combobox.Items>
               <Combobox.Item value="book-1">War and Peace</Combobox.Item>
@@ -71,7 +71,7 @@ describe('Combobox', () => {
       // Given a close combobox without a popover(default state)
       render(
         <Combobox>
-          <Combobox.Input aria-label="Book" />
+          <Combobox.Trigger aria-label="Book" />
 
           <Combobox.Items>
             <Combobox.Item value="book-1">War and Peace</Combobox.Item>
@@ -104,7 +104,7 @@ describe('Combobox', () => {
       // Given a combobox that should remain opened
       render(
         <Combobox open>
-          <Combobox.Input aria-label="Book" />
+          <Combobox.Trigger aria-label="Book" />
           <Combobox.Popover>
             <Combobox.Items>
               <Combobox.Item value="book-1">War and Peace</Combobox.Item>
@@ -130,7 +130,7 @@ describe('Combobox', () => {
       // Given a combobox that should remain opened
       render(
         <Combobox defaultOpen>
-          <Combobox.Input aria-label="Book" />
+          <Combobox.Trigger aria-label="Book" />
           <Combobox.Popover>
             <Combobox.Items>
               <Combobox.Item value="book-1">War and Peace</Combobox.Item>
@@ -156,7 +156,7 @@ describe('Combobox', () => {
       // Given a combobox with no selected value yet
       render(
         <Combobox autoFilter>
-          <Combobox.Input aria-label="Book" placeholder="Pick a book" />
+          <Combobox.Trigger aria-label="Book" placeholder="Pick a book" />
           <Combobox.Popover>
             <Combobox.Items>
               <Combobox.Empty>No results found</Combobox.Empty>
@@ -186,7 +186,7 @@ describe('Combobox', () => {
       // Given a combobox with no selected value yet
       render(
         <Combobox>
-          <Combobox.Input aria-label="Book" placeholder="Pick a book" />
+          <Combobox.Trigger aria-label="Book" placeholder="Pick a book" />
           <Combobox.Popover>
             <Combobox.Items>
               <Combobox.Item value="book-1">War and Peace</Combobox.Item>
@@ -218,7 +218,7 @@ describe('Combobox', () => {
       // Given a combobox with a default selected value
       render(
         <Combobox defaultValue="book-2">
-          <Combobox.Input aria-label="Book" />
+          <Combobox.Trigger aria-label="Book" />
           <Combobox.Popover>
             <Combobox.Items>
               <Combobox.Item value="book-1">War and Peace</Combobox.Item>
@@ -237,7 +237,7 @@ describe('Combobox', () => {
       // Given a combobox with a default selected value
       render(
         <Combobox defaultValue="book-2">
-          <Combobox.Input aria-label="Book" />
+          <Combobox.Trigger aria-label="Book" />
           <Combobox.Popover>
             <Combobox.Items>
               <Combobox.Item value="book-1">
@@ -271,7 +271,7 @@ describe('Combobox', () => {
 
         return (
           <Combobox value={value} onValueChange={setValue}>
-            <Combobox.Input aria-label="Book" value={inputValue} onValueChange={setInputValue} />
+            <Combobox.Trigger aria-label="Book" value={inputValue} onValueChange={setInputValue} />
             <Combobox.Popover>
               <Combobox.Items>
                 <Combobox.Item value="book-1">War and Peace</Combobox.Item>
@@ -303,7 +303,7 @@ describe('Combobox', () => {
       // Given a combobox with no selected value yet
       render(
         <Combobox autoFilter>
-          <Combobox.Input aria-label="Book" placeholder="Pick a book" />
+          <Combobox.Trigger aria-label="Book" placeholder="Pick a book" />
           <Combobox.Popover>
             <Combobox.Items>
               <Combobox.Item value="book-1">War and Peace</Combobox.Item>
diff --git a/packages/components/combobox/src/tests/itemsGroups.test.tsx b/packages/components/combobox/src/tests/itemsGroups.test.tsx
index 9c01c24bd..ecdcda209 100644
--- a/packages/components/combobox/src/tests/itemsGroups.test.tsx
+++ b/packages/components/combobox/src/tests/itemsGroups.test.tsx
@@ -10,7 +10,7 @@ describe('Combobox', () => {
       // Given a combobox with items groups and group labels
       render(
         <Combobox>
-          <Combobox.Input aria-label="Book" />
+          <Combobox.Trigger aria-label="Book" />
           <Combobox.Popover>
             <Combobox.Items>
               <Combobox.Group>
diff --git a/packages/components/combobox/src/tests/multipleSelection.test.tsx b/packages/components/combobox/src/tests/multipleSelection.test.tsx
index c03fdd931..3555dfc79 100644
--- a/packages/components/combobox/src/tests/multipleSelection.test.tsx
+++ b/packages/components/combobox/src/tests/multipleSelection.test.tsx
@@ -13,7 +13,7 @@ describe('Combobox', () => {
       // Given a combobox with no selected value yet
       render(
         <Combobox multiple>
-          <Combobox.Input aria-label="Book" placeholder="Pick a book" />
+          <Combobox.Trigger aria-label="Book" placeholder="Pick a book" />
           <Combobox.Popover>
             <Combobox.Items>
               <Combobox.Item value="book-1">War and Peace</Combobox.Item>
@@ -47,7 +47,7 @@ describe('Combobox', () => {
       // Given a combobox with no selected value yet
       render(
         <Combobox multiple>
-          <Combobox.Input aria-label="Book" placeholder="Pick a book" />
+          <Combobox.Trigger aria-label="Book" placeholder="Pick a book" />
           <Combobox.Popover>
             <Combobox.Items>
               <Combobox.Item value="book-1">War and Peace</Combobox.Item>
@@ -82,7 +82,7 @@ describe('Combobox', () => {
       // Given a combobox with no selected value yet
       render(
         <Combobox multiple>
-          <Combobox.Input aria-label="Book" placeholder="Pick a book" />
+          <Combobox.Trigger aria-label="Book" placeholder="Pick a book" />
           <Combobox.Popover>
             <Combobox.Items>
               <Combobox.Item value="book-1">War and Peace</Combobox.Item>
diff --git a/packages/components/combobox/src/tests/withFormField.test.tsx b/packages/components/combobox/src/tests/withFormField.test.tsx
index 689c28a66..e196ef60a 100644
--- a/packages/components/combobox/src/tests/withFormField.test.tsx
+++ b/packages/components/combobox/src/tests/withFormField.test.tsx
@@ -12,7 +12,7 @@ describe('Combobox', () => {
         <FormField state="error">
           <FormField.Label>Book</FormField.Label>
           <Combobox>
-            <Combobox.Input />
+            <Combobox.Trigger />
             <Combobox.Popover>
               <Combobox.Items>
                 <Combobox.Item value="book-1">War and Peace</Combobox.Item>

From 0fb02029a2049495e9c391d77683d1451372b696 Mon Sep 17 00:00:00 2001
From: Powerplex <julien.bonnin.dev@gmail.com>
Date: Wed, 14 Feb 2024 17:38:10 +0100
Subject: [PATCH 2/2] refactor(combobox): split combobox input from trigger

---
 .../components/combobox/src/Combobox.doc.mdx  |   7 +-
 .../combobox/src/Combobox.stories.tsx         | 118 ++++++++++++------
 .../components/combobox/src/ComboboxInput.tsx | 109 ++++++++++++++++
 .../combobox/src/ComboboxTrigger.tsx          |  99 ++-------------
 packages/components/combobox/src/index.ts     |   4 +
 .../combobox/src/tests/Combobox.test.tsx      |  44 +++++--
 .../combobox/src/tests/itemsGroups.test.tsx   |   4 +-
 .../src/tests/multipleSelection.test.tsx      |  12 +-
 .../combobox/src/tests/withFormField.test.tsx |   4 +-
 9 files changed, 254 insertions(+), 147 deletions(-)
 create mode 100644 packages/components/combobox/src/ComboboxInput.tsx

diff --git a/packages/components/combobox/src/Combobox.doc.mdx b/packages/components/combobox/src/Combobox.doc.mdx
index 0fb8c5285..542dfc380 100644
--- a/packages/components/combobox/src/Combobox.doc.mdx
+++ b/packages/components/combobox/src/Combobox.doc.mdx
@@ -33,7 +33,12 @@ import { Combobox } from '@spark-ui/combobox'
     'Combobox.Trigger': {
       of: Combobox.Trigger,
       description:
-        'The button that toggles the select. The Select.Popover will position itself by aligning over the trigger.',
+        'The area that toggles the combobox popover. The Select.Popover will position itself by aligning with its trigger.',
+    },
+    'Combobox.Input': {
+      of: Combobox.Input,
+      description:
+        'The typing area in which the user can type. The input behaviour will differ if `autoComplete` is used or not.',
     },
     'Combobox.LeadingIcon': {
       of: Combobox.LeadingIcon,
diff --git a/packages/components/combobox/src/Combobox.stories.tsx b/packages/components/combobox/src/Combobox.stories.tsx
index 7487d41a9..1436aca67 100644
--- a/packages/components/combobox/src/Combobox.stories.tsx
+++ b/packages/components/combobox/src/Combobox.stories.tsx
@@ -19,7 +19,7 @@ export default meta
  * Minimal anatomy:
  * - Combobox
  *  - Combobox.Trigger
- *    - Combobox.Trigger
+ *    - Combobox.Input
  *  - Combobox.Popover
  *    - Combobox.Items
  *      - Combobox.Item
@@ -29,7 +29,7 @@ export default meta
  *  - Combobox.Trigger
  *    - Combobox.LeadingIcon
  *    - Combobox.SelectedItems
- *    - Combobox.Trigger
+ *    - Combobox.Input
  *    - Combobox.ClearButton
  *    - Combobox.Disclosure
  *  - Combobox.Popover
@@ -64,7 +64,9 @@ export const Default: StoryFn = _args => {
   return (
     <div className="pb-[300px]">
       <Combobox>
-        <Combobox.Trigger aria-label="Book" placeholder="Pick a book" />
+        <Combobox.Trigger>
+          <Combobox.Input aria-label="Book" placeholder="Pick a book" />
+        </Combobox.Trigger>
 
         <Combobox.Popover>
           <Combobox.Items>
@@ -88,12 +90,14 @@ export const Controlled: StoryFn = () => {
   return (
     <div className="pb-[300px]">
       <Combobox value={value} onValueChange={setValue}>
-        <Combobox.Trigger
-          aria-label="Book"
-          placeholder="Pick a book"
-          value={inputValue}
-          onValueChange={setInputValue}
-        />
+        <Combobox.Trigger>
+          <Combobox.Input
+            aria-label="Book"
+            placeholder="Pick a book"
+            value={inputValue}
+            onValueChange={setInputValue}
+          />
+        </Combobox.Trigger>
 
         <Combobox.Popover>
           <Combobox.Items>
@@ -126,7 +130,9 @@ export const ControlledOpenState: StoryFn = () => {
 
       <div className="pb-[300px]">
         <Combobox open={open} onOpenChange={setOpen}>
-          <Combobox.Trigger aria-label="Book" placeholder="Pick a book" />
+          <Combobox.Trigger>
+            <Combobox.Input aria-label="Book" placeholder="Pick a book" />
+          </Combobox.Trigger>
 
           <Combobox.Popover>
             <Combobox.Items>
@@ -148,7 +154,9 @@ export const CustomItem: StoryFn = _args => {
   return (
     <div className="pb-[300px]">
       <Combobox>
-        <Combobox.Trigger aria-label="Book" placeholder="Pick a book" />
+        <Combobox.Trigger>
+          <Combobox.Input aria-label="Book" placeholder="Pick a book" />
+        </Combobox.Trigger>
 
         <Combobox.Popover>
           <Combobox.Items>
@@ -187,7 +195,9 @@ export const Disabled: StoryFn = _args => {
   return (
     <div className="pb-[300px]">
       <Combobox disabled>
-        <Combobox.Trigger aria-label="Book" placeholder="Pick a book" />
+        <Combobox.Trigger>
+          <Combobox.Input aria-label="Book" placeholder="Pick a book" />
+        </Combobox.Trigger>
 
         <Combobox.Popover>
           <Combobox.Items>
@@ -217,7 +227,9 @@ export const FilteringAutoFilter: StoryFn = _args => {
   return (
     <div className="pb-[300px]">
       <Combobox autoFilter>
-        <Combobox.Trigger aria-label="Book" placeholder="Pick a book" />
+        <Combobox.Trigger>
+          <Combobox.Input aria-label="Book" placeholder="Pick a book" />
+        </Combobox.Trigger>
 
         <Combobox.Popover>
           <Combobox.Items>
@@ -248,12 +260,14 @@ export const FilteringManual: StoryFn = () => {
   return (
     <div className="pb-[300px]">
       <Combobox>
-        <Combobox.Trigger
-          aria-label="Book"
-          placeholder="Pick a book"
-          value={inputValue}
-          onValueChange={setInputValue}
-        />
+        <Combobox.Trigger>
+          <Combobox.Input
+            aria-label="Book"
+            placeholder="Pick a book"
+            value={inputValue}
+            onValueChange={setInputValue}
+          />
+        </Combobox.Trigger>
 
         <Combobox.Popover>
           <Combobox.Items>
@@ -278,7 +292,9 @@ export const ReadOnly: StoryFn = _args => {
   return (
     <div className="pb-[300px]">
       <Combobox readOnly>
-        <Combobox.Trigger aria-label="Book" placeholder="Pick a book" />
+        <Combobox.Trigger aria-label="Book">
+          <Combobox.Input aria-label="Book" placeholder="Pick a book" />
+        </Combobox.Trigger>
 
         <Combobox.Popover>
           <Combobox.Items>
@@ -299,7 +315,9 @@ export const DisabledItem: StoryFn = _args => {
   return (
     <div className="pb-[300px]">
       <Combobox>
-        <Combobox.Trigger aria-label="Book" placeholder="Pick a book" />
+        <Combobox.Trigger>
+          <Combobox.Input aria-label="Book" placeholder="Pick a book" />
+        </Combobox.Trigger>
 
         <Combobox.Popover>
           <Combobox.Items>
@@ -322,7 +340,9 @@ export const Grouped: StoryFn = _args => {
   return (
     <div className="pb-[300px]">
       <Combobox autoFilter>
-        <Combobox.Trigger aria-label="Book" placeholder="Pick a book" />
+        <Combobox.Trigger>
+          <Combobox.Input aria-label="Book" placeholder="Pick a book" />
+        </Combobox.Trigger>
         <Combobox.Popover>
           <Combobox.Items>
             <Combobox.Group>
@@ -351,7 +371,9 @@ export const LeadingIcon: StoryFn = _args => {
   return (
     <div className="pb-[300px]">
       <Combobox>
-        <Combobox.Trigger aria-label="Book" placeholder="Pick a book" />
+        <Combobox.Trigger>
+          <Combobox.Input aria-label="Book" placeholder="Pick a book" />
+        </Combobox.Trigger>
 
         <Combobox.Popover>
           <Combobox.Items>
@@ -374,7 +396,9 @@ export const ItemIndicator: StoryFn = _args => {
   return (
     <div className="pb-[300px]">
       <Combobox multiple defaultValue={['book-1', 'book-2']}>
-        <Combobox.Trigger aria-label="Book" placeholder="Pick a book" />
+        <Combobox.Trigger aria-label="Book">
+          <Combobox.Input aria-label="Book" placeholder="Pick a book" />
+        </Combobox.Trigger>
 
         <Combobox.Popover>
           <Combobox.Items>
@@ -419,7 +443,9 @@ export const Statuses: StoryFn = () => {
       {statuses.map(status => {
         return (
           <Combobox state={status}>
-            <Combobox.Trigger aria-label="Book" placeholder="Pick a book" />
+            <Combobox.Trigger aria-label="Book">
+              <Combobox.Input aria-label="Book" placeholder="Pick a book" />
+            </Combobox.Trigger>
 
             <Combobox.Popover>
               <Combobox.Items>
@@ -442,7 +468,9 @@ export const MultipleSelection: StoryFn = _args => {
   return (
     <div className="pb-[300px]">
       <Combobox multiple autoFilter defaultValue={['book-1', 'book-2']}>
-        <Combobox.Trigger aria-label="Book" placeholder="Pick a book" />
+        <Combobox.Trigger>
+          <Combobox.Input aria-label="Book" placeholder="Pick a book" />
+        </Combobox.Trigger>
 
         <Combobox.Popover>
           <Combobox.Items>
@@ -475,12 +503,14 @@ export const MultipleSelectionControlled: StoryFn = () => {
   return (
     <div className="flex flex-col  gap-md pb-[300px]">
       <Combobox autoFilter multiple value={selectedValues} onValueChange={setSelectedValues}>
-        <Combobox.Trigger
-          aria-label="Book"
-          placeholder="todo placeholder"
-          value={inputValue}
-          onValueChange={setInputValue}
-        />
+        <Combobox.Trigger>
+          <Combobox.Input
+            aria-label="Book"
+            placeholder="Pick a book"
+            value={inputValue}
+            onValueChange={setInputValue}
+          />
+        </Combobox.Trigger>
 
         <Combobox.Popover>
           <Combobox.Items>
@@ -505,7 +535,9 @@ export const FormFieldLabel: StoryFn = _args => {
       <FormField>
         <FormField.Label>Book</FormField.Label>
         <Combobox>
-          <Combobox.Trigger aria-label="Book" placeholder="Pick a book" />
+          <Combobox.Trigger>
+            <Combobox.Input placeholder="Pick a book" />
+          </Combobox.Trigger>
           <Combobox.Popover>
             <Combobox.Items>
               <Combobox.Item value="book-1">To Kill a Mockingbird</Combobox.Item>
@@ -530,7 +562,9 @@ export const FormFieldHiddenLabel: StoryFn = _args => {
           <VisuallyHidden>Book</VisuallyHidden>
         </FormField.Label>
         <Combobox>
-          <Combobox.Trigger aria-label="Book" placeholder="Pick a book" />
+          <Combobox.Trigger>
+            <Combobox.Input placeholder="Pick a book" />
+          </Combobox.Trigger>
           <Combobox.Popover>
             <Combobox.Items>
               <Combobox.Item value="book-1">To Kill a Mockingbird</Combobox.Item>
@@ -553,7 +587,9 @@ export const FormFieldReadOnly: StoryFn = _args => {
       <FormField readOnly>
         <FormField.Label>Book</FormField.Label>
         <Combobox>
-          <Combobox.Trigger aria-label="Book" placeholder="Pick a book" />
+          <Combobox.Trigger>
+            <Combobox.Input aria-label="Book" placeholder="Pick a book" />
+          </Combobox.Trigger>
 
           <Combobox.Popover>
             <Combobox.Items>
@@ -577,7 +613,9 @@ export const FormFieldDisabled: StoryFn = _args => {
       <FormField disabled>
         <FormField.Label>Book</FormField.Label>
         <Combobox>
-          <Combobox.Trigger aria-label="Book" placeholder="Pick a book" />
+          <Combobox.Trigger>
+            <Combobox.Input aria-label="Book" placeholder="Pick a book" />
+          </Combobox.Trigger>
           <Combobox.Popover>
             <Combobox.Items>
               <Combobox.Item value="book-1">To Kill a Mockingbird</Combobox.Item>
@@ -600,7 +638,9 @@ export const FormFieldRequired: StoryFn = _args => {
       <FormField isRequired>
         <FormField.Label>Book</FormField.Label>
         <Combobox>
-          <Combobox.Trigger aria-label="Book" placeholder="Pick a book" />
+          <Combobox.Trigger>
+            <Combobox.Input aria-label="Book" placeholder="Pick a book" />
+          </Combobox.Trigger>
           <Combobox.Popover>
             <Combobox.Items>
               <Combobox.Item value="book-1">To Kill a Mockingbird</Combobox.Item>
@@ -629,7 +669,9 @@ export const FormFieldValidation: StoryFn = () => {
             setState(value === 'default' ? undefined : (value as 'success' | 'alert' | 'error'))
           }}
         >
-          <Combobox.Trigger aria-label="Book" placeholder="Pick a book" />
+          <Combobox.Trigger aria-label="Book">
+            <Combobox.Input aria-label="Book" placeholder="Pick a book" />
+          </Combobox.Trigger>
           <Combobox.Popover>
             <Combobox.Items>
               <Combobox.Item value="default">default</Combobox.Item>
diff --git a/packages/components/combobox/src/ComboboxInput.tsx b/packages/components/combobox/src/ComboboxInput.tsx
new file mode 100644
index 000000000..f2a7b37b8
--- /dev/null
+++ b/packages/components/combobox/src/ComboboxInput.tsx
@@ -0,0 +1,109 @@
+import { Popover } from '@spark-ui/popover'
+import { useMergeRefs } from '@spark-ui/use-merge-refs'
+import { VisuallyHidden } from '@spark-ui/visually-hidden'
+import { cx } from 'class-variance-authority'
+import { ComponentPropsWithoutRef, forwardRef, Fragment, type Ref, useEffect } from 'react'
+
+import { useComboboxContext } from './ComboboxContext'
+
+type InputPrimitiveProps = ComponentPropsWithoutRef<'input'>
+
+interface InputProps extends Omit<InputPrimitiveProps, 'value' | 'placeholder'> {
+  className?: string
+  placeholder?: string
+  value?: string
+  onValueChange?: (value: string) => void
+}
+
+export const Input = forwardRef(
+  (
+    {
+      'aria-label': ariaLabel,
+      className,
+      value: valueProp,
+      placeholder: placeholderProp,
+      onValueChange,
+      ...props
+    }: InputProps,
+    forwardedRef: Ref<HTMLInputElement>
+  ) => {
+    const {
+      getDropdownProps,
+      getInputProps,
+      getLabelProps,
+      hasPopover,
+      disabled,
+      readOnly,
+      inputValue,
+      setInputValue,
+      setIsInputControlled,
+      setLastInteractionType,
+      setOnInputValueChange,
+      multiple,
+      selectedItem,
+      selectedItems,
+    } = useComboboxContext()
+
+    const isControlled = valueProp != null
+    const placeholder =
+      multiple && selectedItems.length ? selectedItems.map(i => i.text).join(', ') : placeholderProp
+
+    useEffect(() => {
+      setIsInputControlled(isControlled)
+      if (isControlled) {
+        setInputValue(valueProp as string)
+      }
+    }, [isControlled, valueProp])
+
+    useEffect(() => {
+      // Make Downshift aware of `onValueChange` prop to dispatch it
+      if (onValueChange) {
+        setOnInputValueChange(() => onValueChange)
+      }
+
+      // Sync input with combobox default value
+      if (!multiple && selectedItem && !isControlled) {
+        setInputValue(selectedItem.text)
+      }
+    }, [])
+
+    const [PopoverTrigger, popoverTriggerProps] = hasPopover
+      ? [Popover.Trigger, { asChild: true, type: undefined }]
+      : [Fragment, {}]
+
+    const { ref: downshiftRef, ...downshiftInputProps } = getInputProps({
+      ...getDropdownProps(),
+      onKeyDown: () => {
+        setLastInteractionType('keyboard')
+      },
+    })
+
+    const ref = useMergeRefs(forwardedRef, downshiftRef)
+
+    return (
+      <>
+        {ariaLabel && (
+          <VisuallyHidden>
+            <label {...getLabelProps()}>{ariaLabel}</label>
+          </VisuallyHidden>
+        )}
+
+        <PopoverTrigger {...popoverTriggerProps}>
+          <input
+            data-spark-component="combobox-input"
+            ref={ref}
+            type="text"
+            placeholder={placeholder}
+            disabled={disabled || readOnly}
+            className={cx('text-ellipsis', className)}
+            {...props}
+            {...downshiftInputProps}
+            value={inputValue}
+          />
+        </PopoverTrigger>
+      </>
+    )
+  }
+)
+
+Input.displayName = 'Combobox.Input'
diff --git a/packages/components/combobox/src/ComboboxTrigger.tsx b/packages/components/combobox/src/ComboboxTrigger.tsx
index a1894a503..eef3e8411 100644
--- a/packages/components/combobox/src/ComboboxTrigger.tsx
+++ b/packages/components/combobox/src/ComboboxTrigger.tsx
@@ -3,101 +3,29 @@ import { Icon } from '@spark-ui/icon'
 import { IconButton } from '@spark-ui/icon-button'
 import { ArrowHorizontalDown } from '@spark-ui/icons/dist/icons/ArrowHorizontalDown'
 import { Popover } from '@spark-ui/popover'
-import { useMergeRefs } from '@spark-ui/use-merge-refs'
-import { VisuallyHidden } from '@spark-ui/visually-hidden'
-import { ComponentPropsWithoutRef, forwardRef, Fragment, type Ref, useEffect } from 'react'
+import { forwardRef, Fragment, ReactNode, type Ref } from 'react'
 
 import { useComboboxContext } from './ComboboxContext'
 import { LeadingIcon } from './ComboboxLeadingIcon'
 import { styles } from './ComboboxTrigger.styles'
 
-type InputPrimitiveProps = ComponentPropsWithoutRef<'input'>
-
-interface InputProps extends InputPrimitiveProps {
+interface TriggerProps {
   className?: string
-  onValueChange?: (value: string) => void
+  children?: ReactNode
 }
 
 export const Trigger = forwardRef(
-  (
-    {
-      'aria-label': ariaLabel,
-      className,
-      value: valueProp,
-      placeholder: placeholderProp,
-      onValueChange,
-      ...props
-    }: InputProps,
-    forwardedRef: Ref<HTMLInputElement>
-  ) => {
-    const {
-      getToggleButtonProps,
-      getDropdownProps,
-      getInputProps,
-      getLabelProps,
-      hasPopover,
-      disabled,
-      readOnly,
-      inputValue,
-      setInputValue,
-      setIsInputControlled,
-      state,
-      setLastInteractionType,
-      setOnInputValueChange,
-      multiple,
-      selectedItem,
-      selectedItems,
-    } = useComboboxContext()
-
-    const isControlled = valueProp != null
-    const placeholder =
-      multiple && selectedItems.length ? selectedItems.map(i => i.text).join(', ') : placeholderProp
-
-    useEffect(() => {
-      setIsInputControlled(isControlled)
-      if (isControlled) {
-        setInputValue(valueProp as string)
-      }
-    }, [isControlled, valueProp])
-
-    useEffect(() => {
-      // Make Downshift aware of `onValueChange` prop to dispatch it
-      if (onValueChange) {
-        setOnInputValueChange(() => onValueChange)
-      }
-
-      // Sync input with combobox default value
-      if (!multiple && selectedItem && !isControlled) {
-        setInputValue(selectedItem.text)
-      }
-    }, [])
+  ({ className, children }: TriggerProps, forwardedRef: Ref<HTMLDivElement>) => {
+    const { getToggleButtonProps, hasPopover, disabled, readOnly, state } = useComboboxContext()
 
     const [PopoverAnchor, popoverAnchorProps] = hasPopover
       ? [Popover.Anchor, { asChild: true, type: undefined }]
       : [Fragment, {}]
 
-    const [PopoverTrigger, popoverTriggerProps] = hasPopover
-      ? [Popover.Trigger, { asChild: true, type: undefined }]
-      : [Fragment, {}]
-
-    const { ref: downshiftRef, ...downshiftInputProps } = getInputProps({
-      ...getDropdownProps(),
-      onKeyDown: () => {
-        setLastInteractionType('keyboard')
-      },
-    })
-
-    const ref = useMergeRefs(forwardedRef, downshiftRef)
-
     return (
       <>
-        {ariaLabel && (
-          <VisuallyHidden>
-            <label {...getLabelProps()}>{ariaLabel}</label>
-          </VisuallyHidden>
-        )}
         <PopoverAnchor {...popoverAnchorProps}>
-          <div className={styles({ className, state, disabled, readOnly })}>
+          <div ref={forwardedRef} className={styles({ className, state, disabled, readOnly })}>
             {/* 1 - Leading icon (optional) */}
             <LeadingIcon>
               <ArrowHorizontalDown />
@@ -106,20 +34,7 @@ export const Trigger = forwardRef(
             {/* 2 - TODO - selected items (optional, multiple selection only) */}
             <p>[selected items chips (v2)]</p>
 
-            {/* 3 - Input typing area  - MANDATORY */}
-            <PopoverTrigger {...popoverTriggerProps}>
-              <input
-                data-spark-component="combobox-input"
-                ref={ref}
-                type="text"
-                placeholder={placeholder}
-                disabled={disabled || readOnly}
-                className="text-ellipsis"
-                {...props}
-                {...downshiftInputProps}
-                value={inputValue}
-              />
-            </PopoverTrigger>
+            {children}
 
             {/* 4 - Combobox clear button (optional) */}
             <p>[clear]</p>
diff --git a/packages/components/combobox/src/index.ts b/packages/components/combobox/src/index.ts
index c0c4e563c..645be9df5 100644
--- a/packages/components/combobox/src/index.ts
+++ b/packages/components/combobox/src/index.ts
@@ -5,6 +5,7 @@ import { ComboboxProvider, useComboboxContext } from './ComboboxContext'
 import { Divider } from './ComboboxDivider'
 import { Empty } from './ComboboxEmpty'
 import { Group } from './ComboboxGroup'
+import { Input } from './ComboboxInput'
 import { Item } from './ComboboxItem'
 import { ItemIndicator } from './ComboboxItemIndicator'
 import { Items } from './ComboboxItems'
@@ -28,6 +29,7 @@ export const Combobox: FC<ComboboxProps> & {
   Trigger: typeof Trigger
   LeadingIcon: typeof LeadingIcon
   Empty: typeof Empty
+  Input: typeof Input
 } = Object.assign(Root, {
   Group,
   Item,
@@ -40,6 +42,7 @@ export const Combobox: FC<ComboboxProps> & {
   Trigger,
   LeadingIcon,
   Empty,
+  Input,
 })
 
 Combobox.displayName = 'Combobox'
@@ -54,3 +57,4 @@ Divider.displayName = 'Combobox.Divider'
 Trigger.displayName = 'Combobox.Trigger'
 LeadingIcon.displayName = 'Combobox.LeadingIcon'
 Empty.displayName = 'Combobox.Empty'
+Input.displayName = 'Combobox.Input'
diff --git a/packages/components/combobox/src/tests/Combobox.test.tsx b/packages/components/combobox/src/tests/Combobox.test.tsx
index 8f81b58d6..cb7f6aa88 100644
--- a/packages/components/combobox/src/tests/Combobox.test.tsx
+++ b/packages/components/combobox/src/tests/Combobox.test.tsx
@@ -10,7 +10,9 @@ describe('Combobox', () => {
   it('should render input and list of items', () => {
     render(
       <Combobox>
-        <Combobox.Trigger aria-label="Book" />
+        <Combobox.Trigger>
+          <Combobox.Input aria-label="Book" />
+        </Combobox.Trigger>
         <Combobox.Popover>
           <Combobox.Items>
             <Combobox.Item value="book-1">War and Peace</Combobox.Item>
@@ -37,7 +39,9 @@ describe('Combobox', () => {
       // Given a close combobox (default state)
       render(
         <Combobox>
-          <Combobox.Trigger aria-label="Book" />
+          <Combobox.Trigger>
+            <Combobox.Input aria-label="Book" />
+          </Combobox.Trigger>
           <Combobox.Popover>
             <Combobox.Items>
               <Combobox.Item value="book-1">War and Peace</Combobox.Item>
@@ -71,7 +75,9 @@ describe('Combobox', () => {
       // Given a close combobox without a popover(default state)
       render(
         <Combobox>
-          <Combobox.Trigger aria-label="Book" />
+          <Combobox.Trigger>
+            <Combobox.Input aria-label="Book" />
+          </Combobox.Trigger>
 
           <Combobox.Items>
             <Combobox.Item value="book-1">War and Peace</Combobox.Item>
@@ -104,7 +110,9 @@ describe('Combobox', () => {
       // Given a combobox that should remain opened
       render(
         <Combobox open>
-          <Combobox.Trigger aria-label="Book" />
+          <Combobox.Trigger>
+            <Combobox.Input aria-label="Book" />
+          </Combobox.Trigger>
           <Combobox.Popover>
             <Combobox.Items>
               <Combobox.Item value="book-1">War and Peace</Combobox.Item>
@@ -130,7 +138,9 @@ describe('Combobox', () => {
       // Given a combobox that should remain opened
       render(
         <Combobox defaultOpen>
-          <Combobox.Trigger aria-label="Book" />
+          <Combobox.Trigger>
+            <Combobox.Input aria-label="Book" />
+          </Combobox.Trigger>
           <Combobox.Popover>
             <Combobox.Items>
               <Combobox.Item value="book-1">War and Peace</Combobox.Item>
@@ -156,7 +166,9 @@ describe('Combobox', () => {
       // Given a combobox with no selected value yet
       render(
         <Combobox autoFilter>
-          <Combobox.Trigger aria-label="Book" placeholder="Pick a book" />
+          <Combobox.Trigger>
+            <Combobox.Input aria-label="Book" placeholder="Pick a book" />
+          </Combobox.Trigger>
           <Combobox.Popover>
             <Combobox.Items>
               <Combobox.Empty>No results found</Combobox.Empty>
@@ -186,7 +198,9 @@ describe('Combobox', () => {
       // Given a combobox with no selected value yet
       render(
         <Combobox>
-          <Combobox.Trigger aria-label="Book" placeholder="Pick a book" />
+          <Combobox.Trigger>
+            <Combobox.Input aria-label="Book" placeholder="Pick a book" />
+          </Combobox.Trigger>
           <Combobox.Popover>
             <Combobox.Items>
               <Combobox.Item value="book-1">War and Peace</Combobox.Item>
@@ -218,7 +232,9 @@ describe('Combobox', () => {
       // Given a combobox with a default selected value
       render(
         <Combobox defaultValue="book-2">
-          <Combobox.Trigger aria-label="Book" />
+          <Combobox.Trigger>
+            <Combobox.Input aria-label="Book" />
+          </Combobox.Trigger>
           <Combobox.Popover>
             <Combobox.Items>
               <Combobox.Item value="book-1">War and Peace</Combobox.Item>
@@ -237,7 +253,9 @@ describe('Combobox', () => {
       // Given a combobox with a default selected value
       render(
         <Combobox defaultValue="book-2">
-          <Combobox.Trigger aria-label="Book" />
+          <Combobox.Trigger>
+            <Combobox.Input aria-label="Book" />
+          </Combobox.Trigger>
           <Combobox.Popover>
             <Combobox.Items>
               <Combobox.Item value="book-1">
@@ -271,7 +289,9 @@ describe('Combobox', () => {
 
         return (
           <Combobox value={value} onValueChange={setValue}>
-            <Combobox.Trigger aria-label="Book" value={inputValue} onValueChange={setInputValue} />
+            <Combobox.Trigger>
+              <Combobox.Input aria-label="Book" value={inputValue} onValueChange={setInputValue} />
+            </Combobox.Trigger>
             <Combobox.Popover>
               <Combobox.Items>
                 <Combobox.Item value="book-1">War and Peace</Combobox.Item>
@@ -303,7 +323,9 @@ describe('Combobox', () => {
       // Given a combobox with no selected value yet
       render(
         <Combobox autoFilter>
-          <Combobox.Trigger aria-label="Book" placeholder="Pick a book" />
+          <Combobox.Trigger>
+            <Combobox.Input aria-label="Book" placeholder="Pick a book" />
+          </Combobox.Trigger>
           <Combobox.Popover>
             <Combobox.Items>
               <Combobox.Item value="book-1">War and Peace</Combobox.Item>
diff --git a/packages/components/combobox/src/tests/itemsGroups.test.tsx b/packages/components/combobox/src/tests/itemsGroups.test.tsx
index ecdcda209..19c35faa4 100644
--- a/packages/components/combobox/src/tests/itemsGroups.test.tsx
+++ b/packages/components/combobox/src/tests/itemsGroups.test.tsx
@@ -10,7 +10,9 @@ describe('Combobox', () => {
       // Given a combobox with items groups and group labels
       render(
         <Combobox>
-          <Combobox.Trigger aria-label="Book" />
+          <Combobox.Trigger>
+            <Combobox.Input aria-label="Book" />
+          </Combobox.Trigger>
           <Combobox.Popover>
             <Combobox.Items>
               <Combobox.Group>
diff --git a/packages/components/combobox/src/tests/multipleSelection.test.tsx b/packages/components/combobox/src/tests/multipleSelection.test.tsx
index 3555dfc79..581ed0571 100644
--- a/packages/components/combobox/src/tests/multipleSelection.test.tsx
+++ b/packages/components/combobox/src/tests/multipleSelection.test.tsx
@@ -13,7 +13,9 @@ describe('Combobox', () => {
       // Given a combobox with no selected value yet
       render(
         <Combobox multiple>
-          <Combobox.Trigger aria-label="Book" placeholder="Pick a book" />
+          <Combobox.Trigger>
+            <Combobox.Input aria-label="Book" placeholder="Pick a book" />
+          </Combobox.Trigger>
           <Combobox.Popover>
             <Combobox.Items>
               <Combobox.Item value="book-1">War and Peace</Combobox.Item>
@@ -47,7 +49,9 @@ describe('Combobox', () => {
       // Given a combobox with no selected value yet
       render(
         <Combobox multiple>
-          <Combobox.Trigger aria-label="Book" placeholder="Pick a book" />
+          <Combobox.Trigger>
+            <Combobox.Input aria-label="Book" placeholder="Pick a book" />
+          </Combobox.Trigger>
           <Combobox.Popover>
             <Combobox.Items>
               <Combobox.Item value="book-1">War and Peace</Combobox.Item>
@@ -82,7 +86,9 @@ describe('Combobox', () => {
       // Given a combobox with no selected value yet
       render(
         <Combobox multiple>
-          <Combobox.Trigger aria-label="Book" placeholder="Pick a book" />
+          <Combobox.Trigger>
+            <Combobox.Input aria-label="Book" placeholder="Pick a book" />
+          </Combobox.Trigger>
           <Combobox.Popover>
             <Combobox.Items>
               <Combobox.Item value="book-1">War and Peace</Combobox.Item>
diff --git a/packages/components/combobox/src/tests/withFormField.test.tsx b/packages/components/combobox/src/tests/withFormField.test.tsx
index e196ef60a..be1272735 100644
--- a/packages/components/combobox/src/tests/withFormField.test.tsx
+++ b/packages/components/combobox/src/tests/withFormField.test.tsx
@@ -12,7 +12,9 @@ describe('Combobox', () => {
         <FormField state="error">
           <FormField.Label>Book</FormField.Label>
           <Combobox>
-            <Combobox.Trigger />
+            <Combobox.Trigger>
+              <Combobox.Input aria-label="Book" placeholder="Pick a book" />
+            </Combobox.Trigger>
             <Combobox.Popover>
               <Combobox.Items>
                 <Combobox.Item value="book-1">War and Peace</Combobox.Item>