# Combobox Documentation Enables users to pick from a list of options displayed in a dropdown. This is a documentation section that potentially contains examples, demos, and other useful information related to a specific part of Bits UI. When helping users with this documentation, you can ignore the classnames applied to the demos unless they are relevant to the user's issue. Copy Page ```svelte { if (!o) searchValue = ""; }} >

(searchValue = e.currentTarget.value)} class="h-input rounded-9px border-border-input bg-background placeholder:text-foreground-alt/50 focus:ring-foreground focus:ring-offset-background focus:outline-hidden inline-flex w-[296px] touch-none truncate border px-11 text-base transition-colors focus:ring-2 focus:ring-offset-2 sm:text-sm" placeholder="Search a fruit" aria-label="Search a fruit" />

``` ## Overview The Combobox component combines the functionality of an input field with a dropdown list of selectable options. It provides users with the ability to search, filter, and select from a predefined set of choices. ## Key Features - **Keyboard Navigation**: Full support for keyboard interactions, allowing users to navigate and select options without using a mouse. - **Customizable Rendering**: Flexible architecture for rendering options, including support for grouped items. - **Accessibility**: Built with ARIA attributes and keyboard interactions to ensure screen reader compatibility and accessibility standards. - **Portal Support**: Ability to render the dropdown content in a portal, preventing layout issues in complex UI structures. ## Architecture The Combobox component is composed of several sub-components, each with a specific role: - **Root**: The main container component that manages the state and context for the combobox. - **Input**: The input field that allows users to enter search queries. - **Trigger**: The button or element that opens the dropdown list. - **Portal**: Responsible for portalling the dropdown content to the body or a custom target. - **Group**: A container for grouped items, used to group related items. - **GroupHeading**: A heading for a group of items, providing a descriptive label for the group. - **Item**: An individual item within the list. - **Content**: The dropdown container that displays the items. It uses [Floating UI](https://floating-ui.com/) to position the content relative to the trigger. - **ContentStatic**: An alternative to the Content component, that enables you to opt-out of Floating UI and position the content yourself. - **Viewport**: The visible area of the dropdown content, used to determine the size and scroll behavior. - **ScrollUpButton**: A button that scrolls the content up when the content is larger than the viewport. - **ScrollDownButton**: A button that scrolls the content down when the content is larger than the viewport. - **Arrow**: An arrow element that points to the trigger when using the `Combobox.Content` component. ## Structure Here's an overview of how the Combobox component is structured in code: ```svelte ``` ## Reusable Components It's recommended to use the `Combobox` primitives to build your own custom combobox component that can be reused throughout your application. CustomCombobox.svelte ```svelte Open {#each filteredItems as item, i (i + item.value)} {#snippet children({ selected })} {item.label} {selected ? "✅" : ""} {/snippet} {:else} No results found {/each} ``` +page.svelte ```svelte ``` ## Managing Value State This section covers how to manage the `value` state of the Combobox. ### Two-Way Binding Use `bind:value` for simple, automatic state synchronization: ```svelte ``` ### Fully Controlled Use a [Function Binding](https://svelte.dev/docs/svelte/bind#Function-bindings) for complete control over the state's reads and writes. ```svelte ``` ## Managing Open State This section covers how to manage the `open` state of the Combobox. ### Two-Way Binding Use `bind:open` for simple, automatic state synchronization: ```svelte ``` ### Fully Controlled Use a [Function Binding](https://svelte.dev/docs/svelte/bind#Function-bindings) for complete control over the state's reads and writes. ```svelte ``` ## Opt-out of Floating UI When you use the `Combobox.Content` component, Bits UI uses [Floating UI](https://floating-ui.com/) to position the content relative to the trigger, similar to other popover-like components. You can opt-out of this behavior by instead using the `Combobox.ContentStatic` component. ```svelte ``` When using this component, you'll need to handle the positioning of the content yourself. Keep in mind that using `Combobox.Portal` alongside `Combobox.ContentStatic` may result in some unexpected positioning behavior, feel free to not use the portal or work around it. ## Custom Anchor By default, the `Combobox.Content` is anchored to the `Combobox.Input` component, which determines where the content is positioned. If you wish to instead anchor the content to a different element, you can pass either a selector string or an `HTMLElement` to the `customAnchor` prop of the `Combobox.Content` component. ```svelte

``` ## What is the Viewport? The `Combobox.Viewport` component is used to determine the size of the content in order to determine whether or not the scroll up and down buttons should be rendered. If you wish to set a minimum/maximum height for the select content, you should apply it to the `Combobox.Viewport` component. ## Scroll Up/Down Buttons The `Combobox.ScrollUpButton` and `Combobox.ScrollDownButton` components are used to render the scroll up and down buttons when the select content is larger than the viewport. You must use the `Combobox.Viewport` component when using the scroll buttons. ### Custom Scroll Delay The initial and subsequent scroll delays can be controlled using the `delay` prop on the buttons. For example, we can use the [`cubicOut`](https://svelte.dev/docs/svelte/svelte-easing#cubicOut) easing function from Svelte to create a smooth scrolling effect that speeds up over time. Expand Code ```svelte { if (!o) searchValue = ""; }} >

