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

# ComboboxViewport

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

> The scrollable region inside [ComboboxList.root](/v3/reference/theming/keys/ComboboxList.md#theme-key-ComboboxList-root) that wraps the result groups. Caps at 300px tall before the viewport begins to scroll; `scroll-py-1` keeps a hairline of breathing room above the first and below the last visible row so a focused item never crashes into the viewport edge.

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

| Slot | Default classes | Description |
| --- | --- | --- |
| [root](/v3/reference/theming/keys/ComboboxViewport.md#theme-key-ComboboxViewport-root) | `max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto` | The scrollable region inside [ComboboxList.root](/v3/reference/theming/keys/ComboboxList.md#theme-key-ComboboxList-root) that wraps the result groups. Caps at 300px tall before the viewport begins to scroll; `scroll-py-1` keeps a hairline of breathing room above the first and below the last visible row so a focused item never crashes into the viewport edge. |

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

## root

> The scrollable region inside [ComboboxList.root](/v3/reference/theming/keys/ComboboxList.md#theme-key-ComboboxList-root) that wraps the result groups. Caps at 300px tall before the viewport begins to scroll; `scroll-py-1` keeps a hairline of breathing room above the first and below the last visible row so a focused item never crashes into the viewport edge.

Default classes:

`max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto`

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