Report an issue

Combobox

Enables users to pick from a list of options displayed in a dropdown.

	<script lang="ts">
  import { Combobox } from "bits-ui";
  import CaretUpDown from "phosphor-svelte/lib/CaretUpDown";
  import Check from "phosphor-svelte/lib/Check";
  import OrangeSlice from "phosphor-svelte/lib/OrangeSlice";
 
  const fruits = [
    { value: "mango", label: "Mango" },
    { value: "watermelon", label: "Watermelon" },
    { value: "apple", label: "Apple" },
    { value: "pineapple", label: "Pineapple" },
    { value: "orange", label: "Orange" },
    { value: "grape", label: "Grape" },
    { value: "strawberry", label: "Strawberry" },
    { value: "banana", label: "Banana" },
    { value: "kiwi", label: "Kiwi" },
    { value: "peach", label: "Peach" },
    { value: "cherry", label: "Cherry" },
    { value: "blueberry", label: "Blueberry" },
    { value: "raspberry", label: "Raspberry" },
    { value: "blackberry", label: "Blackberry" },
    { value: "plum", label: "Plum" },
    { value: "apricot", label: "Apricot" },
    { value: "pear", label: "Pear" },
    { value: "grapefruit", label: "Grapefruit" }
  ];
 
  let searchValue = $state("");
 
  const filteredFruits = $derived(
    searchValue === ""
      ? fruits
      : fruits.filter((fruit) =>
          fruit.label.toLowerCase().includes(searchValue.toLowerCase())
        )
  );
</script>
 
<Combobox.Root
  type="single"
  name="favoriteFruit"
  onOpenChange={(o) => {
    if (!o) searchValue = "";
  }}