(searchValue = e.currentTarget.value)} class="h-input rounded-9px border-border-input bg-background placeholder:text-foreground-alt/50 focus:ring-foreground focus:ring-offset-background focus:outline-hidden inline-flex w-[296px] truncate border px-11 text-base transition-colors focus:ring-2 focus:ring-offset-2 sm:text-sm" placeholder="Search a fruit" aria-label="Search a fruit" />

``` ## Native Scrolling/Overflow If you don't want to use the [scroll buttons](#scroll-updown-buttons) and prefer to use the standard scrollbar/overflow behavior, you can omit the `Combobox.Scroll[Up|Down]Button` components and the `Combobox.Viewport` component. You'll need to set a height on the `Combobox.Content` component and appropriate `overflow` styles to enable scrolling. ## Scroll Lock To prevent the user from scrolling outside of the `Combobox.Content` component when open, you can set the `preventScroll` prop to `true`. ```svelte ``` ## Highlighted Items The Combobox component follows the [WAI-ARIA descendant pattern](https://www.w3.org/TR/wai-aria-practices-1.2/#combobox) for highlighting items. This means that the `Combobox.Input` retains focus the entire time, even when navigating with the keyboard, and items are highlighted as the user navigates them. ### Styling Highlighted Items You can use the `data-highlighted` attribute on the `Combobox.Item` component to style the item differently when it is highlighted. ### onHighlight / onUnhighlight To trigger side effects when an item is highlighted or unhighlighted, you can use the `onHighlight` and `onUnhighlight` props. ```svelte console.log('I am highlighted!')} onUnhighlight={() => console.log('I am unhighlighted!')} /> ``` ## Svelte Transitions You can use the `forceMount` prop along with the `child` snippet to forcefully mount the `Combobox.Content` component to use Svelte Transitions or another animation library that requires more control. ```svelte {#snippet child({ wrapperProps, props, open })} {#if open}

{/if} {/snippet} ``` Of course, this isn't the prettiest syntax, so it's recommended to create your own reusable content component that handles this logic if you intend to use this approach. For more information on using transitions with Bits UI components, see the [Transitions](/docs/transitions) documentation. Expand Code ```svelte { if (!o) searchValue = ""; }} >

(searchValue = e.currentTarget.value)} class="h-input rounded-9px border-border-input bg-background placeholder:text-foreground-alt/50 focus:ring-foreground focus:ring-offset-background focus:outline-hidden inline-flex w-[296px] truncate border px-11 text-base transition-colors focus:ring-2 focus:ring-offset-2 sm:text-sm" placeholder="Search a fruit" aria-label="Search a fruit" />

