diff --git a/apps/www/src/components/chip-input-demo.tsx b/apps/www/src/components/chip-input-demo.tsx
index d9d2b1550..a6315d6b8 100644
--- a/apps/www/src/components/chip-input-demo.tsx
+++ b/apps/www/src/components/chip-input-demo.tsx
@@ -1,4 +1,4 @@
-import { Input } from '@raystack/apsara';
+import { Chip, Input } from '@raystack/apsara';
 import { useState } from 'react';
 
 export default function ChipInputDemo() {
@@ -23,10 +23,14 @@ export default function ChipInputDemo() {
           setInput('');
         }
       }}
-      chips={chips.map((c, i) => ({
-        label: c.label,
-        onRemove: () => setChips(prev => prev.filter((_, j) => j !== i))
-      }))}
+      chips={chips.map((c, i) => (
+        <Chip key={i}>
+          {c.label}
+          <Chip.Remove
+            onClick={() => setChips(prev => prev.filter((_, j) => j !== i))}
+          />
+        </Chip>
+      ))}
       maxChipsVisible={4}
     />
   );
diff --git a/apps/www/src/components/dataview-demo.tsx b/apps/www/src/components/dataview-demo.tsx
index 473258d9b..af6d04182 100644
--- a/apps/www/src/components/dataview-demo.tsx
+++ b/apps/www/src/components/dataview-demo.tsx
@@ -628,10 +628,9 @@ function SelectionBar() {
         size='large'
         color='neutral'
         leadingIcon={<Frame size={16} strokeWidth={1.5} />}
-        isDismissible
-        onDismiss={() => table.resetRowSelection()}
       >
         {selectedCount} selected
+        <Chip.Remove onClick={() => table.resetRowSelection()} />
       </Chip>
       <FloatingActions.Separator />
       <Button variant='outline' color='neutral' size='small'>
diff --git a/apps/www/src/content/docs/(overview)/upgrading.mdx b/apps/www/src/content/docs/(overview)/upgrading.mdx
index 82f756aad..a8a881913 100644
--- a/apps/www/src/content/docs/(overview)/upgrading.mdx
+++ b/apps/www/src/content/docs/(overview)/upgrading.mdx
@@ -7,6 +7,51 @@ One section per release, newest first, with only the changes that need action
 from you. The full record of every release, features and fixes included, is
 on [GitHub releases](https://github.com/raystack/apsara/releases).
 
+## Unreleased: `Chip.Remove` replaces the dismiss props
+
+### 1. Move `isDismissible` and `onDismiss` to `Chip.Remove`
+
+`Chip` has no `isDismissible` or `onDismiss`. Add `Chip.Remove` as the last
+child, and move the handler to its `onClick`.
+
+```tsx
+// Before
+<Chip isDismissible onDismiss={handleRemove}>Tag</Chip>
+
+// After
+<Chip>
+  Tag
+  <Chip.Remove onClick={handleRemove} />
+</Chip>
+```
+
+The remove button slots are `chip-remove` and `chip-remove-icon`. They were
+`chip-dismiss` and `chip-dismiss-icon`. A `trailingIcon` no longer hides when
+the chip has a remove button.
+
+### 2. Pass chip props or elements to `Input` `chips`
+
+Each item in `Input` `chips` is `Chip` props or a `Chip` element. `label` is
+now `children`. For a removable chip, pass an element with `Chip.Remove`.
+
+```tsx
+// Before
+<Input chips={[{ label: 'Tag', onRemove: handleRemove }]} />
+
+// After
+<Input
+  chips={[
+    <Chip key="tag">
+      Tag
+      <Chip.Remove onClick={handleRemove} />
+    </Chip>
+  ]}
+/>
+```
+
+A disabled input disables the chips that you pass as props. Chip elements
+render as given, so pass `disabled` to them.
+
 ## Unreleased: date filters compare whole days
 
 `DataView`, `DataTable` and `FilterChip` read and compare dates as calendar
diff --git a/apps/www/src/content/docs/components/chip/demo.ts b/apps/www/src/content/docs/components/chip/demo.ts
index b6303e8d5..3625d4a04 100644
--- a/apps/www/src/content/docs/components/chip/demo.ts
+++ b/apps/www/src/content/docs/components/chip/demo.ts
@@ -4,9 +4,10 @@ import type { ComponentPropsType } from '@/components/demo/types';
 import { getPropsString } from '@/lib/utils';
 
 export const getCode = (props: ComponentPropsType) => {
-  const { children, ...rest } = props;
+  const { children, removable, ...rest } = props;
+  const remove = removable ? '<Chip.Remove />' : '';
 
-  return `<Chip${getPropsString(rest)}>${children}</Chip>`;
+  return `<Chip${getPropsString(rest)}>${children}${remove}</Chip>`;
 };
 
 export const playground = {
@@ -27,7 +28,7 @@ export const playground = {
       options: ['neutral', 'accent', 'danger', 'success', 'warning'],
       defaultValue: 'neutral'
     },
-    isDismissible: {
+    removable: {
       type: 'checkbox',
       defaultValue: false
     },
@@ -80,13 +81,22 @@ export const colorDemo = {
   </Flex>`
 };
 
-export const dismissableDemo = {
+export const removeDemo = {
   type: 'code',
   code: `
   <Flex gap={9}>
-    <Chip isDismissible onDismiss={() => alert('dismissed')} aria-label="Dismissible chip">Dismissable Chip</Chip>
-    <Chip variant="outline" color="accent" isDismissible onDismiss={() => alert('dismissed')} aria-label="Dismissible chip">Dismissable Chip</Chip>
-    <Chip variant="filled" color="accent" isDismissible onDismiss={() => alert('dismissed')} aria-label="Dismissible chip">Dismissable Chip</Chip>
+    <Chip>
+      Removable Chip
+      <Chip.Remove onClick={() => alert('removed')} />
+    </Chip>
+    <Chip variant="outline" color="accent">
+      Removable Chip
+      <Chip.Remove onClick={() => alert('removed')} />
+    </Chip>
+    <Chip variant="filled" color="accent">
+      Removable Chip
+      <Chip.Remove onClick={() => alert('removed')} />
+    </Chip>
   </Flex>`
 };
 
diff --git a/apps/www/src/content/docs/components/chip/index.mdx b/apps/www/src/content/docs/components/chip/index.mdx
index dfc3c1bb4..3e6fd1033 100644
--- a/apps/www/src/content/docs/components/chip/index.mdx
+++ b/apps/www/src/content/docs/components/chip/index.mdx
@@ -9,7 +9,7 @@ import {
   variantsDemo,
   sizesDemo,
   colorDemo,
-  dismissableDemo,
+  removeDemo,
   iconsDemo,
 } from "./demo.ts";
 
@@ -22,12 +22,14 @@ Import and assemble the component:
 ```tsx
 import { Chip } from "@raystack/apsara";
 
-<Chip />
+<Chip>
+  <Chip.Remove />
+</Chip>
 ```
 
 ## Usage
 
-Appearance first, meaning variant, size and color, then the two things a chip can carry: icons and a dismiss action.
+Appearance first, meaning variant, size and color, then the two things a chip can carry: icons and a remove button.
 
 ### Variant
 
@@ -56,11 +58,13 @@ Chips can include leading and trailing icons to provide additional context or ac
 
 <Demo data={iconsDemo} />
 
-### Dismissible
+### Remove button
 
-Chips can be made dismissible by adding the isDismissible prop and an onDismiss handler.
+Add `Chip.Remove` as the last child to show a remove button. Handle the removal in its `onClick`. The button is named "Remove" plus the chip text, and it is disabled when the chip is disabled.
 
-<Demo data={dismissableDemo} />
+<Demo data={removeDemo} />
+
+To render the button as another element, pass `render`. For example, `Combobox` renders it as Base UI's `Combobox.ChipRemove`.
 
 ## API Reference
 
@@ -68,7 +72,13 @@ Renders a compact element for tags, labels, or attributes.
 
 <auto-type-table path="./props.ts" name="ChipProps" />
 
-The chip renders a `<button>` when `onClick` is set and it is not dismissible, and a `<span>` otherwise, so `ref` points to whichever element is rendered.
+The chip renders a `<button>` when `onClick` is set and it has no `Chip.Remove` child, and a `<span>` otherwise, so `ref` points to whichever element is rendered.
+
+### Remove Props
+
+A button that removes the chip. Place it as a direct child of `Chip`.
+
+<auto-type-table path="./props.ts" name="ChipRemoveProps" />
 
 ### Slots
 
@@ -78,9 +88,9 @@ Every rendered part carries a stable `data-slot` attribute for [styling and test
 |------|---------|
 | `chip` | The root element (`<button>` when interactive, `<span>` otherwise) |
 | `chip-leading-icon` | Wrapper around `leadingIcon` (when set) |
-| `chip-trailing-icon` | Wrapper around `trailingIcon` (when set and not dismissible) |
-| `chip-dismiss` | The dismiss button (when `isDismissible`) |
-| `chip-dismiss-icon` | The dismiss icon (when `isDismissible`) |
+| `chip-trailing-icon` | Wrapper around `trailingIcon` (when set) |
+| `chip-remove` | The `Chip.Remove` button |
+| `chip-remove-icon` | The icon inside `Chip.Remove` |
 
 ## Accessibility
 
diff --git a/apps/www/src/content/docs/components/chip/props.ts b/apps/www/src/content/docs/components/chip/props.ts
index 09aff3b13..6e47b3c57 100644
--- a/apps/www/src/content/docs/components/chip/props.ts
+++ b/apps/www/src/content/docs/components/chip/props.ts
@@ -23,14 +23,6 @@ export interface ChipProps {
   /** ReactNode to display as an icon after the label */
   trailingIcon?: React.ReactNode;
 
-  /**
-   * Boolean to show a dismiss button (replaces trailingIcon)
-   */
-  isDismissible?: boolean;
-
-  /** Callback function when dismiss button is clicked */
-  onDismiss?: () => void;
-
   /** Content to display inside the chip */
   children?: React.ReactNode;
 
@@ -54,4 +46,30 @@ export interface ChipProps {
 
   /** Ref to the rendered element. */
   ref?: React.Ref<HTMLSpanElement>;
+
+  /** Renders the chip as another element, or with a function that receives the chip props. */
+  render?: React.ReactElement | ((props: object) => React.ReactElement);
+}
+
+export interface ChipRemoveProps {
+  /** Called when the button is pressed. */
+  onClick?: React.MouseEventHandler<HTMLButtonElement>;
+
+  /**
+   * Accessible name of the button.
+   * @defaultValue "Remove" plus the chip text
+   */
+  'aria-label'?: string;
+
+  /**
+   * The icon inside the button.
+   * @defaultValue <XIcon />
+   */
+  children?: React.ReactNode;
+
+  /** Renders the button as another element, or with a function that receives the button props. */
+  render?: React.ReactElement | ((props: object) => React.ReactElement);
+
+  /** Additional CSS class names */
+  className?: string;
 }
diff --git a/apps/www/src/content/docs/components/combobox/demo.ts b/apps/www/src/content/docs/components/combobox/demo.ts
index 71fb48d4b..a2f84946e 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,37 @@ export const groupDemo = {
   </Combobox>`
 };
 
+export const labelDemo = {
+  type: 'code',
+  code: `
+  <Combobox multiple>
+    <Flex direction="column" gap={2}>
+      <Combobox.Label>Fruits</Combobox.Label>
+      <Combobox.Input placeholder="Select fruits" width={300} showClearButton />
+    </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: `
diff --git a/apps/www/src/content/docs/components/combobox/index.mdx b/apps/www/src/content/docs/components/combobox/index.mdx
index ad9c2c0be..5dcb5c077 100644
--- a/apps/www/src/content/docs/components/combobox/index.mdx
+++ b/apps/www/src/content/docs/components/combobox/index.mdx
@@ -13,6 +13,8 @@ import {
   withFieldDemo,
   controlledDemo,
   createItemsDemo,
+  labelDemo,
+  emptyDemo,
 } from "./demo.ts";
 
 <Demo data={playground} />
@@ -25,8 +27,18 @@ Import and assemble the component:
 import { Combobox } from "@raystack/apsara";
 
 <Combobox>
+  <Combobox.Label />
   <Combobox.Input />
-  <Combobox.Content />
+  <Combobox.Clear />
+  <Combobox.Status />
+  <Combobox.Content>
+    <Combobox.Empty />
+    <Combobox.Group>
+      <Combobox.GroupLabel />
+      <Combobox.Item />
+    </Combobox.Group>
+    <Combobox.Separator />
+  </Combobox.Content>
 </Combobox>
 ```
 
@@ -54,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} />
 
@@ -64,8 +76,22 @@ Pass the `multiple` prop to enable multi-select. Selected values appear as chips
 
 Each chip shows its value as text. To show a label instead, pass `itemToStringLabel` to the root. Values in the `{ value, label }` shape show their `label` without it.
 
+The input shows the first two chips and a "+N" count for the rest. Press Backspace in an empty input to remove the last chip shown. 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. Set `showClearButton` on `Combobox.Input` to show a clear button before the chevron. The button shows only when a value is selected. To place it somewhere else, render `Combobox.Clear` 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.
@@ -114,17 +140,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 a value is selected. `Combobox.Input` renders one before the chevron when `showClearButton` is set.
+
+<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. Add it with no 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, for example to announce loading. Place it anywhere inside `Combobox`. Pass a function as children to get the number of matching items. The number is `null` when `items` is not set on the root.
+
+<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
 
@@ -138,12 +188,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 around the input box in multiple mode |
+| `combobox-chip` | A selected value in multiple mode |
+| `combobox-chip-remove` | The button that removes a chip |
+| `input-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 (when `Combobox.Status` is rendered) |
+| `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) |
@@ -160,7 +218,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 text of `Combobox.Status`.
 - 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 6908fd723..406ed533f 100644
--- a/apps/www/src/content/docs/components/combobox/props.ts
+++ b/apps/www/src/content/docs/components/combobox/props.ts
@@ -60,6 +60,9 @@ export interface ComboboxRootProps {
 
   /** Converts a value to the text shown in the input and in multi-select chips. */
   itemToStringLabel?: (value: string) => string;
+
+  /** The `id` of the input. `Combobox.Label` uses it. */
+  id?: string;
 }
 
 export interface ComboboxInputProps {
@@ -72,6 +75,12 @@ export interface ComboboxInputProps {
   /** Whether the input is disabled. */
   disabled?: boolean;
 
+  /**
+   * Shows a clear button before the chevron.
+   * @default false
+   */
+  showClearButton?: boolean;
+
   /** Icon element to display at the start of input. */
   leadingIcon?: React.ReactNode;
 
@@ -138,6 +147,59 @@ 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. */
+  children?: React.ReactNode;
+
+  /** Additional CSS class names. */
+  className?: string;
+}
+
+export interface ComboboxStatusProps {
+  /** Text to announce. A function receives the number of matching items, or `null` without the `items` prop. */
+  children?: React.ReactNode | ((count: number | null) => React.ReactNode);
+
+  /** Additional CSS class names. */
+  className?: string;
+}
+
+export interface ComboboxGroupLabelProps {
   /** Additional CSS class names. */
   className?: string;
 }
diff --git a/apps/www/src/content/docs/components/floating-actions/demo.ts b/apps/www/src/content/docs/components/floating-actions/demo.ts
index bc5704c97..b1596dfbe 100644
--- a/apps/www/src/content/docs/components/floating-actions/demo.ts
+++ b/apps/www/src/content/docs/components/floating-actions/demo.ts
@@ -16,9 +16,9 @@ export const preview = {
       size="large"
       color="accent"
       leadingIcon={<SuccessIcon />}
-      isDismissible
     >
       2 selected
+      <Chip.Remove />
     </Chip>
     <FloatingActions.Separator />
     <Button variant="outline" color="neutral" size="small">Move to</Button>
@@ -36,9 +36,9 @@ export const inlineDemo = {
       size="large"
       color="accent"
       leadingIcon={<SuccessIcon />}
-      isDismissible
     >
       2 selected
+      <Chip.Remove />
     </Chip>
     <FloatingActions.Separator />
     <Button variant="outline" color="neutral" size="small">Move to</Button>
@@ -76,9 +76,9 @@ export const variantsDemo = {
       size="large"
       color="accent"
       leadingIcon={<SuccessIcon />}
-      isDismissible
     >
       2 selected
+      <Chip.Remove />
     </Chip>
     <FloatingActions.Separator />
     <Button variant="outline" color="neutral" size="small">Move to</Button>
@@ -95,9 +95,9 @@ export const variantsDemo = {
       size="large"
       color="accent"
       leadingIcon={<SuccessIcon />}
-      isDismissible
     >
       2 selected
+      <Chip.Remove />
     </Chip>
     <FloatingActions.Separator />
     <Button variant="outline" color="neutral" size="small">Move to</Button>
@@ -117,9 +117,9 @@ export const bulkActionsDemo = {
       size="large"
       color="accent"
       leadingIcon={<SuccessIcon />}
-      isDismissible
     >
       5 selected
+      <Chip.Remove />
     </Chip>
     <FloatingActions.Separator />
     <Button variant="outline" color="neutral" size="small">Archive</Button>
@@ -174,9 +174,9 @@ export const scrollingDemo = {
             size="large"
             color="accent"
             leadingIcon={<SuccessIcon />}
-            isDismissible
           >
             2 selected
+            <Chip.Remove />
           </Chip>
           <FloatingActions.Separator />
           <Button variant="outline" color="neutral" size="small">Move to</Button>
@@ -211,9 +211,9 @@ const placementWrapper = (props: string) =>
       size="large"
       color="accent"
       leadingIcon={<SuccessIcon />}
-      isDismissible
     >
       2 selected
+      <Chip.Remove />
     </Chip>
     <FloatingActions.Separator />
     <Button variant="outline" color="neutral" size="small">Move to</Button>
@@ -247,9 +247,9 @@ export const groupDemo = {
       size="large"
       color="accent"
       leadingIcon={<SuccessIcon />}
-      isDismissible
     >
       3 selected
+      <Chip.Remove />
     </Chip>
     <FloatingActions.Separator />
     <FloatingActions.Group>
diff --git a/apps/www/src/content/docs/components/floating-actions/index.mdx b/apps/www/src/content/docs/components/floating-actions/index.mdx
index fb53014b2..dca864a50 100644
--- a/apps/www/src/content/docs/components/floating-actions/index.mdx
+++ b/apps/www/src/content/docs/components/floating-actions/index.mdx
@@ -16,7 +16,10 @@ Import and assemble the component:
 import { FloatingActions, Chip, Button } from "@raystack/apsara";
 
 <FloatingActions aria-label="Selection actions">
-  <Chip isDismissible>2 selected</Chip>
+  <Chip>
+    2 selected
+    <Chip.Remove />
+  </Chip>
   <FloatingActions.Separator />
   <Button>Move to</Button>
   <Button>Actions</Button>
diff --git a/apps/www/src/content/docs/components/input/demo.ts b/apps/www/src/content/docs/components/input/demo.ts
index 5becc9c14..22b3c2417 100644
--- a/apps/www/src/content/docs/components/input/demo.ts
+++ b/apps/www/src/content/docs/components/input/demo.ts
@@ -75,10 +75,7 @@ export const disabledChipsDemo = {
   code: `<Input
   placeholder="Type and press Enter..."
   disabled
-  chips={[
-    { label: "Tag1", onRemove: () => console.log("Remove Tag1") },
-    { label: "Tag2", onRemove: () => console.log("Remove Tag2") }
-  ]}
+  chips={[{ children: "Tag1" }, { children: "Tag2" }]}
 />`
 };
 
@@ -100,18 +97,12 @@ export const sizeChipDemo = {
   code: `<Flex direction="column" gap={5}>
   <Input
     placeholder="Type and press Enter..."
-    chips={[
-      { label: "A", onRemove: () => console.log("Remove A") },
-      { label: "B", onRemove: () => console.log("Remove B") }
-    ]}
+    chips={[{ children: "A" }, { children: "B" }]}
   />
   <Input
     placeholder="Type and press Enter..."
     size="small"
-    chips={[
-      { label: "A", onRemove: () => console.log("Remove A") },
-      { label: "B", onRemove: () => console.log("Remove B") }
-    ]}
+    chips={[{ children: "A" }, { children: "B" }]}
   />
 </Flex>`
 };
@@ -165,10 +156,12 @@ export const interactiveChipDemo = {
             setInput("");
           }
         }}
-        chips={chips.map((c, i) => ({
-          label: c.label,
-          onRemove: () => setChips(chips.filter((_, j) => j !== i))
-        }))}
+        chips={chips.map((c, i) => (
+          <Chip key={i}>
+            {c.label}
+            <Chip.Remove onClick={() => setChips(chips.filter((_, j) => j !== i))} />
+          </Chip>
+        ))}
         maxChipsVisible={4}
       />`
     }
diff --git a/apps/www/src/content/docs/components/input/index.mdx b/apps/www/src/content/docs/components/input/index.mdx
index 2b971dae4..fa8fe8fd3 100644
--- a/apps/www/src/content/docs/components/input/index.mdx
+++ b/apps/www/src/content/docs/components/input/index.mdx
@@ -70,25 +70,24 @@ A leading icon names the field at a glance; a trailing icon usually holds an act
 
 ### With chips
 
-Input that can display and manage chips/tags.
+`chips` shows chips before the text. Each item is either [Chip](/docs/components/chip) props, which the input renders as a `Chip`, or a `Chip` element, which renders as given.
 
 <Demo data={sizeChipDemo} />
 
 ### Interactive chips
 
-Accepts an array of chips, each with a `label` and an optional `onRemove` callback. 
+To make a chip removable, pass a `Chip` element with a `Chip.Remove` child and handle the removal in its `onClick`.
 
 `maxChipsVisible` caps how many are rendered before collapsing the rest into an overflow counter.
 
 ```tsx
-chips?: Array<{ label: string; onRemove?: () => void }>;                                                                                       
-maxChipsVisible?: number;  // defaults to 2   
+chips?: Array<ReactElement | ChipProps>;
+maxChipsVisible?: number; // defaults to 2
 ```
 
-This is purely a presentation layer and does not manage chip state. The wrapper component owns the array and decides when items are added or removed.
+The input does not manage chip state. The parent component owns the array and decides when items are added or removed.
 
-The example below 
-  appends a chip on `Enter`, removes one when its dismiss button is clicked.
+The example below appends a chip on `Enter` and removes one when its remove button is clicked.
 
 <Demo data={interactiveChipDemo} />
 
@@ -112,7 +111,7 @@ Use `onValueChange` for a callback that receives only the new string value, or `
 
 ### Disabled with chips
 
-When disabled, chips become non-interactive and their dismiss buttons are hidden.
+When disabled, chips passed as props are disabled too, and so is their `Chip.Remove`. Chip elements render as given, so pass `disabled` to them yourself.
 
 <Demo data={disabledChipsDemo} />
 
@@ -143,3 +142,4 @@ Every rendered part carries a stable `data-slot` attribute for [styling and test
 - Use with [Field](/docs/components/field) for automatic label association and error linking
 - Required state is communicated via `aria-required`
 - Supports all native `<input>` attributes
+- The leading icon is hidden from screen readers. The trailing icon is not, so a button in it stays reachable. Set `aria-hidden` on decorative content in `trailingIcon` that is not an icon, for example a text glyph.
diff --git a/apps/www/src/content/docs/components/input/props.ts b/apps/www/src/content/docs/components/input/props.ts
index cd5a5dba4..2e282b2d4 100644
--- a/apps/www/src/content/docs/components/input/props.ts
+++ b/apps/www/src/content/docs/components/input/props.ts
@@ -1,3 +1,5 @@
+import type { ChipProps } from '../chip/props';
+
 export interface InputProps {
   /**
    * Size variant of the input.
@@ -5,7 +7,7 @@ export interface InputProps {
    */
   size?: 'small' | 'large';
 
-  /** Whether the input is disabled. When true, chips are also disabled and their dismiss buttons are hidden. */
+  /** Whether the input is disabled. When true, chips passed as props are also disabled. */
   disabled?: boolean;
 
   /** Icon element to display at the start of input. */
@@ -20,10 +22,8 @@ export interface InputProps {
   /** Text or symbol to show after input value. */
   suffix?: string;
 
-  /**
-   * Array of chip objects with label and optional onRemove function.
-   */
-  chips?: { label: string; onRemove?: () => void }[];
+  /** Chips shown before the text. Elements render as given; props render a `Chip`. */
+  chips?: Array<React.ReactElement | ChipProps>;
 
   /**
    * Maximum number of chips to show before displaying overflow count.
diff --git a/apps/www/src/content/docs/dataview/demo.ts b/apps/www/src/content/docs/dataview/demo.ts
index f5d51bbb1..446cf8aef 100644
--- a/apps/www/src/content/docs/dataview/demo.ts
+++ b/apps/www/src/content/docs/dataview/demo.ts
@@ -387,10 +387,9 @@ function SelectionBar() {
         size="large"
         color="neutral"
         leadingIcon={<Frame size={16} strokeWidth={1.5} />}
-        isDismissible
-        onDismiss={() => table.resetRowSelection()}
       >
         {selectedCount} selected
+        <Chip.Remove onClick={() => table.resetRowSelection()} />
       </Chip>
       <FloatingActions.Separator />
       <Button variant="outline" color="neutral" size="small">Change team</Button>
diff --git a/packages/react/components/chip/__tests__/chip.test.tsx b/packages/react/components/chip/__tests__/chip.test.tsx
index b5e9ad76a..5eadd0879 100644
--- a/packages/react/components/chip/__tests__/chip.test.tsx
+++ b/packages/react/components/chip/__tests__/chip.test.tsx
@@ -138,11 +138,12 @@ describe('Chip', () => {
       expect(ref.current?.tagName).toBe('BUTTON');
     });
 
-    it('stays a span when dismissible, even with onClick', () => {
+    it('stays a span with Chip.Remove, even with onClick', () => {
       const ref = createRef<HTMLSpanElement>();
       render(
-        <Chip ref={ref} isDismissible onClick={vi.fn()} onDismiss={vi.fn()}>
+        <Chip ref={ref} onClick={vi.fn()}>
           Test Chip
+          <Chip.Remove />
         </Chip>
       );
 
@@ -150,35 +151,62 @@ describe('Chip', () => {
     });
   });
 
-  describe('Dismissible Behavior', () => {
-    it('renders dismiss button when isDismissible is true', () => {
-      render(<Chip isDismissible>Dismissible Chip</Chip>);
+  describe('Render', () => {
+    it('renders as the render element with the chip props', () => {
+      render(<Chip render={<div data-testid='custom' />}>Test Chip</Chip>);
 
-      const dismissButton = screen.getByRole('button', {
-        name: 'Remove Dismissible Chip'
+      const chip = screen.getByTestId('custom');
+      expect(chip.tagName).toBe('DIV');
+      expect(chip).toHaveClass(styles.chip);
+      expect(chip).toHaveAttribute('data-slot', 'chip');
+      expect(chip).toHaveTextContent('Test Chip');
+    });
+  });
+
+  describe('Chip.Remove', () => {
+    it('renders a remove button named after the chip', () => {
+      render(
+        <Chip>
+          Removable Chip
+          <Chip.Remove />
+        </Chip>
+      );
+
+      const removeButton = screen.getByRole('button', {
+        name: 'Remove Removable Chip'
       });
-      expect(dismissButton).toBeInTheDocument();
-      expect(dismissButton).toHaveClass(styles['dismiss-button']);
-      expect(dismissButton).toHaveAttribute('type', 'button');
+      expect(removeButton).toHaveClass(styles.remove);
+      expect(removeButton).toHaveAttribute('type', 'button');
+      expect(screen.getByRole('status')).toHaveAttribute(
+        'aria-label',
+        'Removable Chip'
+      );
     });
 
-    it('uses the shared XIcon registry icon for the dismiss button', () => {
-      const { container } = render(<Chip isDismissible>Dismissible Chip</Chip>);
+    it('uses the shared XIcon registry icon', () => {
+      const { container } = render(
+        <Chip>
+          Removable Chip
+          <Chip.Remove />
+        </Chip>
+      );
 
       const icon = container.querySelector('[data-icon="XIcon"]');
-      expect(icon).toBeInTheDocument();
-      expect(icon).toHaveAttribute('data-slot', 'chip-dismiss-icon');
+      expect(icon).toHaveAttribute('data-slot', 'chip-remove-icon');
       expect(icon).toHaveAttribute('width', '12');
       expect(icon).toHaveAttribute('height', '12');
     });
 
-    it('passes the dismiss icon size to an XIcon override', () => {
+    it('passes the icon size to an XIcon override', () => {
       const CustomX = (props: IconProps) => (
         <svg data-testid='custom-x' {...props} />
       );
       render(
         <IconProvider components={{ XIcon: CustomX }}>
-          <Chip isDismissible>Dismissible Chip</Chip>
+          <Chip>
+            Removable Chip
+            <Chip.Remove />
+          </Chip>
         </IconProvider>
       );
 
@@ -188,39 +216,48 @@ describe('Chip', () => {
       expect(icon).toHaveAttribute('height', '12');
     });
 
-    it('calls onDismiss when dismiss button is clicked', () => {
-      const onDismiss = vi.fn();
+    it('calls onClick without triggering the chip onClick', () => {
+      const onClick = vi.fn();
+      const onRemove = vi.fn();
       render(
-        <Chip isDismissible onDismiss={onDismiss}>
-          Dismissible Chip
+        <Chip onClick={onClick}>
+          Removable Chip
+          <Chip.Remove onClick={onRemove} />
         </Chip>
       );
 
-      const dismissButton = screen.getByRole('button', {
-        name: 'Remove Dismissible Chip'
-      });
-      fireEvent.click(dismissButton);
+      fireEvent.click(
+        screen.getByRole('button', { name: 'Remove Removable Chip' })
+      );
 
-      expect(onDismiss).toHaveBeenCalledTimes(1);
+      expect(onRemove).toHaveBeenCalledTimes(1);
+      expect(onClick).not.toHaveBeenCalled();
     });
 
-    it('stops propagation when dismiss button is clicked', () => {
-      const onClick = vi.fn();
-      const onDismiss = vi.fn();
-
+    it('is disabled when the chip is disabled', () => {
       render(
-        <Chip isDismissible onClick={onClick} onDismiss={onDismiss}>
-          Dismissible Chip
+        <Chip disabled>
+          Removable Chip
+          <Chip.Remove />
         </Chip>
       );
 
-      const dismissButton = screen.getByRole('button', {
-        name: 'Remove Dismissible Chip'
-      });
-      fireEvent.click(dismissButton);
+      expect(
+        screen.getByRole('button', { name: 'Remove Removable Chip' })
+      ).toBeDisabled();
+    });
 
-      expect(onDismiss).toHaveBeenCalledTimes(1);
-      expect(onClick).not.toHaveBeenCalled();
+    it('renders as the render element', () => {
+      render(
+        <Chip>
+          Removable Chip
+          <Chip.Remove render={<span data-testid='custom-remove' />} />
+        </Chip>
+      );
+
+      const remove = screen.getByTestId('custom-remove');
+      expect(remove.tagName).toBe('SPAN');
+      expect(remove).toHaveAttribute('aria-label', 'Remove Removable Chip');
     });
   });
 
diff --git a/packages/react/components/chip/__tests__/data-slots.test.tsx b/packages/react/components/chip/__tests__/data-slots.test.tsx
index 0fdc85dc2..43df3b543 100644
--- a/packages/react/components/chip/__tests__/data-slots.test.tsx
+++ b/packages/react/components/chip/__tests__/data-slots.test.tsx
@@ -13,14 +13,14 @@ describe('Chip data-slot contract', () => {
     expectSlots(container, ['chip', 'chip-leading-icon', 'chip-trailing-icon']);
   });
 
-  it('exposes dismiss slots when dismissible', () => {
+  it('exposes remove slots with Chip.Remove', () => {
     const { container } = render(
-      <Chip isDismissible onDismiss={vi.fn()}>
+      <Chip>
         Label
+        <Chip.Remove />
       </Chip>
     );
-    expectSlots(container, ['chip', 'chip-dismiss', 'chip-dismiss-icon']);
-    expect(getSlot(container, 'chip-trailing-icon')).toBeNull();
+    expectSlots(container, ['chip', 'chip-remove', 'chip-remove-icon']);
   });
 
   it('keeps the root slot when rendered as an interactive button', () => {
@@ -32,7 +32,7 @@ describe('Chip data-slot contract', () => {
     const { container } = render(<Chip>Label</Chip>);
     expect(getSlot(container, 'chip-leading-icon')).toBeNull();
     expect(getSlot(container, 'chip-trailing-icon')).toBeNull();
-    expect(getSlot(container, 'chip-dismiss')).toBeNull();
+    expect(getSlot(container, 'chip-remove')).toBeNull();
   });
 
   it('lets callers override the root slot via props', () => {
diff --git a/packages/react/components/chip/chip.module.css b/packages/react/components/chip/chip.module.css
index b87320265..1dc9137d5 100644
--- a/packages/react/components/chip/chip.module.css
+++ b/packages/react/components/chip/chip.module.css
@@ -144,7 +144,7 @@
   opacity: 0.5;
 }
 
-.dismiss-button {
+.remove {
   background: none;
   border: none;
   padding: 0;
@@ -161,27 +161,27 @@
   font-family: inherit;
 }
 
-.chip-interactive:focus,
-.dismiss-button:focus {
+.chip:focus,
+.remove:focus {
   outline: none;
 }
 
-.chip-interactive:focus-visible {
+.chip:focus-visible {
   outline: var(--rs-focus-ring);
 }
 
-.dismiss-button:focus-visible {
+.remove:focus-visible {
   outline: var(--rs-focus-ring);
   border-radius: max(var(--rs-radius-pill, 0px), var(--rs-radius-1));
 }
 
-.dismiss-button:active,
+.remove:active,
 .chip-interactive:active {
   transform: scale(var(--rs-scale-pressed-strong));
 }
 
 @media (prefers-reduced-motion: no-preference) {
-  .dismiss-button {
+  .remove {
     transition: transform var(--rs-duration-press) var(--rs-ease-out);
   }
 }
diff --git a/packages/react/components/chip/chip.tsx b/packages/react/components/chip/chip.tsx
index cd0b11a7c..c27a0dead 100644
--- a/packages/react/components/chip/chip.tsx
+++ b/packages/react/components/chip/chip.tsx
@@ -1,7 +1,15 @@
 'use client';
 
+import { mergeProps, useRender } from '@base-ui/react';
 import { cva, cx, type VariantProps } from 'class-variance-authority';
-import { ComponentProps, ReactNode } from 'react';
+import {
+  Children,
+  ComponentProps,
+  createContext,
+  isValidElement,
+  ReactNode,
+  useContext
+} from 'react';
 import { XIcon } from '~/icons';
 import { radiusVariants } from '../../shared/radius';
 import styles from './chip.module.css';
@@ -32,42 +40,51 @@ const chip = cva(styles.chip, {
   }
 });
 
-export type ChipProps = ComponentProps<'span'> &
+const ChipContext = createContext<{ label?: string; disabled?: boolean }>({});
+
+export type ChipProps = useRender.ComponentProps<'span'> &
   VariantProps<typeof chip> & {
     trailingIcon?: ReactNode;
     leadingIcon?: ReactNode;
-    isDismissible?: boolean;
-    onDismiss?: () => void;
     disabled?: boolean;
   };
 
-export const Chip = ({
+export type ChipRemoveProps = useRender.ComponentProps<'button'>;
+
+function getTextLabel(children: ReactNode) {
+  const text = Children.toArray(children)
+    .filter(child => typeof child === 'string' || typeof child === 'number')
+    .join('')
+    .trim();
+  return text || undefined;
+}
+
+const ChipRoot = ({
   variant,
   radius,
   size,
   color,
   trailingIcon,
   leadingIcon,
-  isDismissible,
   children,
   className,
-  onDismiss,
   onClick,
   role,
   disabled,
   'aria-label': ariaLabel,
+  render,
+  ref,
   ...props
 }: ChipProps) => {
-  const handleDismiss = (e: React.MouseEvent) => {
-    e.stopPropagation();
-    onDismiss?.();
-  };
-
-  const isInteractive = !!onClick && !isDismissible;
+  const label = ariaLabel ?? getTextLabel(children);
+  // A chip with a remove button stays a span, so the buttons do not nest.
+  const hasRemove = Children.toArray(children).some(
+    child => isValidElement(child) && child.type === ChipRemove
+  );
+  const isInteractive = !!onClick && !hasRemove;
 
   const sharedProps = {
-    'aria-label':
-      ariaLabel ?? (typeof children === 'string' ? children : undefined),
+    'aria-label': label,
     'data-disabled': disabled || undefined
   };
 
@@ -84,25 +101,7 @@ export const Chip = ({
         </span>
       )}
       {children}
-      {isDismissible ? (
-        <button
-          onClick={handleDismiss}
-          className={styles['dismiss-button']}
-          aria-label={`Remove ${
-            typeof children === 'string' ? children : 'item'
-          }`}
-          type='button'
-          data-slot='chip-dismiss'
-        >
-          <XIcon
-            width={12}
-            height={12}
-            aria-hidden='true'
-            role='presentation'
-            data-slot='chip-dismiss-icon'
-          />
-        </button>
-      ) : trailingIcon ? (
+      {trailingIcon && (
         <span
           className={styles['trailing-icon']}
           aria-hidden='true'
@@ -111,47 +110,78 @@ export const Chip = ({
         >
           {trailingIcon}
         </span>
-      ) : null}
+      )}
     </>
   );
 
-  if (isInteractive) {
-    return (
-      <button
-        data-slot='chip'
-        {...(props as React.ComponentProps<'button'>)}
-        {...sharedProps}
-        type='button'
-        disabled={disabled}
-        role={role}
-        className={chip({
+  const ownProps = isInteractive
+    ? {
+        type: 'button',
+        disabled,
+        role,
+        className: chip({
           variant,
           radius,
           size,
           color,
           className: cx(styles['chip-interactive'], className)
-        })}
-        onClick={
-          onClick as unknown as React.MouseEventHandler<HTMLButtonElement>
-        }
-      >
-        {content}
-      </button>
-    );
-  }
+        }),
+        onClick
+      }
+    : {
+        className: chip({ variant, size, color, radius, className }),
+        role: role ?? 'status',
+        onClick: disabled ? undefined : onClick
+      };
 
-  return (
-    <span
-      data-slot='chip'
-      {...props}
-      {...sharedProps}
-      className={chip({ variant, size, color, radius, className })}
-      role={role ?? 'status'}
-      onClick={disabled ? undefined : onClick}
-    >
-      {content}
-    </span>
-  );
+  const element = useRender({
+    defaultTagName: isInteractive ? 'button' : 'span',
+    render,
+    ref,
+    props: mergeProps<'span'>(
+      { 'data-slot': 'chip' } as useRender.ComponentProps<'span'>,
+      props,
+      {
+        ...sharedProps,
+        ...(ownProps as ComponentProps<'span'>),
+        children: content
+      }
+    )
+  });
+
+  return <ChipContext value={{ label, disabled }}>{element}</ChipContext>;
+};
+ChipRoot.displayName = 'Chip';
+
+const ChipRemove = ({ render, ref, ...props }: ChipRemoveProps) => {
+  const { label, disabled } = useContext(ChipContext);
+
+  return useRender({
+    defaultTagName: 'button',
+    render,
+    ref,
+    props: mergeProps<'button'>(
+      {
+        type: 'button',
+        className: styles.remove,
+        'aria-label': `Remove ${label ?? 'item'}`,
+        disabled: disabled || undefined,
+        'data-slot': 'chip-remove',
+        onClick: event => event.stopPropagation(),
+        children: (
+          <XIcon
+            width={12}
+            height={12}
+            aria-hidden='true'
+            role='presentation'
+            data-slot='chip-remove-icon'
+          />
+        )
+      } as useRender.ComponentProps<'button'>,
+      props
+    )
+  });
 };
+ChipRemove.displayName = 'Chip.Remove';
 
-Chip.displayName = 'Chip';
+export const Chip = Object.assign(ChipRoot, { Remove: ChipRemove });
diff --git a/packages/react/components/chip/index.tsx b/packages/react/components/chip/index.tsx
index b8dad1ac1..abd0cef2c 100644
--- a/packages/react/components/chip/index.tsx
+++ b/packages/react/components/chip/index.tsx
@@ -1 +1 @@
-export { Chip, type ChipProps } from './chip';
+export { Chip, type ChipProps, type ChipRemoveProps } from './chip';
diff --git a/packages/react/components/combobox/__tests__/combobox.test.tsx b/packages/react/components/combobox/__tests__/combobox.test.tsx
index 8df68130d..be67e1770 100644
--- a/packages/react/components/combobox/__tests__/combobox.test.tsx
+++ b/packages/react/components/combobox/__tests__/combobox.test.tsx
@@ -350,13 +350,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>
@@ -382,7 +382,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>
@@ -594,3 +594,223 @@ describe('Combobox.createItems', () => {
     });
   });
 });
+
+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 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
+    );
+  });
+
+  it('renders inside the input box with showClearButton', async () => {
+    const user = userEvent.setup();
+    const handleValueChange = vi.fn();
+    const { container } = render(
+      <Combobox
+        multiple
+        defaultValue={['apple', 'banana']}
+        onValueChange={handleValueChange}
+      >
+        <Combobox.Input placeholder={PLACEHOLDER_TEXT} showClearButton />
+        <Combobox.Content>
+          <Combobox.Item value='apple'>Apple</Combobox.Item>
+        </Combobox.Content>
+      </Combobox>
+    );
+    const clear = screen.getByRole('button', { name: 'Clear' });
+    expect(
+      container.querySelector('[data-slot="input-trailing-icon"]')
+    ).toContainElement(clear);
+
+    await user.click(clear);
+
+    expect(handleValueChange).toHaveBeenLastCalledWith([]);
+  });
+
+  it('is disabled when Combobox.Input is disabled', () => {
+    render(
+      <Combobox multiple defaultValue={['apple']}>
+        <Combobox.Input
+          placeholder={PLACEHOLDER_TEXT}
+          disabled
+          showClearButton
+        />
+        <Combobox.Content>
+          <Combobox.Item value='apple'>Apple</Combobox.Item>
+        </Combobox.Content>
+      </Combobox>
+    );
+    expect(screen.getByRole('button', { name: 'Clear' })).toBeDisabled();
+  });
+});
+
+describe('Combobox disabled', () => {
+  it('disables the input when the root is disabled', () => {
+    render(<BasicCombobox disabled />);
+    expect(screen.getByRole('combobox')).toBeDisabled();
+  });
+});
+
+describe('Combobox.Empty', () => {
+  it('renders "No results" outside the listbox by default', async () => {
+    const user = userEvent.setup();
+    render(<BasicCombobox />);
+    await user.type(screen.getByRole('combobox'), 'zzz');
+
+    const empty = await screen.findByText(/^No results/);
+    expect(empty).toHaveAttribute('data-slot', 'combobox-empty');
+    expect(screen.getByRole('listbox')).not.toContainElement(empty);
+  });
+
+  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('passes the number of matching items to its children', async () => {
+    const user = userEvent.setup();
+    render(
+      <Combobox items={FRUIT_OPTIONS.map(option => option.label)}>
+        <Combobox.Input placeholder={PLACEHOLDER_TEXT} />
+        <Combobox.Status>{count => `${count} results`}</Combobox.Status>
+        <Combobox.Content>
+          {(item: string) => (
+            <Combobox.Item key={item} value={item}>
+              {item}
+            </Combobox.Item>
+          )}
+        </Combobox.Content>
+      </Combobox>
+    );
+    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..429f391de 100644
--- a/packages/react/components/combobox/__tests__/data-slots.test.tsx
+++ b/packages/react/components/combobox/__tests__/data-slots.test.tsx
@@ -32,14 +32,15 @@ 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.Status />
         <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 +65,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 +93,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',
+      'input-chip-overflow'
+    ]);
+  });
 });
diff --git a/packages/react/components/combobox/combobox-content.tsx b/packages/react/components/combobox/combobox-content.tsx
index 83cce3a7a..2951658b8 100644
--- a/packages/react/components/combobox/combobox-content.tsx
+++ b/packages/react/components/combobox/combobox-content.tsx
@@ -2,10 +2,11 @@
 
 import { Combobox as ComboboxPrimitive } from '@base-ui/react';
 import { cx } from 'class-variance-authority';
-import type { ReactNode } from 'react';
+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 } from './combobox-misc';
 import { useComboboxContext } from './combobox-root';
 
 export interface ComboboxContentProps<Item = unknown>
@@ -36,6 +37,18 @@ export const ComboboxContent = <Item,>({
 }: ComboboxContentProps<Item>) => {
   const { inputContainerRef } = useComboboxContext();
   const theme = useThemeInjection();
+
+  // Empty is a live region, and a listbox only allows options and groups, so
+  // it is taken out of the children and rendered before the list.
+  let empty: ReactNode = <ComboboxEmpty>No results</ComboboxEmpty>;
+  let listChildren = children;
+  if (typeof children !== 'function') {
+    listChildren = Children.toArray(children).filter(child => {
+      if (!isValidElement(child) || child.type !== ComboboxEmpty) return true;
+      empty = child;
+      return false;
+    });
+  }
   return (
     <ComboboxPrimitive.Portal {...theme}>
       <ComboboxPrimitive.Positioner
@@ -60,11 +73,12 @@ export const ComboboxContent = <Item,>({
           finalFocus={finalFocus}
           data-slot='combobox-content'
         >
+          {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 a8399ef4c..444ad05f8 100644
--- a/packages/react/components/combobox/combobox-input.tsx
+++ b/packages/react/components/combobox/combobox-input.tsx
@@ -3,39 +3,85 @@
 import { Combobox as ComboboxPrimitive } from '@base-ui/react';
 import { type ComponentProps } from 'react';
 import { ChevronDownIcon } from '~/icons';
+import { Chip } from '../chip';
+import { Flex } from '../flex';
 import { Input } from '../input';
+import styles from './combobox.module.css';
+import { ComboboxClear } from './combobox-misc';
 import { useComboboxContext } from './combobox-root';
 
 export interface ComboboxInputProps
   extends Omit<
     ComponentProps<typeof Input>,
     'trailingIcon' | 'suffix' | 'chips' | 'maxChipsVisible'
-  > {}
+  > {
+  /**
+   * Shows a clear button before the chevron.
+   * @default false
+   */
+  showClearButton?: boolean;
+}
 
-export const ComboboxInput = ({ ref, ...props }: ComboboxInputProps) => {
-  const { multiple, inputContainerRef, value, onValueChange, getLabel } =
-    useComboboxContext();
-  return (
+export const ComboboxInput = ({
+  ref,
+  disabled,
+  showClearButton = false,
+  ...props
+}: ComboboxInputProps) => {
+  const { multiple, inputContainerRef, value, getLabel } = useComboboxContext();
+  const chevron = <ChevronDownIcon />;
+
+  const input = (
     <ComboboxPrimitive.Input
       ref={ref}
+      disabled={disabled}
       render={
         <Input
           containerRef={inputContainerRef}
+          trailingIcon={
+            showClearButton ? (
+              <Flex align='center' gap={2} className={styles.trailing}>
+                <ComboboxClear disabled={disabled} />
+                {chevron}
+              </Flex>
+            ) : (
+              chevron
+            )
+          }
           chips={
             multiple && Array.isArray(value)
-              ? value.map(val => ({
-                  label: getLabel(val),
-                  onRemove: () =>
-                    onValueChange?.((value as string[])?.filter(v => v !== val))
-                }))
+              ? value.map((val, index) => (
+                  <Chip
+                    key={index}
+                    render={<ComboboxPrimitive.Chip />}
+                    disabled={disabled}
+                    data-slot='combobox-chip'
+                  >
+                    {getLabel(val)}
+                    <Chip.Remove
+                      render={<ComboboxPrimitive.ChipRemove />}
+                      data-slot='combobox-chip-remove'
+                    />
+                  </Chip>
+                ))
               : undefined
           }
-          trailingIcon={<ChevronDownIcon />}
           data-slot='combobox-input'
           {...props}
         />
       }
     />
   );
+
+  if (!multiple) return input;
+
+  return (
+    <ComboboxPrimitive.Chips
+      className={styles.chips}
+      data-slot='combobox-chips'
+    >
+      {input}
+    </ComboboxPrimitive.Chips>
+  );
 };
 ComboboxInput.displayName = 'Combobox.Input';
diff --git a/packages/react/components/combobox/combobox-misc.tsx b/packages/react/components/combobox/combobox-misc.tsx
index ddcec0652..142d81082 100644
--- a/packages/react/components/combobox/combobox-misc.tsx
+++ b/packages/react/components/combobox/combobox-misc.tsx
@@ -2,10 +2,23 @@
 
 import { Combobox as ComboboxPrimitive } from '@base-ui/react';
 import { cx } from 'class-variance-authority';
+import type { ReactNode } from 'react';
+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';
 
-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 +27,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 +71,81 @@ 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,
+  ...props
+}: ComboboxPrimitive.Empty.Props) => (
+  <ComboboxPrimitive.Empty
+    className={cx(styles.empty, className)}
+    data-slot='combobox-empty'
+    {...props}
+  />
+);
+ComboboxEmpty.displayName = 'Combobox.Empty';
+
+const isGroup = (item: unknown): item is { items: readonly unknown[] } =>
+  typeof item === 'object' &&
+  item !== null &&
+  Array.isArray((item as { items?: unknown }).items);
+
+const countItems = (items: readonly unknown[]) =>
+  items.reduce<number>(
+    (count, item) => count + (isGroup(item) ? item.items.length : 1),
+    0
+  );
+
+export interface ComboboxStatusProps
+  extends Omit<ComboboxPrimitive.Status.Props, 'children'> {
+  /** Text to announce. A function receives the number of matching items, or `null` without the `items` prop. */
+  children?: ReactNode | ((count: number | null) => ReactNode);
+}
+
+export const ComboboxStatus = ({
+  className,
+  children,
+  ...props
+}: ComboboxStatusProps) => {
+  const { hasItems } = useComboboxContext();
+  const filteredItems = ComboboxPrimitive.useFilteredItems<unknown>();
+
+  const content =
+    typeof children === 'function'
+      ? children(hasItems ? countItems(filteredItems) : null)
+      : children;
+
+  return (
+    <ComboboxPrimitive.Status
+      className={cx(styles['visually-hidden'], className)}
+      data-slot='combobox-status'
+      {...props}
+    >
+      {content}
+    </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 73ff964e2..3c22bca55 100644
--- a/packages/react/components/combobox/combobox-root.tsx
+++ b/packages/react/components/combobox/combobox-root.tsx
@@ -7,6 +7,7 @@ import {
   RefObject,
   useCallback,
   useContext,
+  useId,
   useMemo,
   useRef
 } from 'react';
@@ -16,9 +17,9 @@ 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;
 }
 
@@ -78,8 +79,11 @@ export const ComboboxRoot = <Value extends unknown | unknown[], Item = Value>({
   items,
   required,
   itemToStringLabel,
+  id: idProp,
   ...props
 }: ComboboxRootProps<Value, Item>) => {
+  const generatedId = useId();
+  const id = idProp ?? generatedId;
   const fieldContext = useFieldContext();
   const resolvedRequired = required ?? fieldContext?.required;
 
@@ -148,12 +152,12 @@ export const ComboboxRoot = <Value extends unknown | unknown[], Item = Value>({
       multiple,
       inputValue,
       hasItems: !!items,
+      inputId: id,
       inputContainerRef,
       value: computedValue,
-      onValueChange: handleValueChange,
       getLabel
     }),
-    [multiple, inputValue, items, computedValue, handleValueChange, getLabel]
+    [multiple, inputValue, items, id, computedValue, getLabel]
   );
 
   return (
@@ -168,6 +172,7 @@ export const ComboboxRoot = <Value extends unknown | unknown[], Item = Value>({
         itemToStringLabel={itemToStringLabel}
         value={providedValue}
         defaultValue={defaultValue}
+        id={id}
         required={resolvedRequired}
         modal
         {...props}
diff --git a/packages/react/components/combobox/combobox.module.css b/packages/react/components/combobox/combobox.module.css
index 44640aa08..7549a52a2 100644
--- a/packages/react/components/combobox/combobox.module.css
+++ b/packages/react/components/combobox/combobox.module.css
@@ -82,11 +82,47 @@
   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;
+}
+
+.content:has([role="option"]) .empty {
+  display: none;
+}
+
+.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 +134,19 @@
   margin: var(--rs-space-2) calc(var(--rs-space-3) * -1);
   background: var(--rs-color-border-base-primary);
 }
+
+/* Base UI treats a press anywhere in Chips as a press on the input, so Chips
+   takes no box and the input container sets the area. */
+.chips {
+  display: contents;
+}
+
+/* Input sizes its trailing icon slot for one icon. */
+[data-slot="input-trailing-icon"]:has(> .trailing) {
+  width: auto;
+}
+
+.trailing > svg {
+  width: var(--rs-space-5);
+  height: var(--rs-space-5);
+}
diff --git a/packages/react/components/combobox/combobox.tsx b/packages/react/components/combobox/combobox.tsx
index d557fc42f..edeabcb77 100644
--- a/packages/react/components/combobox/combobox.tsx
+++ b/packages/react/components/combobox/combobox.tsx
@@ -3,9 +3,13 @@ import { ComboboxContent } from './combobox-content';
 import { ComboboxInput } from './combobox-input';
 import { ComboboxItem } from './combobox-item';
 import {
+  ComboboxClear,
+  ComboboxEmpty,
   ComboboxGroup,
+  ComboboxGroupLabel,
   ComboboxLabel,
-  ComboboxSeparator
+  ComboboxSeparator,
+  ComboboxStatus
 } from './combobox-misc';
 import { ComboboxRoot } from './combobox-root';
 
@@ -13,8 +17,12 @@ 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,
diff --git a/packages/react/components/combobox/index.ts b/packages/react/components/combobox/index.ts
index 4c880b2d0..e906af58d 100644
--- a/packages/react/components/combobox/index.ts
+++ b/packages/react/components/combobox/index.ts
@@ -2,4 +2,9 @@ export { Combobox } from './combobox';
 export type { ComboboxContentProps } from './combobox-content';
 export type { ComboboxInputProps } from './combobox-input';
 export type { ComboboxItemProps } from './combobox-item';
+export type {
+  ComboboxClearProps,
+  ComboboxLabelProps,
+  ComboboxStatusProps
+} from './combobox-misc';
 export type { ComboboxRootProps as ComboboxProps } from './combobox-root';
diff --git a/packages/react/components/input/__tests__/data-slots.test.tsx b/packages/react/components/input/__tests__/data-slots.test.tsx
index 5dcb0186e..60de4d7ba 100644
--- a/packages/react/components/input/__tests__/data-slots.test.tsx
+++ b/packages/react/components/input/__tests__/data-slots.test.tsx
@@ -11,7 +11,11 @@ describe('Input data-slot contract', () => {
         trailingIcon={<span>t</span>}
         prefix='https://'
         suffix='.com'
-        chips={[{ label: 'One' }, { label: 'Two' }, { label: 'Three' }]}
+        chips={[
+          { children: 'One' },
+          { children: 'Two' },
+          { children: 'Three' }
+        ]}
         maxChipsVisible={2}
       />
     );
@@ -42,7 +46,11 @@ describe('Input data-slot contract', () => {
   it('renders one chip slot per visible chip', () => {
     const { container } = render(
       <Input
-        chips={[{ label: 'One' }, { label: 'Two' }, { label: 'Three' }]}
+        chips={[
+          { children: 'One' },
+          { children: 'Two' },
+          { children: 'Three' }
+        ]}
         maxChipsVisible={2}
       />
     );
diff --git a/packages/react/components/input/__tests__/input.test.tsx b/packages/react/components/input/__tests__/input.test.tsx
index 5b6d46d41..b931c8b01 100644
--- a/packages/react/components/input/__tests__/input.test.tsx
+++ b/packages/react/components/input/__tests__/input.test.tsx
@@ -1,5 +1,6 @@
 import { fireEvent, render, screen } from '@testing-library/react';
 import { describe, expect, it, vi } from 'vitest';
+import { Chip } from '../../chip';
 import { Input } from '../input';
 import styles from '../input.module.css';
 
@@ -85,6 +86,13 @@ describe('Input', () => {
       );
       expect(iconContainer).toBeInTheDocument();
     });
+
+    it('keeps a button in the trailing icon accessible', () => {
+      render(<Input trailingIcon={<button type='button'>Reveal</button>} />);
+      expect(
+        screen.getByRole('button', { name: 'Reveal' })
+      ).toBeInTheDocument();
+    });
   });
 
   describe('Prefix and Suffix', () => {
@@ -106,19 +114,43 @@ describe('Input', () => {
   });
 
   describe('Chips', () => {
-    it('renders chips', () => {
-      const chips = [{ label: 'Tag1' }, { label: 'Tag2' }];
-      render(<Input chips={chips} />);
+    it('renders chips from props', () => {
+      const chips = [{ children: 'Tag1' }, { children: 'Tag2' }];
+      const { container } = render(<Input chips={chips} />);
       expect(screen.getByText('Tag1')).toBeInTheDocument();
       expect(screen.getByText('Tag2')).toBeInTheDocument();
+      expect(container.querySelectorAll(`.${styles.chip}`)).toHaveLength(2);
+    });
+
+    it('passes chip props to each chip', () => {
+      const chips = [
+        { children: 'Tag1', render: <div data-testid='custom' /> }
+      ];
+      render(<Input chips={chips} />);
+      const chip = screen.getByTestId('custom');
+      expect(chip).toHaveAttribute('data-slot', 'input-chip');
+      expect(chip).toHaveTextContent('Tag1');
+    });
+
+    it('renders chip elements as given', () => {
+      const handleRemove = vi.fn();
+      const chips = [
+        <Chip key='tag1'>
+          Tag1
+          <Chip.Remove onClick={handleRemove} />
+        </Chip>
+      ];
+      render(<Input chips={chips} />);
+      fireEvent.click(screen.getByRole('button', { name: 'Remove Tag1' }));
+      expect(handleRemove).toHaveBeenCalledTimes(1);
     });
 
     it('limits visible chips to maxChipsVisible', () => {
       const chips = [
-        { label: 'Tag1' },
-        { label: 'Tag2' },
-        { label: 'Tag3' },
-        { label: 'Tag4' }
+        { children: 'Tag1' },
+        { children: 'Tag2' },
+        { children: 'Tag3' },
+        { children: 'Tag4' }
       ];
       render(<Input chips={chips} maxChipsVisible={2} />);
       expect(screen.getByText('Tag1')).toBeInTheDocument();
@@ -128,49 +160,24 @@ describe('Input', () => {
       expect(screen.getByText('+2')).toBeInTheDocument();
     });
 
-    it('renders dismissible chips with onRemove', () => {
-      const handleRemove = vi.fn();
-      const chips = [{ label: 'Tag1', onRemove: handleRemove }];
-      const { container } = render(<Input chips={chips} />);
-      const chip = container.querySelector(`.${styles.chip}`);
-      expect(chip).toBeInTheDocument();
-    });
-
     it('shows overflow count correctly', () => {
       const chips = Array.from({ length: 5 }, (_, i) => ({
-        label: `Tag${i + 1}`
+        children: `Tag${i + 1}`
       }));
       render(<Input chips={chips} maxChipsVisible={3} />);
       expect(screen.getByText('+2')).toBeInTheDocument();
     });
 
-    it('does not render dismiss button on chips when disabled', () => {
-      const handleRemove = vi.fn();
-      const chips = [{ label: 'Tag1', onRemove: handleRemove }];
-      render(<Input chips={chips} disabled />);
-      const dismissButton = screen.queryByRole('button', {
-        name: 'Remove Tag1'
-      });
-      expect(dismissButton).not.toBeInTheDocument();
-    });
-
-    it('chips are non-interactive when disabled', () => {
-      const handleRemove = vi.fn();
-      const chips = [{ label: 'Tag1', onRemove: handleRemove }];
+    it('disables chips from props when disabled', () => {
+      const chips = [
+        { children: ['Tag1', <Chip.Remove key='remove' onClick={vi.fn()} />] }
+      ];
       const { container } = render(<Input chips={chips} disabled />);
       const chip = container.querySelector(`.${styles.chip}`);
       expect(chip).toHaveAttribute('data-disabled');
-    });
-
-    it('chips remain interactive when not disabled', () => {
-      const handleRemove = vi.fn();
-      const chips = [{ label: 'Tag1', onRemove: handleRemove }];
-      render(<Input chips={chips} />);
-      const dismissButton = screen.getByRole('button', {
-        name: 'Remove Tag1'
-      });
-      fireEvent.click(dismissButton);
-      expect(handleRemove).toHaveBeenCalledTimes(1);
+      expect(
+        screen.getByRole('button', { name: 'Remove Tag1' })
+      ).toBeDisabled();
     });
   });
 
diff --git a/packages/react/components/input/input.tsx b/packages/react/components/input/input.tsx
index 2199c9597..fb2e6cae6 100644
--- a/packages/react/components/input/input.tsx
+++ b/packages/react/components/input/input.tsx
@@ -1,8 +1,14 @@
 import { Input as InputPrimitive } from '@base-ui/react/input';
 import { cva, cx, type VariantProps } from 'class-variance-authority';
-import { ReactNode, RefObject } from 'react';
+import {
+  Fragment,
+  isValidElement,
+  ReactElement,
+  ReactNode,
+  RefObject
+} from 'react';
 import { radiusVariants } from '../../shared/radius';
-import { Chip } from '../chip';
+import { Chip, type ChipProps } from '../chip';
 import { useFieldContext } from '../field';
 import styles from './input.module.css';
 
@@ -32,7 +38,8 @@ export interface InputProps
   trailingIcon?: ReactNode;
   prefix?: string;
   suffix?: string;
-  chips?: Array<{ label: string; onRemove?: () => void }>;
+  /** Chips shown before the text. Elements render as given; props render a `Chip`. */
+  chips?: Array<ReactElement | ChipProps>;
   maxChipsVisible?: number;
   variant?: 'default' | 'borderless';
   containerRef?: RefObject<HTMLDivElement | null>;
@@ -91,19 +98,22 @@ export function Input({
         className={styles['chip-input-container']}
         data-slot='input-chip-container'
       >
-        {chips?.slice(0, maxChipsVisible).map((chip, index) => (
-          <Chip
-            key={index}
-            variant='outline'
-            isDismissible={!disabled && !!chip.onRemove}
-            onDismiss={disabled ? undefined : chip.onRemove}
-            className={styles.chip}
-            disabled={disabled}
-            data-slot='input-chip'
-          >
-            {chip.label}
-          </Chip>
-        ))}
+        {chips
+          ?.slice(0, maxChipsVisible)
+          .map((chip, index) =>
+            isValidElement(chip) ? (
+              <Fragment key={chip.key ?? index}>{chip}</Fragment>
+            ) : (
+              <Chip
+                key={index}
+                variant='outline'
+                data-slot='input-chip'
+                {...chip}
+                className={cx(styles.chip, chip.className)}
+                disabled={disabled || chip.disabled}
+              />
+            )
+          )}
         {chips && chips.length > maxChipsVisible && (
           <span
             className={styles['chip-overflow']}
@@ -137,7 +147,6 @@ export function Input({
       {trailingIcon && (
         <div
           className={styles['trailing-icon']}
-          aria-hidden='true'
           data-slot='input-trailing-icon'
         >
           {trailingIcon}
diff --git a/packages/react/components/search/__tests__/search.test.tsx b/packages/react/components/search/__tests__/search.test.tsx
index beb941d91..4fe2a3b03 100644
--- a/packages/react/components/search/__tests__/search.test.tsx
+++ b/packages/react/components/search/__tests__/search.test.tsx
@@ -97,7 +97,9 @@ describe('Search', () => {
 
     it('shows clear button when showClearButton and value exist', () => {
       render(<Search showClearButton value='test' />);
-      expect(screen.getByLabelText('Clear search')).toBeInTheDocument();
+      expect(
+        screen.getByRole('button', { name: 'Clear search' })
+      ).toBeInTheDocument();
     });
 
     it('renders clear button regardless of value (CSS hides it when empty)', () => {
diff --git a/packages/react/figma/chip.figma.ts b/packages/react/figma/chip.figma.ts
index 89b2561be..0accb16dc 100644
--- a/packages/react/figma/chip.figma.ts
+++ b/packages/react/figma/chip.figma.ts
@@ -14,7 +14,7 @@ const color = figma.selectedInstance.getEnum('Style', {
   Accent: 'accent'
 });
 // State (Default/Hover/Active) is visual-only, with no code counterpart, so it is intentionally unmapped.
-// children, dismiss and the leading/trailing icons live on the nested
+// children, the remove button and the leading/trailing icons live on the nested
 // ".chip_structure" instance (guarded, since findInstance returns an ErrorHandle
 // when absent).
 const structure = (function () {
@@ -22,7 +22,7 @@ const structure = (function () {
   if (!nested || nested.type !== 'INSTANCE') {
     return {
       children: undefined,
-      isDismissible: undefined,
+      remove: '',
       leadingIcon: undefined,
       trailingIcon: undefined
     };
@@ -44,7 +44,11 @@ const structure = (function () {
       })(),
       false: undefined
     }),
-    isDismissible: nested.getBoolean('Dismiss'),
+    remove: nested.getBoolean('Dismiss', {
+      true: `
+      <Chip.Remove />`,
+      false: ''
+    }),
     // `leadingIcon` is driven by either the "Avatar" or the "Leading icon"
     // BOOLEAN. Avatar takes precedence and renders the connected <Avatar />.
     leadingIcon: nested.getBoolean('Avatar', {
@@ -76,11 +80,8 @@ export default {
   )}${figma.helpers.react.renderProp(
     'leadingIcon',
     structure.leadingIcon
-  )}${figma.helpers.react.renderProp(
-    'trailingIcon',
-    structure.trailingIcon
-  )}${figma.helpers.react.renderProp('isDismissible', structure.isDismissible)}>
-      ${figma.helpers.react.renderChildren(structure.children)}
+  )}${figma.helpers.react.renderProp('trailingIcon', structure.trailingIcon)}>
+      ${figma.helpers.react.renderChildren(structure.children)}${structure.remove}
     </Chip>`,
   metadata: { nestable: true }
 };
diff --git a/packages/react/index.tsx b/packages/react/index.tsx
index 1a8de4e21..04b0e1e30 100644
--- a/packages/react/index.tsx
+++ b/packages/react/index.tsx
@@ -117,7 +117,11 @@ export {
   type CheckboxGroupProps,
   type CheckboxProps
 } from './components/checkbox';
-export { Chip, type ChipProps } from './components/chip';
+export {
+  Chip,
+  type ChipProps,
+  type ChipRemoveProps
+} from './components/chip';
 export {
   CodeBlock,
   type CodeBlockCodeProps,
@@ -130,10 +134,13 @@ export { Collapsible } from './components/collapsible';
 export * from './components/color-picker';
 export {
   Combobox,
+  type ComboboxClearProps,
   type ComboboxContentProps,
   type ComboboxInputProps,
   type ComboboxItemProps,
-  type ComboboxProps
+  type ComboboxLabelProps,
+  type ComboboxProps,
+  type ComboboxStatusProps
 } from './components/combobox';
 export {
   Command,