diff --git a/apps/www/src/content/docs/components/combobox/demo.ts b/apps/www/src/content/docs/components/combobox/demo.ts
index 39c350ea7..362b75aef 100644
--- a/apps/www/src/content/docs/components/combobox/demo.ts
+++ b/apps/www/src/content/docs/components/combobox/demo.ts
@@ -78,13 +78,13 @@ export const groupDemo = {
     <Combobox.Input placeholder="Search items" width={240} />
     <Combobox.Content>
       <Combobox.Group>
-        <Combobox.Label>Fruits</Combobox.Label>
+        <Combobox.GroupLabel>Fruits</Combobox.GroupLabel>
         <Combobox.Item value="apple">Apple</Combobox.Item>
         <Combobox.Item value="banana">Banana</Combobox.Item>
       </Combobox.Group>
       <Combobox.Separator />
       <Combobox.Group>
-        <Combobox.Label>Vegetables</Combobox.Label>
+        <Combobox.GroupLabel>Vegetables</Combobox.GroupLabel>
         <Combobox.Item value="carrot">Carrot</Combobox.Item>
         <Combobox.Item value="broccoli">Broccoli</Combobox.Item>
       </Combobox.Group>
@@ -92,6 +92,40 @@ export const groupDemo = {
   </Combobox>`
 };
 
+export const labelDemo = {
+  type: 'code',
+  code: `
+  <Combobox multiple>
+    <Flex direction="column" gap={2}>
+      <Combobox.Label>Fruits</Combobox.Label>
+      <Flex align="center" gap={2}>
+        <Combobox.Input placeholder="Select fruits" width={300} />
+        <Combobox.Clear />
+      </Flex>
+    </Flex>
+    <Combobox.Content>
+      <Combobox.Item>Apple</Combobox.Item>
+      <Combobox.Item>Banana</Combobox.Item>
+      <Combobox.Item>Grape</Combobox.Item>
+      <Combobox.Item>Orange</Combobox.Item>
+    </Combobox.Content>
+  </Combobox>`
+};
+
+export const emptyDemo = {
+  type: 'code',
+  code: `
+  <Combobox>
+    <Combobox.Input placeholder="Type 'xyz'" width={240} />
+    <Combobox.Content>
+      <Combobox.Empty>No fruit matches your search</Combobox.Empty>
+      <Combobox.Item>Apple</Combobox.Item>
+      <Combobox.Item>Banana</Combobox.Item>
+      <Combobox.Item>Grape</Combobox.Item>
+    </Combobox.Content>
+  </Combobox>`
+};
+
 export const iconDemo = {
   type: 'code',
   code: `
@@ -149,3 +183,40 @@ export const controlledDemo = {
     );
   }`
 };
+
+export const createItemsDemo = {
+  type: 'code',
+  code: `
+  function CreateItemsDemo() {
+    const users = [
+      { id: "u1", name: "Jane Doe" },
+      { id: "u2", name: "John Smith" },
+      { id: "u3", name: "Ada Lovelace" }
+    ];
+    const items = React.useMemo(
+      () =>
+        Combobox.createItems(users, {
+          getValue: user => user.id,
+          getLabel: user => user.name
+        }),
+      []
+    );
+    const [value, setValue] = React.useState(null);
+
+    return (
+      <Flex direction="column" gap={5}>
+        <Text>Selected ID: {value || "None"}</Text>
+        <Combobox items={items} value={value} onValueChange={setValue}>
+          <Combobox.Input placeholder="Pick a user" />
+          <Combobox.Content>
+            {user => (
+              <Combobox.Item key={user.id} value={user.id}>
+                {user.name}
+              </Combobox.Item>
+            )}
+          </Combobox.Content>
+        </Combobox>
+      </Flex>
+    );
+  }`
+};
diff --git a/apps/www/src/content/docs/components/combobox/index.mdx b/apps/www/src/content/docs/components/combobox/index.mdx
index d30e80a97..4b6c7d84b 100644
--- a/apps/www/src/content/docs/components/combobox/index.mdx
+++ b/apps/www/src/content/docs/components/combobox/index.mdx
@@ -12,6 +12,9 @@ import {
   iconDemo,
   withFieldDemo,
   controlledDemo,
+  createItemsDemo,
+  labelDemo,
+  emptyDemo,
 } from "./demo.ts";
 
 <Demo data={playground} />
@@ -24,8 +27,18 @@ Import and assemble the component:
 import { Combobox } from "@raystack/apsara";
 
 <Combobox>
+  <Combobox.Label />
   <Combobox.Input />
-  <Combobox.Content />
+  <Combobox.Clear />
+  <Combobox.Content>
+    <Combobox.Empty />
+    <Combobox.Status />
+    <Combobox.Group>
+      <Combobox.GroupLabel />
+      <Combobox.Item />
+    </Combobox.Group>
+    <Combobox.Separator />
+  </Combobox.Content>
 </Combobox>
 ```
 
@@ -53,7 +66,7 @@ Wrap the Combobox with [Field](/docs/components/field) to add a label, descripti
 
 ### Groups and separators
 
-Organize items into groups with labels and visual separators. Groups and labels are automatically hidden when the user is searching.
+Organize items into groups with `Combobox.GroupLabel` and separators. Groups, group labels, and separators are hidden while the user is searching.
 
 <Demo data={groupDemo} />
 
@@ -61,14 +74,36 @@ Organize items into groups with labels and visual separators. Groups and labels
 
 Pass the `multiple` prop to enable multi-select. Selected values appear as chips in the input. Items display checkboxes in multiple mode.
 
+The input shows the first two chips and a "+N" count for the rest. Press Backspace in an empty input to remove the last value. Press Left Arrow at the start of the input to move focus to the chips. On a focused chip, press Backspace or Delete to remove it.
+
 <Demo data={multipleDemo} />
 
+### Label and clear button
+
+`Combobox.Label` renders a visible label linked to the input. `Combobox.Clear` renders a button that clears the value. It shows only when there is a value or input text. Place both anywhere inside `Combobox`.
+
+<Demo data={labelDemo} />
+
+### Empty state
+
+`Combobox.Content` shows "No results" when no item matches the input. To change the text, add `Combobox.Empty` as a direct child of `Combobox.Content`.
+
+<Demo data={emptyDemo} />
+
 ### Controlled
 
 Use `value` and `onValueChange` for controlled behavior.
 
 <Demo data={controlledDemo} />
 
+### Using IDs as values
+
+When your app stores IDs instead of item objects, wrap the data with `Combobox.createItems`. `getValue` returns the value that `value` and `onValueChange` use. `getLabel` returns the text shown in the input and used for filtering. Pass a function as the child of `Combobox.Content` to render each item that matches the input.
+
+Create the collection at module scope for static data. For data that changes, wrap it in `React.useMemo` keyed by the data.
+
+<Demo data={createItemsDemo} />
+
 ## API Reference
 
 Root and input first, then the parts that make up the popup list.
@@ -101,17 +136,41 @@ When no `value` prop is provided, the text content of `children` is used as the
 
 <auto-type-table path="./props.ts" name="ComboboxItemProps" />
 
+### Label Props
+
+A visible label for the input. It renders a `<label>` whose `htmlFor` is the input `id`. Inside a [Field](/docs/components/field), use the Field label instead.
+
+<auto-type-table path="./props.ts" name="ComboboxLabelProps" />
+
+### Clear Props
+
+A button that clears the value and the input text. It renders [IconButton](/docs/components/icon-button) and shows only when there is something to clear.
+
+<auto-type-table path="./props.ts" name="ComboboxClearProps" />
+
+### Empty Props
+
+The text shown when no item matches the input. `Combobox.Content` renders one with "No results" by default. Add `Combobox.Empty` as a direct child of `Combobox.Content` to change the text. Pass `null` as children to show nothing.
+
+<auto-type-table path="./props.ts" name="ComboboxEmptyProps" />
+
+### Status Props
+
+A visually hidden live region. Screen readers announce its text when it changes. `Combobox.Content` renders one by default that announces the number of matching items, for example "3 results". Add `Combobox.Status` as a direct child of `Combobox.Content` to change the text, for example to announce loading.
+
+<auto-type-table path="./props.ts" name="ComboboxStatusProps" />
+
 ### Group Props
 
 A way to group related combobox items together.
 
 <auto-type-table path="./props.ts" name="ComboboxGroupProps" />
 
-### Label Props
+### GroupLabel Props
 
-Renders a label in a combobox group. This component should be wrapped with `Combobox.Group`.
+Renders a label in a combobox group. Wrap it in `Combobox.Group`.
 
-<auto-type-table path="./props.ts" name="ComboboxLabelProps" />
+<auto-type-table path="./props.ts" name="ComboboxGroupLabelProps" />
 
 ### Separator Props
 
@@ -125,12 +184,20 @@ Every rendered part carries a stable `data-slot` attribute for [styling and test
 
 | Slot | Element |
 |------|---------|
+| `combobox-label` | The label for the input |
 | `combobox-input` | The text input that opens the popup |
+| `combobox-chips` | The container for chips and the input in multiple mode |
+| `combobox-chip` | A selected value in multiple mode |
+| `combobox-chip-remove` | The button that removes a chip |
+| `combobox-chip-overflow` | The "+N" count of chips that are not shown |
+| `combobox-clear` | The button that clears the value |
 | `combobox-positioner` | Wrapper that positions the popup |
 | `combobox-content` | The popup container |
+| `combobox-status` | The hidden live region that announces the number of results |
+| `combobox-empty` | The text shown when no item matches |
 | `combobox-list` | The scrollable list of items |
 | `combobox-group` | A group of related items |
-| `combobox-label` | The label for a group |
+| `combobox-group-label` | The label for a group |
 | `combobox-separator` | The divider between items or groups |
 | `combobox-item` | A selectable option row |
 | `combobox-item-text` | The text label inside an item (when its children is a string) |
@@ -147,7 +214,11 @@ Every rendered part carries a stable `data-slot` attribute for [styling and test
   the whole time, so typing to filter never loses the user's place.
 - In multiple mode, each item renders a checkbox that mirrors its selected
   state, and selected values appear in the input as removable chips.
+- The chips use Base UI's `Combobox.Chips`, which has `role="toolbar"`. Arrow
+  keys move between chips, and Backspace or Delete removes the focused chip.
+- `Combobox.Empty` and `Combobox.Status` are polite live regions. Screen
+  readers announce "No results" and the number of matching items.
 - Group labels use Base UI's `Combobox.GroupLabel`, which links the label to
-  its group via `aria-labelledby`, so wrap `Combobox.Label` in `Combobox.Group`.
+  its group via `aria-labelledby`, so wrap `Combobox.GroupLabel` in `Combobox.Group`.
 - Wrap the Combobox with [Field](/docs/components/field) to associate a
   visible label, description, and error message with the input.
diff --git a/apps/www/src/content/docs/components/combobox/props.ts b/apps/www/src/content/docs/components/combobox/props.ts
index 6b60a7236..a15843f82 100644
--- a/apps/www/src/content/docs/components/combobox/props.ts
+++ b/apps/www/src/content/docs/components/combobox/props.ts
@@ -49,6 +49,17 @@ export interface ComboboxRootProps {
    * @default false
    */
   modal?: boolean;
+
+  /**
+   * The items to filter. Accepts an array of items or a collection from `Combobox.createItems`.
+   * When set, the root filters the items and `Combobox.Content` can render them with a function child.
+   *
+   * @remarks `unknown[] | ReturnType<typeof Combobox.createItems>`
+   */
+  items?: unknown[];
+
+  /** The `id` of the input. `Combobox.Label` uses it. */
+  id?: string;
 }
 
 export interface ComboboxInputProps {
@@ -96,6 +107,13 @@ export interface ComboboxContentProps {
    * @defaultValue The theme's `radius`
    */
   radius?: 'none' | 'small' | 'medium' | 'large' | 'full';
+
+  /**
+   * The list content. Pass a function to render each item that matches the input when `items` is set on the root.
+   */
+  children?:
+    | React.ReactNode
+    | ((item: unknown, index: number) => React.ReactNode);
 }
 
 export interface ComboboxItemProps {
@@ -120,6 +138,65 @@ export interface ComboboxGroupProps {
 }
 
 export interface ComboboxLabelProps {
+  /** Shows `optionalText` after the label when `false`. */
+  required?: boolean;
+
+  /**
+   * Text shown after the label when `required` is `false`.
+   * @default "(optional)"
+   */
+  optionalText?: string;
+
+  /** Additional CSS class names. */
+  className?: string;
+}
+
+export interface ComboboxClearProps {
+  /**
+   * Size of the button.
+   * @default 2
+   */
+  size?: 1 | 2 | 3 | 4;
+
+  /**
+   * Accessible name of the button.
+   * @default "Clear"
+   */
+  'aria-label'?: string;
+
+  /**
+   * The icon inside the button.
+   * @default <ClearIcon />
+   */
+  children?: React.ReactNode;
+
+  /** Additional CSS class names. */
+  className?: string;
+}
+
+export interface ComboboxEmptyProps {
+  /**
+   * The text shown when no item matches.
+   * @default "No results"
+   */
+  children?: React.ReactNode;
+
+  /** Additional CSS class names. */
+  className?: string;
+}
+
+export interface ComboboxStatusProps {
+  /**
+   * The text to announce.
+   * @defaultValue The number of matching items, for example "3 results"
+   */
+  children?: React.ReactNode;
+
+  /** Additional CSS class names. */
+  className?: string;
+}
+
+export interface ComboboxGroupLabelProps {
   /** Additional CSS class names. */
   className?: string;
 }
diff --git a/packages/react/components/combobox/__tests__/combobox.test.tsx b/packages/react/components/combobox/__tests__/combobox.test.tsx
index 57617598e..181520556 100644
--- a/packages/react/components/combobox/__tests__/combobox.test.tsx
+++ b/packages/react/components/combobox/__tests__/combobox.test.tsx
@@ -318,13 +318,13 @@ describe('Combobox', () => {
           <Combobox.Input placeholder='Select' />
           <Combobox.Content>
             <Combobox.Group>
-              <Combobox.Label>Fruits</Combobox.Label>
+              <Combobox.GroupLabel>Fruits</Combobox.GroupLabel>
               <Combobox.Item value='apple'>Apple</Combobox.Item>
               <Combobox.Item value='banana'>Banana</Combobox.Item>
             </Combobox.Group>
             <Combobox.Separator />
             <Combobox.Group>
-              <Combobox.Label>Vegetables</Combobox.Label>
+              <Combobox.GroupLabel>Vegetables</Combobox.GroupLabel>
               <Combobox.Item value='carrot'>Carrot</Combobox.Item>
               <Combobox.Item value='broccoli'>Broccoli</Combobox.Item>
             </Combobox.Group>
@@ -350,7 +350,7 @@ describe('Combobox', () => {
           <Combobox.Input placeholder='Select' />
           <Combobox.Content>
             <Combobox.Group>
-              <Combobox.Label>Fruits</Combobox.Label>
+              <Combobox.GroupLabel>Fruits</Combobox.GroupLabel>
               <Combobox.Item value='apple'>Apple</Combobox.Item>
             </Combobox.Group>
           </Combobox.Content>
@@ -484,3 +484,273 @@ describe('Combobox', () => {
     });
   });
 });
+
+describe('Combobox.createItems', () => {
+  const USERS = [
+    { id: 'u1', name: 'Jane Doe' },
+    { id: 'u2', name: 'John Smith' },
+    { id: 'u3', name: 'Ada Lovelace' }
+  ];
+  const USER_ITEMS = Combobox.createItems(USERS, {
+    getValue: user => user.id,
+    getLabel: user => user.name
+  });
+
+  const UserCombobox = (props: {
+    defaultValue?: string | null;
+    onValueChange?: (value: string | null) => void;
+  }) => (
+    <Combobox items={USER_ITEMS} {...props}>
+      <Combobox.Input placeholder='Pick a user' />
+      <Combobox.Content>
+        {(user: (typeof USERS)[number]) => (
+          <Combobox.Item key={user.id} value={user.id}>
+            {user.name}
+          </Combobox.Item>
+        )}
+      </Combobox.Content>
+    </Combobox>
+  );
+
+  it('calls onValueChange with the derived value', async () => {
+    const user = userEvent.setup();
+    const onValueChange = vi.fn();
+    render(<UserCombobox onValueChange={onValueChange} />);
+
+    await user.click(screen.getByRole('combobox'));
+    await clickOption(await screen.findByText('John Smith'));
+
+    expect(onValueChange).toHaveBeenCalledWith('u2');
+  });
+
+  it('shows the derived label for the selected value', () => {
+    render(<UserCombobox defaultValue='u3' />);
+    expect(screen.getByRole('combobox')).toHaveValue('Ada Lovelace');
+  });
+
+  it('filters by the derived label', async () => {
+    const user = userEvent.setup();
+    render(<UserCombobox />);
+
+    await user.type(screen.getByRole('combobox'), 'jo');
+
+    await waitFor(() => {
+      expect(screen.getByText('John Smith')).toBeInTheDocument();
+      expect(screen.queryByText('Jane Doe')).not.toBeInTheDocument();
+      expect(screen.queryByText('Ada Lovelace')).not.toBeInTheDocument();
+    });
+  });
+});
+
+describe('Combobox.createItems chips', () => {
+  const USERS = [
+    { id: 'u1', name: 'Jane Doe' },
+    { id: 'u2', name: 'John Smith' }
+  ];
+  const USER_ITEMS = Combobox.createItems(USERS, {
+    getValue: user => user.id,
+    getLabel: user => user.name
+  });
+
+  it('labels chips with the derived label', () => {
+    render(
+      <Combobox items={USER_ITEMS} multiple defaultValue={['u2']}>
+        <Combobox.Input placeholder='Pick users' />
+        <Combobox.Content>
+          {(user: (typeof USERS)[number]) => (
+            <Combobox.Item key={user.id} value={user.id}>
+              {user.name}
+            </Combobox.Item>
+          )}
+        </Combobox.Content>
+      </Combobox>
+    );
+    expect(screen.getByText('John Smith')).toBeInTheDocument();
+    expect(screen.queryByText('u2')).not.toBeInTheDocument();
+  });
+});
+describe('Combobox chips', () => {
+  // Without `items` on the root, chips show the raw value.
+  it('renders chips in a toolbar', () => {
+    render(<BasicCombobox multiple defaultValue={['apple', 'banana']} />);
+    const toolbar = screen.getByRole('toolbar');
+    expect(toolbar).toContainElement(screen.getByRole('combobox'));
+    expect(screen.getByText('apple')).toBeInTheDocument();
+    expect(screen.getByText('banana')).toBeInTheDocument();
+  });
+
+  it('removes the last chip on Backspace in an empty input', async () => {
+    const user = userEvent.setup();
+    const handleValueChange = vi.fn();
+    render(
+      <BasicCombobox
+        multiple
+        defaultValue={['apple', 'banana']}
+        onValueChange={handleValueChange}
+      />
+    );
+    await user.click(screen.getByRole('combobox'));
+    await user.keyboard('{Backspace}');
+
+    expect(handleValueChange).toHaveBeenLastCalledWith(['apple']);
+    expect(
+      screen.queryByRole('button', { name: 'Remove banana' })
+    ).not.toBeInTheDocument();
+  });
+
+  it('removes the last value on Backspace when chips overflow', async () => {
+    const user = userEvent.setup();
+    const handleValueChange = vi.fn();
+    render(
+      <BasicCombobox
+        multiple
+        defaultValue={['apple', 'banana', 'grapes', 'pineapple']}
+        onValueChange={handleValueChange}
+      />
+    );
+    expect(screen.getByText('+2')).toBeInTheDocument();
+
+    await user.click(screen.getByRole('combobox'));
+    await user.keyboard('{Backspace}');
+
+    expect(handleValueChange).toHaveBeenLastCalledWith([
+      'apple',
+      'banana',
+      'grapes'
+    ]);
+    expect(screen.getByText('+1')).toBeInTheDocument();
+  });
+
+  it('removes a chip with its remove button', async () => {
+    const user = userEvent.setup();
+    const handleValueChange = vi.fn();
+    render(
+      <BasicCombobox
+        multiple
+        defaultValue={['apple', 'banana']}
+        onValueChange={handleValueChange}
+      />
+    );
+    await user.click(screen.getByRole('button', { name: 'Remove apple' }));
+
+    expect(handleValueChange).toHaveBeenLastCalledWith(['banana']);
+    expect(
+      screen.queryByRole('button', { name: 'Remove apple' })
+    ).not.toBeInTheDocument();
+  });
+});
+
+describe('Combobox.Clear', () => {
+  it('clears all selected values', async () => {
+    const user = userEvent.setup();
+    const handleValueChange = vi.fn();
+    render(
+      <Combobox
+        multiple
+        defaultValue={['apple', 'banana']}
+        onValueChange={handleValueChange}
+      >
+        <Combobox.Input placeholder={PLACEHOLDER_TEXT} />
+        <Combobox.Clear />
+        <Combobox.Content>
+          {FRUIT_OPTIONS.map(option => (
+            <Combobox.Item key={option.value} value={option.value}>
+              {option.label}
+            </Combobox.Item>
+          ))}
+        </Combobox.Content>
+      </Combobox>
+    );
+    await user.click(screen.getByRole('button', { name: 'Clear' }));
+
+    expect(handleValueChange).toHaveBeenLastCalledWith([]);
+    expect(screen.getByRole('combobox')).toHaveAttribute(
+      'placeholder',
+      PLACEHOLDER_TEXT
+    );
+  });
+});
+
+describe('Combobox.Empty', () => {
+  it('shows "No results" only when nothing matches', async () => {
+    const user = userEvent.setup();
+    render(<BasicCombobox />);
+    const input = screen.getByRole('combobox');
+
+    await user.type(input, 'app');
+    await screen.findByText('Apple');
+    expect(screen.queryByText('No results')).not.toBeInTheDocument();
+
+    await user.type(input, 'zzz');
+    expect(await screen.findByText('No results')).toBeInTheDocument();
+  });
+
+  it('works with items on the root', async () => {
+    const user = userEvent.setup();
+    render(
+      <Combobox items={FRUIT_OPTIONS.map(option => option.label)}>
+        <Combobox.Input placeholder={PLACEHOLDER_TEXT} />
+        <Combobox.Content>
+          {(item: string) => (
+            <Combobox.Item key={item} value={item}>
+              {item}
+            </Combobox.Item>
+          )}
+        </Combobox.Content>
+      </Combobox>
+    );
+    const input = screen.getByRole('combobox');
+
+    await user.type(input, 'ban');
+    await screen.findByText('Banana');
+    expect(screen.queryByText('No results')).not.toBeInTheDocument();
+
+    await user.type(input, 'zzz');
+    expect(await screen.findByText('No results')).toBeInTheDocument();
+  });
+
+  it('renders custom text outside the listbox', async () => {
+    const user = userEvent.setup();
+    render(
+      <Combobox>
+        <Combobox.Input placeholder={PLACEHOLDER_TEXT} />
+        <Combobox.Content>
+          <Combobox.Empty>No fruit found</Combobox.Empty>
+          <Combobox.Item value='apple'>Apple</Combobox.Item>
+        </Combobox.Content>
+      </Combobox>
+    );
+    await user.type(screen.getByRole('combobox'), 'zzz');
+
+    const empty = await screen.findByText('No fruit found');
+    expect(empty).toHaveAttribute('role', 'status');
+    expect(screen.getByRole('listbox')).not.toContainElement(empty);
+  });
+});
+
+describe('Combobox.Status', () => {
+  it('announces the number of matching items', async () => {
+    const user = userEvent.setup();
+    render(<BasicCombobox />);
+    await user.type(screen.getByRole('combobox'), 'b');
+
+    await waitFor(() => {
+      expect(screen.getByText('2 results')).toHaveAttribute('role', 'status');
+    });
+  });
+});
+
+describe('Combobox.Label', () => {
+  it('labels the input', () => {
+    render(
+      <Combobox>
+        <Combobox.Label>Fruit</Combobox.Label>
+        <Combobox.Input placeholder={PLACEHOLDER_TEXT} />
+        <Combobox.Content>
+          <Combobox.Item value='apple'>Apple</Combobox.Item>
+        </Combobox.Content>
+      </Combobox>
+    );
+    expect(screen.getByLabelText('Fruit')).toBe(screen.getByRole('combobox'));
+  });
+});
diff --git a/packages/react/components/combobox/__tests__/data-slots.test.tsx b/packages/react/components/combobox/__tests__/data-slots.test.tsx
index fd6424385..c02d68293 100644
--- a/packages/react/components/combobox/__tests__/data-slots.test.tsx
+++ b/packages/react/components/combobox/__tests__/data-slots.test.tsx
@@ -32,14 +32,14 @@ describe('Combobox data-slot contract', () => {
     expect(getSlot(container, 'combobox-input')).not.toBeNull();
   });
 
-  it('exposes content, list, group, label, separator and item slots when open', async () => {
+  it('exposes content, list, group, group label, separator and item slots when open', async () => {
     const user = userEvent.setup();
     render(
       <Combobox>
         <Combobox.Input placeholder='Enter a fruit' />
         <Combobox.Content>
           <Combobox.Group>
-            <Combobox.Label>Fruits</Combobox.Label>
+            <Combobox.GroupLabel>Fruits</Combobox.GroupLabel>
             {FRUIT_OPTIONS.map(option => (
               <Combobox.Item key={option.value} value={option.value}>
                 {option.label}
@@ -64,10 +64,12 @@ describe('Combobox data-slot contract', () => {
       'combobox-content',
       'combobox-list',
       'combobox-group',
-      'combobox-label',
+      'combobox-group-label',
       'combobox-separator',
       'combobox-item',
-      'combobox-item-text'
+      'combobox-item-text',
+      'combobox-status',
+      'combobox-empty'
     ]);
   });
 
@@ -90,4 +92,30 @@ describe('Combobox data-slot contract', () => {
       expect(getSlot(document.body, 'combobox-item-icon')).not.toBeNull();
     });
   });
+
+  it('exposes the label, clear and chip slots in multiple mode', () => {
+    const { container } = render(
+      <Combobox multiple defaultValue={['apple', 'banana', 'cherry']}>
+        <Combobox.Label>Fruits</Combobox.Label>
+        <Combobox.Input placeholder='Enter a fruit' />
+        <Combobox.Clear />
+        <Combobox.Content>
+          {FRUIT_OPTIONS.map(option => (
+            <Combobox.Item key={option.value} value={option.value}>
+              {option.label}
+            </Combobox.Item>
+          ))}
+        </Combobox.Content>
+      </Combobox>
+    );
+    expectSlots(container, [
+      'combobox-label',
+      'combobox-input',
+      'combobox-clear',
+      'combobox-chips',
+      'combobox-chip',
+      'combobox-chip-remove',
+      'combobox-chip-overflow'
+    ]);
+  });
 });
diff --git a/packages/react/components/combobox/combobox-content.tsx b/packages/react/components/combobox/combobox-content.tsx
index ba86a4ae9..08b65a68d 100644
--- a/packages/react/components/combobox/combobox-content.tsx
+++ b/packages/react/components/combobox/combobox-content.tsx
@@ -2,22 +2,28 @@
 
 import { Combobox as ComboboxPrimitive } from '@base-ui/react';
 import { cx } from 'class-variance-authority';
+import { Children, isValidElement, type ReactNode } from 'react';
 import { type Radius, radiusStyle } from '../../shared/radius';
 import { useThemeInjection } from '../theme/portal';
 import styles from './combobox.module.css';
+import { ComboboxEmpty, ComboboxStatus } from './combobox-misc';
 import { useComboboxContext } from './combobox-root';
 
-export interface ComboboxContentProps
+export interface ComboboxContentProps<Item = unknown>
   extends Omit<
       ComboboxPrimitive.Positioner.Props,
-      'render' | 'className' | 'style'
+      'render' | 'className' | 'style' | 'children'
     >,
-    ComboboxPrimitive.Popup.Props {
+    Omit<ComboboxPrimitive.Popup.Props, 'children'> {
   /** Corner radius for this popup only. Overrides the theme's `radius`. */
   radius?: Radius;
+  /**
+   * The list content. Pass a function to render each item that matches the input when `items` is set on the root.
+   */
+  children?: ReactNode | ((item: Item, index: number) => ReactNode);
 }
 
-export const ComboboxContent = ({
+export const ComboboxContent = <Item,>({
   ref,
   className,
   children,
@@ -28,9 +34,24 @@ export const ComboboxContent = ({
   sideOffset = 4,
   radius,
   ...positionerProps
-}: ComboboxContentProps) => {
+}: ComboboxContentProps<Item>) => {
   const { inputContainerRef } = useComboboxContext();
   const theme = useThemeInjection();
+
+  // Empty and Status are live regions. They sit outside the listbox, so they
+  // are taken out of the children and rendered before the list.
+  let empty: ReactNode = <ComboboxEmpty />;
+  let status: ReactNode = <ComboboxStatus />;
+  let listChildren = children;
+  if (typeof children !== 'function') {
+    listChildren = Children.toArray(children).filter(child => {
+      if (!isValidElement(child)) return true;
+      if (child.type === ComboboxEmpty) empty = child;
+      else if (child.type === ComboboxStatus) status = child;
+      else return true;
+      return false;
+    });
+  }
   return (
     <ComboboxPrimitive.Portal {...theme}>
       <ComboboxPrimitive.Positioner
@@ -55,11 +76,13 @@ export const ComboboxContent = ({
           finalFocus={finalFocus}
           data-slot='combobox-content'
         >
+          {status}
+          {empty}
           <ComboboxPrimitive.List
             className={styles.list}
             data-slot='combobox-list'
           >
-            {children}
+            {listChildren}
           </ComboboxPrimitive.List>
         </ComboboxPrimitive.Popup>
       </ComboboxPrimitive.Positioner>
diff --git a/packages/react/components/combobox/combobox-input.tsx b/packages/react/components/combobox/combobox-input.tsx
index 4bd7913c9..c1b7d2f87 100644
--- a/packages/react/components/combobox/combobox-input.tsx
+++ b/packages/react/components/combobox/combobox-input.tsx
@@ -1,11 +1,18 @@
 'use client';
 
 import { Combobox as ComboboxPrimitive } from '@base-ui/react';
+import { cx } from 'class-variance-authority';
 import { type ComponentProps } from 'react';
-import { ChevronDownIcon } from '~/icons';
+import { ChevronDownIcon, XIcon } from '~/icons';
+import chipStyles from '../chip/chip.module.css';
 import { Input } from '../input';
+import { InputFrame, inputFieldClassName } from '../input/input';
+import inputStyles from '../input/input.module.css';
+import styles from './combobox.module.css';
 import { useComboboxContext } from './combobox-root';
 
+const MAX_CHIPS_VISIBLE = 2;
+
 export interface ComboboxInputProps
   extends Omit<
     ComponentProps<typeof Input>,
@@ -13,23 +20,16 @@ export interface ComboboxInputProps
   > {}
 
 export const ComboboxInput = ({ ref, ...props }: ComboboxInputProps) => {
-  const { multiple, inputContainerRef, value, onValueChange } =
-    useComboboxContext();
+  const { multiple, inputContainerRef } = useComboboxContext();
+
+  if (multiple) return <ComboboxChipsInput ref={ref} {...props} />;
+
   return (
     <ComboboxPrimitive.Input
       ref={ref}
       render={
         <Input
           containerRef={inputContainerRef}
-          chips={
-            multiple && Array.isArray(value)
-              ? value.map(val => ({
-                  label: val,
-                  onRemove: () =>
-                    onValueChange?.((value as string[])?.filter(v => v !== val))
-                }))
-              : undefined
-          }
           trailingIcon={<ChevronDownIcon />}
           data-slot='combobox-input'
           {...props}
@@ -39,3 +39,115 @@ export const ComboboxInput = ({ ref, ...props }: ComboboxInputProps) => {
   );
 };
 ComboboxInput.displayName = 'Combobox.Input';
+
+const chipClassName = cx(
+  chipStyles.chip,
+  chipStyles['chip-variant-outline'],
+  chipStyles['chip-size-small'],
+  chipStyles['chip-color-neutral'],
+  inputStyles.chip,
+  styles.chip
+);
+
+function ComboboxChipsInput({
+  ref,
+  className,
+  disabled,
+  placeholder,
+  leadingIcon,
+  prefix,
+  size,
+  radius,
+  variant = 'default',
+  classNames,
+  onKeyDown,
+  ...props
+}: ComboboxInputProps) {
+  const { inputContainerRef, value, onValueChange, getLabel } =
+    useComboboxContext();
+  const values = Array.isArray(value) ? value : [];
+  const visibleValues = values.slice(0, MAX_CHIPS_VISIBLE);
+  const hiddenCount = values.length - visibleValues.length;
+  const trailingIcon = <ChevronDownIcon />;
+
+  return (
+    <InputFrame
+      disabled={disabled}
+      hasChips={values.length > 0}
+      leadingIcon={leadingIcon}
+      trailingIcon={trailingIcon}
+      prefix={prefix}
+      size={size}
+      radius={radius}
+      variant={variant}
+      containerRef={inputContainerRef}
+      className={classNames?.container}
+    >
+      <ComboboxPrimitive.Chips
+        className={inputStyles['chip-input-container']}
+        data-slot='combobox-chips'
+      >
+        {visibleValues.map(val => {
+          const label = getLabel(val);
+          return (
+            <ComboboxPrimitive.Chip
+              key={String(val)}
+              className={chipClassName}
+              aria-label={label}
+              data-slot='combobox-chip'
+            >
+              {label}
+              {!disabled && (
+                <ComboboxPrimitive.ChipRemove
+                  className={chipStyles['dismiss-button']}
+                  aria-label={`Remove ${label}`}
+                  data-slot='combobox-chip-remove'
+                >
+                  <XIcon width={12} height={12} aria-hidden='true' />
+                </ComboboxPrimitive.ChipRemove>
+              )}
+            </ComboboxPrimitive.Chip>
+          );
+        })}
+        {hiddenCount > 0 && (
+          <span
+            className={inputStyles['chip-overflow']}
+            data-slot='combobox-chip-overflow'
+          >
+            +{hiddenCount}
+          </span>
+        )}
+        <ComboboxPrimitive.Input
+          ref={ref}
+          className={state =>
+            inputFieldClassName({
+              leadingIcon,
+              trailingIcon,
+              prefix,
+              className:
+                typeof className === 'function' ? className(state) : className
+            })
+          }
+          placeholder={values.length > 0 ? undefined : placeholder}
+          disabled={disabled}
+          data-slot='combobox-input'
+          onKeyDown={event => {
+            onKeyDown?.(event);
+            // Base UI removes the last rendered chip on Backspace. When chips
+            // are hidden behind "+N", that is not the last value.
+            if (
+              event.key === 'Backspace' &&
+              hiddenCount > 0 &&
+              event.currentTarget.value === '' &&
+              !event.baseUIHandlerPrevented
+            ) {
+              event.preventBaseUIHandler();
+              onValueChange?.(values.slice(0, -1));
+            }
+          }}
+          {...props}
+        />
+      </ComboboxPrimitive.Chips>
+    </InputFrame>
+  );
+}
diff --git a/packages/react/components/combobox/combobox-item.tsx b/packages/react/components/combobox/combobox-item.tsx
index 7403a0bda..c65f2bb60 100644
--- a/packages/react/components/combobox/combobox-item.tsx
+++ b/packages/react/components/combobox/combobox-item.tsx
@@ -3,6 +3,7 @@
 import { Combobox as ComboboxPrimitive } from '@base-ui/react';
 import { cx } from 'class-variance-authority';
 import { ReactNode } from 'react';
+import { useIsomorphicLayoutEffect } from '~/hooks';
 import { Checkbox } from '../checkbox';
 import { getMatch } from '../menu/utils';
 import { Text } from '../text';
@@ -28,13 +29,19 @@ export const ComboboxItem = ({
       ? children
       : undefined;
 
-  const { multiple, inputValue, hasItems } = useComboboxContext();
+  const { multiple, inputValue, hasItems, registerMatch } =
+    useComboboxContext();
 
   // When items prop is not provided on Root, use custom filtering
-  if (!hasItems && inputValue?.length) {
-    const isMatched = getMatch(value, children, inputValue);
-    if (!isMatched) return null;
-  }
+  const hidden =
+    !hasItems && !!inputValue?.length && !getMatch(value, children, inputValue);
+
+  useIsomorphicLayoutEffect(() => {
+    if (hasItems || hidden) return;
+    return registerMatch();
+  }, [hasItems, hidden, registerMatch]);
+
+  if (hidden) return null;
 
   const element =
     typeof children === 'string' ? (
diff --git a/packages/react/components/combobox/combobox-items.ts b/packages/react/components/combobox/combobox-items.ts
new file mode 100644
index 000000000..d45f96123
--- /dev/null
+++ b/packages/react/components/combobox/combobox-items.ts
@@ -0,0 +1,35 @@
+import { Combobox as ComboboxPrimitive } from '@base-ui/react';
+
+type LabelLookup = (value: unknown) => string | undefined;
+
+const labelLookups = new WeakMap<object, LabelLookup>();
+
+/**
+ * Wraps Base UI's `createItems` and records how to label each value, so chips
+ * can show labels instead of raw values.
+ */
+export const createItems: typeof ComboboxPrimitive.createItems = (
+  data,
+  options
+) => {
+  const collection = ComboboxPrimitive.createItems(data, options);
+  labelLookups.set(collection, value => {
+    for (const entry of data ?? []) {
+      const items =
+        typeof entry === 'object' && entry !== null && 'items' in entry
+          ? entry.items
+          : [entry];
+      for (const item of items) {
+        if (options.getValue(item) === value) return options.getLabel(item);
+      }
+    }
+    return undefined;
+  });
+  return collection;
+};
+
+/** Returns the label for `value` when `items` came from `createItems`. */
+export function getItemLabel(items: unknown, value: unknown) {
+  if (typeof items !== 'object' || items === null) return undefined;
+  return labelLookups.get(items)?.(value);
+}
diff --git a/packages/react/components/combobox/combobox-misc.tsx b/packages/react/components/combobox/combobox-misc.tsx
index ddcec0652..56bf56860 100644
--- a/packages/react/components/combobox/combobox-misc.tsx
+++ b/packages/react/components/combobox/combobox-misc.tsx
@@ -2,10 +2,22 @@
 
 import { Combobox as ComboboxPrimitive } from '@base-ui/react';
 import { cx } from 'class-variance-authority';
+import { ClearIcon } from '~/icons';
+import { IconButton } from '../icon-button';
+import type { IconButtonProps } from '../icon-button/icon-button';
+import { Label, type LabelProps } from '../label';
 import styles from './combobox.module.css';
-import { useComboboxContext } from './combobox-root';
+import { useComboboxContext, useMatchCount } from './combobox-root';
 
-export const ComboboxLabel = ({
+export type ComboboxLabelProps = Omit<LabelProps, 'htmlFor'>;
+
+export const ComboboxLabel = (props: ComboboxLabelProps) => {
+  const { inputId } = useComboboxContext();
+  return <Label htmlFor={inputId} data-slot='combobox-label' {...props} />;
+};
+ComboboxLabel.displayName = 'Combobox.Label';
+
+export const ComboboxGroupLabel = ({
   className,
   ...props
 }: ComboboxPrimitive.GroupLabel.Props) => {
@@ -14,13 +26,13 @@ export const ComboboxLabel = ({
 
   return (
     <ComboboxPrimitive.GroupLabel
-      className={cx(styles.label, className)}
-      data-slot='combobox-label'
+      className={cx(styles['group-label'], className)}
+      data-slot='combobox-group-label'
       {...props}
     />
   );
 };
-ComboboxLabel.displayName = 'Combobox.Label';
+ComboboxGroupLabel.displayName = 'Combobox.GroupLabel';
 
 export const ComboboxGroup = ({
   className,
@@ -58,3 +70,88 @@ export const ComboboxSeparator = ({
   );
 };
 ComboboxSeparator.displayName = 'Combobox.Separator';
+
+export interface ComboboxClearProps extends ComboboxPrimitive.Clear.Props {
+  /** @default 2 */
+  size?: IconButtonProps['size'];
+}
+
+export const ComboboxClear = ({
+  className,
+  children = <ClearIcon />,
+  size = 2,
+  'aria-label': ariaLabel = 'Clear',
+  ...props
+}: ComboboxClearProps) => (
+  <ComboboxPrimitive.Clear
+    render={<IconButton size={size} />}
+    className={cx(styles.clear, className)}
+    aria-label={ariaLabel}
+    data-slot='combobox-clear'
+    {...props}
+  >
+    {children}
+  </ComboboxPrimitive.Clear>
+);
+ComboboxClear.displayName = 'Combobox.Clear';
+
+export const ComboboxEmpty = ({
+  className,
+  children = 'No results',
+  ...props
+}: ComboboxPrimitive.Empty.Props) => {
+  const { hasItems } = useComboboxContext();
+  const matchCount = useMatchCount();
+  // Base UI only knows the filtered list when `items` is set on the root.
+  const showChildren = hasItems || matchCount === 0;
+
+  return (
+    <ComboboxPrimitive.Empty
+      className={cx(styles.empty, className)}
+      data-slot='combobox-empty'
+      {...props}
+    >
+      {showChildren ? children : null}
+    </ComboboxPrimitive.Empty>
+  );
+};
+ComboboxEmpty.displayName = 'Combobox.Empty';
+
+function countLeaves(items: readonly unknown[]) {
+  let count = 0;
+  for (const item of items) {
+    const group =
+      typeof item === 'object' && item !== null && 'items' in item
+        ? item.items
+        : undefined;
+    count += Array.isArray(group) ? group.length : 1;
+  }
+  return count;
+}
+
+export const ComboboxStatus = ({
+  className,
+  children,
+  ...props
+}: ComboboxPrimitive.Status.Props) => {
+  const { inputValue, hasItems } = useComboboxContext();
+  const filteredItems = ComboboxPrimitive.useFilteredItems();
+  const matchCount = useMatchCount();
+  const count = hasItems ? countLeaves(filteredItems) : matchCount;
+  // Combobox.Empty announces the zero case.
+  const message =
+    inputValue && count > 0
+      ? `${count} ${count === 1 ? 'result' : 'results'}`
+      : null;
+
+  return (
+    <ComboboxPrimitive.Status
+      className={cx(styles['visually-hidden'], className)}
+      data-slot='combobox-status'
+      {...props}
+    >
+      {children ?? message}
+    </ComboboxPrimitive.Status>
+  );
+};
+ComboboxStatus.displayName = 'Combobox.Status';
diff --git a/packages/react/components/combobox/combobox-root.tsx b/packages/react/components/combobox/combobox-root.tsx
index d031e0f40..fe3024edd 100644
--- a/packages/react/components/combobox/combobox-root.tsx
+++ b/packages/react/components/combobox/combobox-root.tsx
@@ -6,19 +6,25 @@ import {
   RefObject,
   useCallback,
   useContext,
+  useId,
   useMemo,
   useRef,
   useState
 } from 'react';
 import { useFieldContext } from '../field';
+import { getItemLabel } from './combobox-items';
 
 interface ComboboxContextValue<Value = string> {
   multiple: boolean;
   inputValue: string;
   hasItems: boolean;
+  inputId: string;
   inputContainerRef: RefObject<HTMLDivElement | null>;
   value: Value | Value[] | null | undefined;
   onValueChange?: (value: Value | Value[] | null) => void;
+  getLabel: (value: Value) => string;
+  /** Counts the items that match the input when `items` is not set. */
+  registerMatch: () => () => void;
 }
 
 const ComboboxContext = createContext<
@@ -37,35 +43,40 @@ export const useComboboxContext = <
   return context as ComboboxContextValue<Value>;
 };
 
-export interface BaseComboboxRootProps<Value>
+const MatchCountContext = createContext(0);
+
+/** Number of rendered items that match the input when `items` is not set. */
+export const useMatchCount = () => useContext(MatchCountContext);
+
+export interface BaseComboboxRootProps<Value, Item = Value>
   extends Omit<
-    ComboboxPrimitive.Root.Props<Value, boolean>,
+    ComboboxPrimitive.Root.Props<Value, boolean, Item>,
     'onValueChange' | 'onInputValueChange' | 'multiple'
   > {
   onInputValueChange?: (inputValue: string) => void;
 }
 
-export interface SingleComboboxProps<Value = string>
-  extends BaseComboboxRootProps<Value> {
+export interface SingleComboboxProps<Value = string, Item = Value>
+  extends BaseComboboxRootProps<Value, Item> {
   multiple?: false;
   value?: Value | null;
   defaultValue?: Value | null;
   onValueChange?: (value: Value | null) => void;
 }
 
-export interface MultipleComboboxProps<Value = string>
-  extends BaseComboboxRootProps<Value> {
+export interface MultipleComboboxProps<Value = string, Item = Value>
+  extends BaseComboboxRootProps<Value, Item> {
   multiple: true;
   value?: Value[];
   defaultValue?: Value[];
   onValueChange?: (value: Value[]) => void;
 }
 
-export type ComboboxRootProps<Value = string> =
-  | SingleComboboxProps<Value>
-  | MultipleComboboxProps<Value>;
+export type ComboboxRootProps<Value = string, Item = Value> =
+  | SingleComboboxProps<Value, Item>
+  | MultipleComboboxProps<Value, Item>;
 
-export const ComboboxRoot = <Value extends unknown | unknown[]>({
+export const ComboboxRoot = <Value extends unknown | unknown[], Item = Value>({
   multiple = false,
   children,
   onValueChange,
@@ -74,18 +85,30 @@ export const ComboboxRoot = <Value extends unknown | unknown[]>({
   defaultValue,
   items,
   required,
+  id: idProp,
   ...props
-}: ComboboxRootProps<Value>) => {
+}: ComboboxRootProps<Value, Item>) => {
+  const generatedId = useId();
+  const id = idProp ?? generatedId;
   const fieldContext = useFieldContext();
   const resolvedRequired = required ?? fieldContext?.required;
 
   const [inputValue, setInputValue] = useState('');
   const [internalValue, setInternalValue] = useState<
     Value | Value[] | null | undefined
-  >(defaultValue ?? null);
+  >(defaultValue ?? (multiple ? [] : null));
+  const [matchCount, setMatchCount] = useState(0);
   const inputContainerRef = useRef<HTMLDivElement>(null);
 
-  const computedValue = providedValue ?? internalValue;
+  // Base UI is always controlled, so a value set through the context (for
+  // example by removing a chip that is hidden behind "+N") reaches it.
+  const computedValue =
+    providedValue === undefined ? internalValue : providedValue;
+
+  const registerMatch = useCallback(() => {
+    setMatchCount(count => count + 1);
+    return () => setMatchCount(count => count - 1);
+  }, []);
 
   const handleInputValueChange = useCallback(
     (
@@ -105,11 +128,11 @@ export const ComboboxRoot = <Value extends unknown | unknown[]>({
     ) => {
       setInternalValue(value);
       if (multiple) {
-        (onValueChange as MultipleComboboxProps<Value>['onValueChange'])?.(
-          value as Value[]
-        );
+        (
+          onValueChange as MultipleComboboxProps<Value, Item>['onValueChange']
+        )?.(value as Value[]);
       } else {
-        (onValueChange as SingleComboboxProps<Value>['onValueChange'])?.(
+        (onValueChange as SingleComboboxProps<Value, Item>['onValueChange'])?.(
           value as Value | null
         );
       }
@@ -122,11 +145,22 @@ export const ComboboxRoot = <Value extends unknown | unknown[]>({
       multiple,
       inputValue,
       hasItems: !!items,
+      inputId: id,
       inputContainerRef,
       value: computedValue,
-      onValueChange: handleValueChange
+      onValueChange: handleValueChange,
+      getLabel: (value: Value) => getItemLabel(items, value) ?? String(value),
+      registerMatch
     }),
-    [multiple, inputValue, items, computedValue, handleValueChange]
+    [
+      multiple,
+      inputValue,
+      items,
+      id,
+      computedValue,
+      handleValueChange,
+      registerMatch
+    ]
   );
 
   return (
@@ -136,13 +170,13 @@ export const ComboboxRoot = <Value extends unknown | unknown[]>({
         onValueChange={handleValueChange}
         onInputValueChange={handleInputValueChange}
         items={items}
-        value={providedValue}
-        defaultValue={defaultValue}
+        value={computedValue}
+        id={id}
         required={resolvedRequired}
         modal
         {...props}
       >
-        {children}
+        <MatchCountContext value={matchCount}>{children}</MatchCountContext>
       </ComboboxPrimitive.Root>
     </ComboboxContext>
   );
diff --git a/packages/react/components/combobox/combobox.module.css b/packages/react/components/combobox/combobox.module.css
index 44640aa08..cca8900b5 100644
--- a/packages/react/components/combobox/combobox.module.css
+++ b/packages/react/components/combobox/combobox.module.css
@@ -82,11 +82,43 @@
   padding: 0;
 }
 
-.content:has(.list:empty) {
+.content:has(.list:empty):has(.empty:empty) {
   border: none;
 }
 
-.label {
+.empty {
+  padding: var(--rs-space-4);
+  color: var(--rs-color-foreground-base-secondary);
+  text-align: center;
+  text-wrap: pretty;
+}
+
+.empty:empty {
+  padding: 0;
+}
+
+.visually-hidden {
+  position: absolute;
+  /* Todo: var does not exist for 1px */
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+.clear {
+  color: var(--rs-color-foreground-base-tertiary);
+}
+
+.clear:hover {
+  color: var(--rs-color-foreground-base-secondary);
+}
+
+.group-label {
   padding: var(--rs-space-2) var(--rs-space-3);
   font-weight: var(--rs-font-weight-medium);
   font-size: var(--rs-font-size-mini);
@@ -98,3 +130,11 @@
   margin: var(--rs-space-2) calc(var(--rs-space-3) * -1);
   background: var(--rs-color-border-base-primary);
 }
+
+.chip:focus {
+  outline: none;
+}
+
+.chip:focus-visible {
+  outline: var(--rs-focus-ring);
+}
diff --git a/packages/react/components/combobox/combobox.tsx b/packages/react/components/combobox/combobox.tsx
index a79db22a0..c3126b68c 100644
--- a/packages/react/components/combobox/combobox.tsx
+++ b/packages/react/components/combobox/combobox.tsx
@@ -2,10 +2,15 @@ import { Combobox as ComboboxPrimitive } from '@base-ui/react';
 import { ComboboxContent } from './combobox-content';
 import { ComboboxInput } from './combobox-input';
 import { ComboboxItem } from './combobox-item';
+import { createItems } from './combobox-items';
 import {
+  ComboboxClear,
+  ComboboxEmpty,
   ComboboxGroup,
+  ComboboxGroupLabel,
   ComboboxLabel,
-  ComboboxSeparator
+  ComboboxSeparator,
+  ComboboxStatus
 } from './combobox-misc';
 import { ComboboxRoot } from './combobox-root';
 
@@ -13,9 +18,14 @@ export const Combobox = Object.assign(ComboboxRoot, {
   Input: ComboboxInput,
   Content: ComboboxContent,
   Item: ComboboxItem,
-  Group: ComboboxGroup,
   Label: ComboboxLabel,
+  Clear: ComboboxClear,
+  Empty: ComboboxEmpty,
+  Status: ComboboxStatus,
+  Group: ComboboxGroup,
+  GroupLabel: ComboboxGroupLabel,
   Separator: ComboboxSeparator,
   useFilter: ComboboxPrimitive.useFilter,
-  useFilteredItems: ComboboxPrimitive.useFilteredItems
+  useFilteredItems: ComboboxPrimitive.useFilteredItems,
+  createItems
 });
diff --git a/packages/react/components/input/input.tsx b/packages/react/components/input/input.tsx
index 2199c9597..5736504f1 100644
--- a/packages/react/components/input/input.tsx
+++ b/packages/react/components/input/input.tsx
@@ -40,33 +40,39 @@ export interface InputProps
   classNames?: { container?: string };
 }
 
-export function Input({
-  className,
+interface InputFrameProps extends VariantProps<typeof inputWrapper> {
+  disabled?: boolean;
+  hasChips?: boolean;
+  leadingIcon?: ReactNode;
+  trailingIcon?: ReactNode;
+  prefix?: string;
+  suffix?: string;
+  containerRef?: RefObject<HTMLDivElement | null>;
+  className?: string;
+  children: ReactNode;
+}
+
+/** The input box around the field. Combobox uses it to place Base UI chips. */
+export function InputFrame({
   disabled,
-  placeholder,
+  hasChips,
   leadingIcon,
   trailingIcon,
   prefix,
   suffix,
-  chips,
-  maxChipsVisible = 2,
   size,
   radius,
-  variant = 'default',
+  variant,
   containerRef,
-  classNames,
-  required,
-  ...props
-}: InputProps) {
-  const fieldContext = useFieldContext();
-  const resolvedRequired = required ?? fieldContext?.required;
-
+  className,
+  children
+}: InputFrameProps) {
   return (
     <div
       className={cx(
         inputWrapper({ size, variant, radius }),
-        chips?.length && styles['has-chips'],
-        classNames?.container
+        hasChips && styles['has-chips'],
+        className
       )}
       data-disabled={disabled || undefined}
       data-slot='input-container'
@@ -86,7 +92,79 @@ export function Input({
           {prefix}
         </div>
       )}
+      {children}
+      {suffix && (
+        <div className={styles.suffix} data-slot='input-suffix'>
+          {suffix}
+        </div>
+      )}
+      {trailingIcon && (
+        <div
+          className={styles['trailing-icon']}
+          aria-hidden='true'
+          data-slot='input-trailing-icon'
+        >
+          {trailingIcon}
+        </div>
+      )}
+    </div>
+  );
+}
 
+export function inputFieldClassName({
+  leadingIcon,
+  trailingIcon,
+  prefix,
+  suffix,
+  className
+}: Pick<InputProps, 'leadingIcon' | 'trailingIcon' | 'prefix' | 'suffix'> & {
+  className?: string;
+}) {
+  return cx(
+    styles['input-field'],
+    leadingIcon && styles['has-leading-icon'],
+    trailingIcon && styles['has-trailing-icon'],
+    prefix && styles['has-prefix'],
+    suffix && styles['has-suffix'],
+    className
+  );
+}
+
+export function Input({
+  className,
+  disabled,
+  placeholder,
+  leadingIcon,
+  trailingIcon,
+  prefix,
+  suffix,
+  chips,
+  maxChipsVisible = 2,
+  size,
+  radius,
+  variant = 'default',
+  containerRef,
+  classNames,
+  required,
+  ...props
+}: InputProps) {
+  const fieldContext = useFieldContext();
+  const resolvedRequired = required ?? fieldContext?.required;
+
+  return (
+    <InputFrame
+      disabled={disabled}
+      hasChips={!!chips?.length}
+      leadingIcon={leadingIcon}
+      trailingIcon={trailingIcon}
+      prefix={prefix}
+      suffix={suffix}
+      size={size}
+      radius={radius}
+      variant={variant}
+      containerRef={containerRef}
+      className={classNames?.container}
+    >
       <div
         className={styles['chip-input-container']}
         data-slot='input-chip-container'
@@ -114,36 +192,23 @@ export function Input({
         )}
         <InputPrimitive
           data-slot='input'
-          className={cx(
-            styles['input-field'],
-            leadingIcon && styles['has-leading-icon'],
-            trailingIcon && styles['has-trailing-icon'],
-            prefix && styles['has-prefix'],
-            suffix && styles['has-suffix'],
-            className
-          )}
+          className={state =>
+            inputFieldClassName({
+              leadingIcon,
+              trailingIcon,
+              prefix,
+              suffix,
+              className:
+                typeof className === 'function' ? className(state) : className
+            })
+          }
           placeholder={chips?.length ? undefined : placeholder}
           disabled={disabled}
           required={resolvedRequired}
           {...props}
         />
       </div>
-
-      {suffix && (
-        <div className={styles.suffix} data-slot='input-suffix'>
-          {suffix}
-        </div>
-      )}
-      {trailingIcon && (
-        <div
-          className={styles['trailing-icon']}
-          aria-hidden='true'
-          data-slot='input-trailing-icon'
-        >
-          {trailingIcon}
-        </div>
-      )}
-    </div>
+    </InputFrame>
   );
 }