``` ## API Reference ### Combobox.Root The root combobox component which manages & scopes the state of the combobox. | Property | Type | Description | Details | | ---------------------- | ----------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------- | | `type` required | `enum` - 'single' \| 'multiple' | The type of combobox.`Default: —— undefined` | | | `value` $bindable | `union` - string \| string\[] | The value of the combobox. When the type is `'single'`, this should be a string. When the type is `'multiple'`, this should be an array of strings.`Default: —— undefined` | | | `onValueChange` | `function` - (string) => void \| (string\[]) => void | A callback that is fired when the combobox value changes. When the type is `'single'`, the argument will be a string. When the type is `'multiple'`, the argument will be an array of strings.`Default: —— undefined` | | | `open` $bindable | `boolean` | The open state of the combobox menu.`Default: false` | | | `onOpenChange` | `function` - (open: boolean) => void | A callback function called when the open state changes.`Default: —— undefined` | | | `onOpenChangeComplete` | `function` - (open: boolean) => void | A callback function called after the open state changes and all animations have completed.`Default: —— undefined` | | | `disabled` | `boolean` | Whether or not the combobox component is disabled.`Default: false` | | | `name` | `string` | The name to apply to the hidden input element for form submission. If provided, a hidden input element will be rendered to submit the value of the combobox.`Default: —— undefined` | | | `required` | `boolean` | Whether or not the combobox menu is required.`Default: false` | | | `scrollAlignment` | `enum` - 'nearest' \| 'center' | The alignment of the highlighted item when scrolling.`Default: ''nearest''` | | | `loop` | `boolean` | Whether or not the combobox menu should loop through items.`Default: false` | | | `allowDeselect` | `boolean` | Whether or not the user can deselect the selected item by pressing it in a single select.`Default: true` | | | `items` | `Item[]` - { value: string; label: string; disabled?: boolean}\[] | Optionally provide an array of objects representing the items in the select for autofill capabilities. Only applicable to combobox's with type `single``Default: —— undefined` | | | `inputValue` | `string` | A read-only value that controls the text displayed in the combobox input. Use this to programmatically update the input value when the selection changes outside the component, ensuring the displayed text stays in sync with the actual value.`Default: —— undefined` | | | `children` | `Snippet` | The children content to render.`Default: —— undefined` | | ### Combobox.Trigger A button which toggles the combobox's open state. | Property | Type | Description | Details | | --------------- | --------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------- | ------- | | `ref` $bindable | `HTMLButtonElement` | The underlying DOM element being rendered. You can bind to this to get a reference to the element.`Default: null` | | | `children` | `Snippet` | The children content to render.`Default: —— undefined` | | | `child` | `Snippet` - type SnippetProps = { props: Record\; }; | Use render delegation to render your own element. See [Child Snippet](/docs/child-snippet) docs for more information.`Default: —— undefined` | | | Data Attribute | Value | Description | Details | | ----------------------- | --------------------------- | -------------------------------------- | ------- | | `data-state` | `enum` - 'open' \| 'closed' | The combobox's open state. | | | `data-disabled` | `''` | Present when the combobox is disabled. | | | `data-combobox-trigger` | `''` | Present on the trigger element. | | ### Combobox.Viewport An optional element to track the scroll position of the combobox for rendering the scroll up/down buttons. | Property | Type | Description | Details | | --------------- | --------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------- | ------- | | `ref` $bindable | `HTMLDivElement` | The underlying DOM element being rendered. You can bind to this to get a reference to the element.`Default: null` | | | `children` | `Snippet` | The children content to render.`Default: —— undefined` | | | `child` | `Snippet` - type SnippetProps = { props: Record\; }; | Use render delegation to render your own element. See [Child Snippet](/docs/child-snippet) docs for more information.`Default: —— undefined` | | | Data Attribute | Value | Description | Details | | ------------------------ | ----- | -------------------------------- | ------- | | `data-combobox-viewport` | `''` | Present on the viewport element. | | ### Combobox.Content The element which contains the combobox's items. | Property | Type | Description | Details | | ------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------- | | `side` | `enum` - 'top' \| 'bottom' \| 'left' \| 'right' | The preferred side of the anchor to render the floating element against when open. Will be reversed when collisions occur.`Default: 'bottom'` | | | `sideOffset` | `number` | The distance in pixels from the anchor to the floating element.`Default: 0` | | | `align` | `enum` - 'start' \| 'center' \| 'end' | The preferred alignment of the anchor to render the floating element against when open. This may change when collisions occur.`Default: 'start'` | | | `alignOffset` | `number` | The distance in pixels from the anchor to the floating element.`Default: 0` | | | `arrowPadding` | `number` | The amount in pixels of virtual padding around the viewport edges to check for overflow which will cause a collision.`Default: 0` | | | `avoidCollisions` | `boolean` | When `true`, overrides the `side` and `align` options to prevent collisions with the boundary edges.`Default: true` | | | `collisionBoundary` | `union` - Element \| null | A boundary element or array of elements to check for collisions against.`Default: —— undefined` | | | `collisionPadding` | `union` - number \| Partial\> | The amount in pixels of virtual padding around the viewport edges to check for overflow which will cause a collision.`Default: 0` | | | `sticky` | `enum` - 'partial' \| 'always' | The sticky behavior on the align axis. `'partial'` will keep the content in the boundary as long as the trigger is at least partially in the boundary whilst `'always'` will keep the content in the boundary regardless.`Default: 'partial'` | | | `hideWhenDetached` | `boolean` | When `true`, hides the content when it is detached from the DOM. This is useful for when you want to hide the content when the user scrolls away.`Default: true` | | | `updatePositionStrategy` | `enum` - 'optimized' \| 'always' | The strategy to use when updating the position of the content. When `'optimized'` the content will only be repositioned when the trigger is in the viewport. When `'always'` the content will be repositioned whenever the position changes.`Default: 'optimized'` | | | `strategy` | `enum` - 'fixed' \| 'absolute' | The positioning strategy to use for the floating element. When `'fixed'` the element will be positioned relative to the viewport. When `'absolute'` the element will be positioned relative to the nearest positioned ancestor.`Default: 'fixed'` | | | `preventScroll` | `boolean` | When `true`, prevents the body from scrolling when the content is open. This is useful when you want to use the content as a modal.`Default: false` | | | `customAnchor` | `union` - string \| HTMLElement \| Measurable \| null | Use an element other than the trigger to anchor the content to. If provided, the content will be anchored to the provided element instead of the trigger.`Default: null` | | | `onEscapeKeydown` | `function` - (event: KeyboardEvent) => void | Callback fired when an escape keydown event occurs in the floating content. You can call `event.preventDefault()` to prevent the default behavior of handling the escape keydown event.`Default: —— undefined` | | | `escapeKeydownBehavior` | `enum` - 'close' \| 'ignore' \| 'defer-otherwise-close' \| 'defer-otherwise-ignore' | The behavior to use when an escape keydown event occurs in the floating content. `'close'` will close the content immediately. `'ignore'` will prevent the content from closing. `'defer-otherwise-close'` will defer to the parent element if it exists, otherwise it will close the content. `'defer-otherwise-ignore'` will defer to the parent element if it exists, otherwise it will ignore the interaction.`Default: 'close'` | | | `onInteractOutside` | `function` - (event: PointerEvent) => void | Callback fired when an outside interaction event occurs, which is a `pointerdown` event. You can call `event.preventDefault()` to prevent the default behavior of handling the outside interaction.`Default: —— undefined` | | | `onFocusOutside` | `function` - (event: FocusEvent) => void | Callback fired when focus leaves the dismissible layer. You can call `event.preventDefault()` to prevent the default behavior on focus leaving the layer.`Default: —— undefined` | | | `interactOutsideBehavior` | `enum` - 'close' \| 'ignore' \| 'defer-otherwise-close' \| 'defer-otherwise-ignore' | The behavior to use when an interaction occurs outside of the floating content. `'close'` will close the content immediately. `'ignore'` will prevent the content from closing. `'defer-otherwise-close'` will defer to the parent element if it exists, otherwise it will close the content. `'defer-otherwise-ignore'` will defer to the parent element if it exists, otherwise it will ignore the interaction.`Default: 'close'` | | | `preventOverflowTextSelection` | `boolean` | When `true`, prevents the text selection from overflowing the bounds of the element.`Default: true` | | | `dir` | `enum` - 'ltr' \| 'rtl' | The reading direction of the app.`Default: 'ltr'` | | | `loop` | `boolean` | Whether or not the combobox should loop through items when reaching the end.`Default: false` | | | `forceMount` | `boolean` | Whether or not to forcefully mount the content. This is useful if you want to use Svelte transitions or another animation library for the content.`Default: false` | | | `ref` $bindable | `HTMLDivElement` | The underlying DOM element being rendered. You can bind to this to get a reference to the element.`Default: null` | | | `children` | `Snippet` | The children content to render.`Default: —— undefined` | | | `child` | `Snippet` - type ChildSnippetProps = { /\*\* \* Props for the positioning wrapper \* Do not style this element - \* styling should be applied to the content element \*/ wrapperProps: Record\; /\*\* \* Props for your content element \* Apply your custom styles here \*/ props: Record\; /\*\* \* Content visibility state \* Use this for conditional rendering with \* Svelte transitions \*/ open: boolean; }; | Use render delegation to render your own element. See [Child Snippet](/docs/child-snippet) docs for more information.`Default: —— undefined` | | | Data Attribute | Value | Description | Details | | ----------------------- | --------------------------- | ------------------------------- | ------- | | `data-state` | `enum` - 'open' \| 'closed' | The combobox's open state. | | | `data-combobox-content` | `''` | Present on the content element. | | | CSS Variable | Description | Details | | ------------------------------------------ | -------------------------------------------- | ------- | | `--bits-combobox-content-transform-origin` | The transform origin of the content element. | | | `--bits-combobox-content-available-width` | The available width of the content element. | | | `--bits-combobox-content-available-height` | The available height of the content element. | | | `--bits-combobox-anchor-width` | The width of the anchor element. | | | `--bits-combobox-anchor-height` | The height of the anchor element. | | ### Combobox.ContentStatic The element which contains the combobox's items. (Static/No Floating UI) | Property | Type | Description | Details | | ------------------------------ | ----------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------- | | `onEscapeKeydown` | `function` - (event: KeyboardEvent) => void | Callback fired when an escape keydown event occurs in the floating content. You can call `event.preventDefault()` to prevent the default behavior of handling the escape keydown event.`Default: —— undefined` | | | `escapeKeydownBehavior` | `enum` - 'close' \| 'ignore' \| 'defer-otherwise-close' \| 'defer-otherwise-ignore' | The behavior to use when an escape keydown event occurs in the floating content. `'close'` will close the content immediately. `'ignore'` will prevent the content from closing. `'defer-otherwise-close'` will defer to the parent element if it exists, otherwise it will close the content. `'defer-otherwise-ignore'` will defer to the parent element if it exists, otherwise it will ignore the interaction.`Default: 'close'` | | | `onInteractOutside` | `function` - (event: PointerEvent) => void | Callback fired when an outside interaction event occurs, which is a `pointerdown` event. You can call `event.preventDefault()` to prevent the default behavior of handling the outside interaction.`Default: —— undefined` | | | `onFocusOutside` | `function` - (event: FocusEvent) => void | Callback fired when focus leaves the dismissible layer. You can call `event.preventDefault()` to prevent the default behavior on focus leaving the layer.`Default: —— undefined` | | | `interactOutsideBehavior` | `enum` - 'close' \| 'ignore' \| 'defer-otherwise-close' \| 'defer-otherwise-ignore' | The behavior to use when an interaction occurs outside of the floating content. `'close'` will close the content immediately. `'ignore'` will prevent the content from closing. `'defer-otherwise-close'` will defer to the parent element if it exists, otherwise it will close the content. `'defer-otherwise-ignore'` will defer to the parent element if it exists, otherwise it will ignore the interaction.`Default: 'close'` | | | `onOpenAutoFocus` | `function` - (event: Event) => void | Event handler called when auto-focusing the content as it is opened. Can be prevented.`Default: —— undefined` | | | `onCloseAutoFocus` | `function` - (event: Event) => void | Event handler called when auto-focusing the content as it is closed. Can be prevented.`Default: —— undefined` | | | `trapFocus` | `boolean` | Whether or not to trap the focus within the content when open.`Default: true` | | | `preventScroll` | `boolean` | When `true`, prevents the body from scrolling when the content is open. This is useful when you want to use the content as a modal.`Default: true` | | | `preventOverflowTextSelection` | `boolean` | When `true`, prevents the text selection from overflowing the bounds of the element.`Default: true` | | | `dir` | `enum` - 'ltr' \| 'rtl' | The reading direction of the app.`Default: 'ltr'` | | | `loop` | `boolean` | Whether or not the combobox should loop through items when reaching the end.`Default: false` | | | `forceMount` | `boolean` | Whether or not to forcefully mount the content. This is useful if you want to use Svelte transitions or another animation library for the content.`Default: false` | | | `ref` $bindable | `HTMLDivElement` | The underlying DOM element being rendered. You can bind to this to get a reference to the element.`Default: null` | | | `children` | `Snippet` | The children content to render.`Default: —— undefined` | | | `child` | `Snippet` - type ChildSnippetProps = { open: boolean; props: Record\; }; | Use render delegation to render your own element. See [Child Snippet](/docs/child-snippet) docs for more information.`Default: —— undefined` | | | Data Attribute | Value | Description | Details | | ----------------------- | --------------------------- | ------------------------------- | ------- | | `data-state` | `enum` - 'open' \| 'closed' | The combobox's open state. | | | `data-combobox-content` | `''` | Present on the content element. | | ### Combobox.Portal When used, will render the combobox content into the body or custom `to` element when open | Property | Type | Description | Details | | ---------- | --------------------------- | -------------------------------------------------------------------------------------------------------------------------------- | ------- | | `to` | `union` - Element \| string | Where to render the content when it is open. Defaults to the body.`Default: document.body` | | | `disabled` | `boolean` | Whether the portal is disabled or not. When disabled, the content will be rendered in its original DOM location.`Default: false` | | | `children` | `Snippet` | The children content to render.`Default: —— undefined` | | ### Combobox.Item A combobox item, which must be a child of the `Combobox.Content` component. | Property | Type | Description | Details | | ---------------- | --------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------- | ------- | | `value` required | `string` | The value of the item.`Default: —— undefined` | | | `label` | `string` | The label of the item, which is what the list will be filtered by.`Default: —— undefined` | | | `disabled` | `boolean` | Whether or not the combobox item is disabled. This will prevent interaction/selection.`Default: false` | | | `onHighlight` | `function` - () => void | A callback that is fired when the item is highlighted.`Default: —— undefined` | | | `onUnhighlight` | `function` - () => void | A callback that is fired when the item is unhighlighted.`Default: —— undefined` | | | `ref` $bindable | `HTMLDivElement` | The underlying DOM element being rendered. You can bind to this to get a reference to the element.`Default: null` | | | `children` | `Snippet` | The children content to render.`Default: —— undefined` | | | `child` | `Snippet` - type SnippetProps = { props: Record\; }; | Use render delegation to render your own element. See [Child Snippet](/docs/child-snippet) docs for more information.`Default: —— undefined` | | | Data Attribute | Value | Description | Details | | -------------------- | -------- | --------------------------------------------------------------------------------------------------- | ------- | | `data-value` | `string` | The value of the combobox item. | | | `data-label` | `string` | The label of the combobox item. | | | `data-disabled` | `''` | Present when the item is disabled. | | | `data-highlighted` | `''` | Present when the item is highlighted, which is either via keyboard navigation of the menu or hover. | | | `data-selected` | `''` | Present when the item is selected. | | | `data-combobox-item` | `''` | Present on the item element. | | ### Combobox.Input A representation of the combobox input element, which is typically displayed in the content. | Property | Type | Description | Details | | ----------------- | --------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- | | `defaultValue` | `string` | The default value of the input. This is not a reactive prop and is only used to populate the input when the combobox is first mounted if there is already a value set.`Default: —— undefined` | | | `clearOnDeselect` | `boolean` | Whether to clear the input when the last item is deselected.`Default: false` | | | `ref` $bindable | `HTMLInputElement` | The underlying DOM element being rendered. You can bind to this to get a reference to the element.`Default: null` | | | `children` | `Snippet` | The children content to render.`Default: —— undefined` | | | `child` | `Snippet` - type SnippetProps = { props: Record\; }; | Use render delegation to render your own element. See [Child Snippet](/docs/child-snippet) docs for more information.`Default: —— undefined` | | | Data Attribute | Value | Description | Details | | --------------------- | --------------------------- | -------------------------------------- | ------- | | `data-state` | `enum` - 'open' \| 'closed' | The combobox's open state. | | | `data-disabled` | `''` | Present when the combobox is disabled. | | | `data-combobox-input` | `''` | Present on the input element. | | ### Combobox.Group A group of related combobox items. | Property | Type | Description | Details | | --------------- | --------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------- | ------- | | `ref` $bindable | `HTMLDivElement` | The underlying DOM element being rendered. You can bind to this to get a reference to the element.`Default: null` | | | `children` | `Snippet` | The children content to render.`Default: —— undefined` | | | `child` | `Snippet` - type SnippetProps = { props: Record\; }; | Use render delegation to render your own element. See [Child Snippet](/docs/child-snippet) docs for more information.`Default: —— undefined` | | | Data Attribute | Value | Description | Details | | --------------------- | ----- | ----------------------------- | ------- | | `data-combobox-group` | `''` | Present on the group element. | | ### Combobox.GroupHeading A heading for the parent combobox group. This is used to describe a group of related combobox items. | Property | Type | Description | Details | | --------------- | --------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------- | ------- | | `ref` $bindable | `HTMLDivElement` | The underlying DOM element being rendered. You can bind to this to get a reference to the element.`Default: null` | | | `children` | `Snippet` | The children content to render.`Default: —— undefined` | | | `child` | `Snippet` - type SnippetProps = { props: Record\; }; | Use render delegation to render your own element. See [Child Snippet](/docs/child-snippet) docs for more information.`Default: —— undefined` | | | Data Attribute | Value | Description | Details | | ----------------------------- | ----- | ------------------------------------- | ------- | | `data-combobox-group-heading` | `''` | Present on the group heading element. | | ### Combobox.ScrollUpButton An optional scroll up button element to improve the scroll experience within the combobox. Should be used in conjunction with the `Combobox.Viewport` component. | Property | Type | Description | Details | | --------------- | --------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------- | ------- | | `delay` | `function` - (tick: number) => number | Controls the initial delay (tick 0) and delay between auto-scrolls in milliseconds.`Default: () => 50` | | | `ref` $bindable | `HTMLDivElement` | The underlying DOM element being rendered. You can bind to this to get a reference to the element.`Default: null` | | | `children` | `Snippet` | The children content to render.`Default: —— undefined` | | | `child` | `Snippet` - type SnippetProps = { props: Record\; }; | Use render delegation to render your own element. See [Child Snippet](/docs/child-snippet) docs for more information.`Default: —— undefined` | | | Data Attribute | Value | Description | Details | | -------------------------------- | ----- | ---------------------------------------- | ------- | | `data-combobox-scroll-up-button` | `''` | Present on the scroll up button element. | | ### Combobox.ScrollDownButton An optional scroll down button element to improve the scroll experience within the combobox. Should be used in conjunction with the `Combobox.Viewport` component. | Property | Type | Description | Details | | --------------- | --------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------- | ------- | | `delay` | `function` - (tick: number) => number | Controls the initial delay (tick 0) and delay between auto-scrolls in milliseconds.`Default: () => 50` | | | `ref` $bindable | `HTMLDivElement` | The underlying DOM element being rendered. You can bind to this to get a reference to the element.`Default: null` | | | `children` | `Snippet` | The children content to render.`Default: —— undefined` | | | `child` | `Snippet` - type SnippetProps = { props: Record\; }; | Use render delegation to render your own element. See [Child Snippet](/docs/child-snippet) docs for more information.`Default: —— undefined` | | | Data Attribute | Value | Description | Details | | ---------------------------------- | ----- | ------------------------------------------ | ------- | | `data-combobox-scroll-down-button` | `''` | Present on the scroll down button element. | | ### Combobox.Arrow An optional arrow element which points to the content when open. | Property | Type | Description | Details | | --------------- | --------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------- | ------- | | `width` | `number` | The width of the arrow in pixels.`Default: 8` | | | `height` | `number` | The height of the arrow in pixels.`Default: 8` | | | `ref` $bindable | `HTMLDivElement` | The underlying DOM element being rendered. You can bind to this to get a reference to the element.`Default: null` | | | `children` | `Snippet` | The children content to render.`Default: —— undefined` | | | `child` | `Snippet` - type SnippetProps = { props: Record\; }; | Use render delegation to render your own element. See [Child Snippet](/docs/child-snippet) docs for more information.`Default: —— undefined` | | | Data Attribute | Value | Description | Details | | -------------- | ----- | ----------------------------- | ------- | | `data-arrow` | `''` | Present on the arrow element. | | [Previous Collapsible](/docs/components/collapsible) [Next Command](/docs/components/command)