---
url: "https://vueda.dev/v3/reference/theming/keys/ComboboxSeparator.md"
title: "ComboboxSeparator"
---

# ComboboxSeparator

Source: `client/lib/theme/vueda-tailwind/controls/index.js`

> A 1px horizontal divider between groups inside [ComboboxList.root](/v3/reference/theming/keys/ComboboxList.md#theme-key-ComboboxList-root). Renders as a flat `--border` hairline rather than the DPR-aware `hairline` utility because the separator sits inside a popover that already paints its own border at the same width, so the visual seam never reads as a doubled line. `-mx-1` extends the divider to the popover edge past the group's 4px inner padding.

Vue component: [ComboboxSeparator](/v3/reference/api/vue/ComboboxSeparator.md)

| Slot | Default classes | Description |
| --- | --- | --- |
| [root](/v3/reference/theming/keys/ComboboxSeparator.md#theme-key-ComboboxSeparator-root) | `bg-border -mx-1 h-hairline` | A 1px horizontal divider between groups inside [ComboboxList.root](/v3/reference/theming/keys/ComboboxList.md#theme-key-ComboboxList-root). Renders as a flat `--border` hairline rather than the DPR-aware `hairline` utility because the separator sits inside a popover that already paints its own border at the same width, so the visual seam never reads as a doubled line. `-mx-1` extends the divider to the popover edge past the group's 4px inner padding. |

<a id="theme-key-ComboboxSeparator-root"></a>

## root

> A 1px horizontal divider between groups inside [ComboboxList.root](/v3/reference/theming/keys/ComboboxList.md#theme-key-ComboboxList-root). Renders as a flat `--border` hairline rather than the DPR-aware `hairline` utility because the separator sits inside a popover that already paints its own border at the same width, so the visual seam never reads as a doubled line. `-mx-1` extends the divider to the popover edge past the group's 4px inner padding.

Default classes:

`bg-border -mx-1 h-hairline`

Source: `client/lib/theme/vueda-tailwind/controls/ComboboxSeparator.theme.js:16`