>
  <div class="relative">
    <OrangeSlice
      class="absolute start-3 top-1/2 size-6 -translate-y-1/2 text-muted-foreground"
    />
    <Combobox.Input
      oninput={(e) => (searchValue = e.currentTarget.value)}
      class="inline-flex h-input w-[296px] truncate rounded-9px border border-border-input bg-background px-11 text-sm transition-colors placeholder:text-foreground-alt/50 focus:outline-none focus:ring-2 focus:ring-foreground focus:ring-offset-2 focus:ring-offset-background"
      placeholder="Search a fruit"
      aria-label="Search a fruit"
    />
    <Combobox.Trigger class="absolute end-3 top-1/2 size-6 -translate-y-1/2">
      <CaretUpDown class="size-6 text-muted-foreground" />
    </Combobox.Trigger>
  </div>
  <Combobox.Portal>
    <Combobox.Content
      class="max-h-96 w-[var(--bits-combobox-trigger-width)] min-w-[var(--bits-combobox-trigger-width)] overflow-y-auto rounded-xl border border-muted bg-background px-1 py-3 shadow-popover outline-none"
      sideOffset={10}
    >
      {#each filteredFruits as fruit, i (i + fruit.value)}
        <Combobox.Item
          class="flex h-10 w-full select-none items-center rounded-button py-3 pl-5 pr-1.5 text-sm capitalize outline-none duration-75 data-[highlighted]:bg-muted"
          value={fruit.value}
          label={fruit.label}
        >
          {#snippet children({ selected })}
            {fruit.label}
            {#if selected}
              <div class="ml-auto">
                <Check />
              </div>
            {/if}
          {/snippet}
        </Combobox.Item>
      {:else}
        <span class="block px-5 py-2 text-sm text-muted-foreground">
          No results found
        </span>
      {/each}
    </Combobox.Content>
  </Combobox.Portal>
</Combobox.Root>

Structure

	<script lang="ts">
	import { Combobox } from "bits-ui";
</script>
 
<Combobox.Root>
	<Combobox.Input />
	<Combobox.Trigger />
	<Combobox.Portal>
		<Combobox.Content>
			<Combobox.Group>
				<Combobox.GroupLabel />
				<Combobox.Item />
			</Combobox.Group>
			<Combobox.Item />
		</Combobox.Content>
	</Combobox.Portal>
</Combobox.Root>

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
	<script lang="ts">
	import { Combobox, type WithoutChildrenOrChild, mergeProps } from "bits-ui";
 
	type Item = { value: string; label: string; };
 
	type Props = Combobox.RootProps & {
		items: Item[];
		inputProps?: WithoutChildrenOrChild<Combobox.InputProps>;
		contentProps?: WithoutChildrenOrChild<Combobox.ContentProps>;
	}
 
	let {
		items,
		value = $bindable(),
		open = $bindable(false),
		inputProps,
		contentProps,
		...restProps
	}: Props = $props();
 
	let searchValue = $state("");
 
	const filteredItems = $derived.by(() => {
		if (searchValue === "") return items;
		return items.filter((item) => item.label.toLowerCase().includes(searchValue.toLowerCase()));
	})
 
	function handleInput(e: Event & { currentTarget: HTMLInputElement }) {
		searchValue = e.currentTarget.value;
	}
 
	function handleOpenChange(newOpen: boolean) {
		if (!newOpen) searchValue = "";
	}
 
	const mergedRootProps = $derived(mergeProps(restProps, { onOpenChange: handleOpenChange }))
	const mergedInputProps = $derived(mergeProps(inputProps, { oninput: handleInput } ))
</script>
 
<Combobox.Root bind:value bind:open {...mergedRootProps}>
	<Combobox.Input {....mergedInputProps} />
	<Combobox.Trigger>Open</Combobox.Trigger>
	<Combobox.Portal>
		<Combobox.Content {...contentProps}>
			{#each filteredItems as item, i (i + item.value)}
				<Combobox.Item value={item.value} label={item.label}>
					{#snippet children({ selected })}
						{item.label}
						{selected ? "✅" : ""}
					{/snippet}
				</Combobox.Item>
			{:else}
				<span>
					No results found
				</span>
			{/each}
		</Combobox.Content>
	</Combobox.Portal>
</Combobox.Root>
+page.svelte
	<script lang="ts">
	import { CustomCombobox } from "$lib/components";
 
	const items = [
		{ value: "mango", label: "Mango" },
		{ value: "watermelon", label: "Watermelon" },
		{ value: "apple", label: "Apple" },
		// ...
	];
</script>
 
<CustomCombobox {items} />

API Reference

Combobox.Root

The root combobox component which manages & scopes the state of the combobox.

Property Type Description
type Required
enum

The type of combobox.

Default: undefined
value bindable prop
union

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

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 prop
boolean

The open state of the combobox menu.

Default: false
onOpenChange
function

A callback that is fired when the combobox menu's open state changes.

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

The alignment of the highlighted item when scrolling.

Default: 'nearest'
loop
boolean

Whether or not the combobox menu should loop through items.

Default: false
children
Snippet

The children content to render.

Default: undefined

Combobox.Content

The element which contains the combobox's items.

Property Type Description
side
enum

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

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

A boundary element or array of elements to check for collisions against.

Default: undefined
collisionPadding
union

The amount in pixels of virtual padding around the viewport edges to check for overflow which will cause a collision.

Default: 0
sticky
enum

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

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

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: true
onEscapeKeydown
function

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

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

Callback fired when an outside interaction event completes, which is either a pointerup, mouseup, or touchend event, depending on the user's input device. You can call event.preventDefault() to prevent the default behavior of handling the outside interaction.

Default: undefined
onInteractOutsideStart
function

Callback fired when an outside interaction event starts, which is either a pointerdown, mousedown, or touchstart event, depending on the user's input device. You can call event.preventDefault() to prevent the continuation of the outside interaction.

Default: undefined
onFocusOutside
function

Callback fired when focus leaves the dismissable layer. You can call event.preventDefault() to prevent the default behavior on focus leaving the layer.

Default: undefined
interactOutsideBehavior
enum

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
onMountAutoFocus
function

Event handler called when auto-focusing the content as it is mounted. Can be prevented.

Default: undefined
onDestroyAutoFocus
function

Event handler called when auto-focusing the content as it is destroyed. Can be prevented.

Default: undefined
preventOverflowTextSelection
boolean

When true, prevents the text selection from overflowing the bounds of the element.

Default: true
dir
enum

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 prop
HTMLDivElement

The underlying DOM element being rendered. You can bind to this to get a reference to the element.

Default: undefined
children
Snippet

The children content to render.

Default: undefined
child
Snippet

Use render delegation to render your own element. See delegation docs for more information.

Default: undefined
Data Attribute Value Description
data-state
enum

The combobox's open state.

data-combobox-content
''

Present on the content element.

CSS Variable Description
--bits-combobox-content-transform-origin

The transform origin of the combobox content element.

--bits-combobox-content-available-width

The available width of the combobox content element.

--bits-combobox-content-available-height

The available height of the combobox content element.

--bits-combobox-trigger-width

The width of the combobox trigger element.

--bits-combobox-trigger-height

The height of the combobox trigger element.

Combobox.Item

A combobox item, which must be a child of the Combobox.Content component.

Property Type Description
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

A callback that is fired when the item is highlighted.

Default: undefined
onUnhighlight
function

A callback that is fired when the item is unhighlighted.

Default: undefined
ref bindable prop
HTMLDivElement

The underlying DOM element being rendered. You can bind to this to get a reference to the element.

Default: undefined
children
Snippet

The children content to render.

Default: undefined
child
Snippet

Use render delegation to render your own element. See delegation docs for more information.

Default: undefined
Data Attribute Value Description
data-value
''

The value of the combobox item.

data-label
''

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
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
ref bindable prop
HTMLInputElement

The underlying DOM element being rendered. You can bind to this to get a reference to the element.

Default: undefined
children
Snippet

The children content to render.

Default: undefined
child
Snippet

Use render delegation to render your own element. See delegation docs for more information.

Default: undefined
Data Attribute Value Description
data-state
enum

The combobox's open state.

data-disabled
''

Present when the combobox is disabled.

data-combobox-input
''

Present on the input element.

Combobox.GroupLabel

A label for the parent combobox group. This is used to describe a group of related combobox items.

Property Type Description
ref bindable prop
HTMLDivElement

The underlying DOM element being rendered. You can bind to this to get a reference to the element.

Default: undefined
children
Snippet

The children content to render.

Default: undefined
child
Snippet

Use render delegation to render your own element. See delegation docs for more information.

Default: undefined
Data Attribute Value Description
data-combobox-group-label
''

Present on the group label element.

Combobox.Arrow

An optional arrow element which points to the content when open.

Property Type Description
width
number

The width of the arrow in pixels.

Default: 8
height
number

The height of the arrow in pixels.

Default: 8
ref bindable prop
HTMLDivElement

The underlying DOM element being rendered. You can bind to this to get a reference to the element.

Default: undefined
children
Snippet

The children content to render.

Default: undefined
child
Snippet

Use render delegation to render your own element. See delegation docs for more information.

Default: undefined
Data Attribute Value Description
data-arrow
''

Present on the arrow element.