Combobox (Autocomplete)

Comboboxes are the foundation of accessible autocompletes and command palettes for your app, complete with robust support for keyboard navigation.

To get started, install Headless UI via npm.

Please note that this library only supports Vue 3.

npm install @headlessui/vue

Comboboxes are built using the Combobox, ComboboxInput, ComboboxButton, ComboboxOptions, ComboboxOption and ComboboxLabel components.

The ComboboxInput will automatically open/close the ComboboxOptions when searching.

You are completely in charge of how you filter the results, whether it be with a fuzzy search library client-side or by making server-side requests to an API. In this example we will keep the logic simple for demo purposes.

<template>
  <Combobox v-model="selectedPerson">
    <ComboboxInput @change="query = $event.target.value" />
    <ComboboxOptions>
      <ComboboxOption
        v-for="person in filteredPeople"
        :key="person"
        :value="person"
      >
        {{ person }}
      </ComboboxOption>
    </ComboboxOptions>
  </Combobox>
</template>

<script setup>
  import { ref, computed } from 'vue'
  import {
    Combobox,
    ComboboxInput,
    ComboboxOptions,
    ComboboxOption,
  } from '@headlessui/vue'

  const people = [
    'Durward Reynolds',
    'Kenton Towne',
    'Therese Wunsch',
    'Benedict Kessler',
    'Katelyn Rohan',
  ]
  const selectedPerson = ref(people[0])
  const query = ref('')

  const filteredPeople = computed(() =>
    query.value === ''
      ? people
      : people.filter((person) => {
          return person.toLowerCase().includes(query.value.toLowerCase())
        })
  )
</script>

In the previous example we used a list of string values as data, but you can also use objects with additional information. The only caveat is that you have to provide a displayValue to the input. This is important so that a string based version of your object can be rendered in the ComboboxInput.

<template>
  <Combobox v-model="selectedPerson">
    <ComboboxInput
      @change="query = $event.target.value"
      :displayValue="(person) => person.name"
    />
    <ComboboxOptions>
      <ComboboxOption
        v-for="person in filteredPeople"
        :key="person.id"
        :value="person"
        :disabled="person.unavailable"
      >
        {{ person.name }}
      </ComboboxOption>
    </ComboboxOptions>
  </Combobox>
</template>

<script setup>
  import { ref, computed } from 'vue'
  import {
    Combobox,
    ComboboxInput,
    ComboboxOptions,
    ComboboxOption,
  } from '@headlessui/vue'

  const people = [
    { id: 1, name: 'Durward Reynolds', unavailable: false },
    { id: 2, name: 'Kenton Towne', unavailable: false },
    { id: 3, name: 'Therese Wunsch', unavailable: false },
    { id: 4, name: 'Benedict Kessler', unavailable: true },
    { id: 5, name: 'Katelyn Rohan', unavailable: false },
  ]
  const selectedPerson = ref(people[0])
  const query = ref('')

  const filteredPeople = computed(() =>
    query.value === ''
      ? people
      : people.filter((person) => {
          return person.name.toLowerCase().includes(query.value.toLowerCase())
        })
  )
</script>

This is a headless component so there are no styles included by default. Instead, the components expose useful information via scoped slots that you can use to apply the styles you'd like to apply yourself.

To style the active ComboboxOption you can read the active slot prop, which tells you whether or not that combobox option is the option that is currently focused via the mouse or keyboard.

To style the selected ComboboxOption you can read the selected slot prop, which tells you whether or not that combobox option is the option that is currently the value passed to the Combobox.

Note that an option can be both active and selected at the same time.

<template>
  <Combobox v-model="selectedPerson">
    <ComboboxInput
      @change="query = $event.target.value"
      :displayValue="(person) => person.name"
    />
    <ComboboxOptions>
      <!-- Use the `active` state to conditionally style the active option. -->
      <!-- Use the `selected` state to conditionally style the selected option. -->
      <ComboboxOption
        as="template"
        v-slot="{ active, selected }"
        v-for="person in filteredPeople"
        :key="person.id"
        :value="person"
      >
        <li
          :class="{
            'bg-blue-500 text-white': active,
            'bg-white text-black': !active
          }"
        >
          <CheckIcon v-show="selected" />          {{ person.name }}
        </li>
      </ComboboxOption>
    </ComboboxOptions>
  </Combobox>
</template>

<script setup>
  import { ref, computed } from 'vue'
  import {
    Combobox,
    ComboboxInput,
    ComboboxOptions,
    ComboboxOption,
  } from '@headlessui/vue'

  const people = [
    { id: 1, name: 'Durward Reynolds', unavailable: false },
    { id: 2, name: 'Kenton Towne', unavailable: false },
    { id: 3, name: 'Therese Wunsch', unavailable: false },
    { id: 4, name: 'Benedict Kessler', unavailable: true },
    { id: 5, name: 'Katelyn Rohan', unavailable: false },
  ]
  const selectedPerson = ref(people[0])
  const query = ref('')

  const filteredPeople = computed(() =>
    query.value === ''
      ? people
      : people.filter((person) => {
          return person.name.toLowerCase().includes(query.value.toLowerCase())
        })
  )
</script>

The Combobox component allows you to select multiple values. You can enable this by providing an array of values instead of a single value.

<template>
  <Combobox v-model="selectedPeople" multiple>
    <ul v-if="selectedPeople.length > 0">
      <li v-for="person in selectedPeople" :key="person.id">
        {{ person.name }}
      </li>
    </ul>
    <ComboboxInput :displayValue="(person) => person.name" />
    <ComboboxOptions>
      <ComboboxOption v-for="person in people" :key="person" :value="person">
        {{ person.name }}
      </ComboboxOption>
    </ComboboxOptions>
  </Combobox>
</template>

<script setup>
  import { ref, computed } from 'vue'
  import {
    Combobox,
    ComboboxInput,
    ComboboxOptions,
    ComboboxOption,
  } from '@headlessui/vue'

  const people = [
    { id: 1, name: 'Durward Reynolds' },
    { id: 2, name: 'Kenton Towne' },
    { id: 3, name: 'Therese Wunsch' },
    { id: 4, name: 'Benedict Kessler' },
    { id: 5, name: 'Katelyn Rohan' },
  ]
  const selectedPeople = ref([people[0], people[1]])
</script>

This will keep the combobox open when you are selecting options, and choosing an option will toggle it in place.

Your v-model binding will be updated with an array containing all selected options any time an option is added or removed.

By default the Combobox will use the input contents as the label for screenreaders. If you'd like more control over what is announced to assistive technologies, use the ComboboxLabel component.

<template>
  <Combobox v-model="selectedPerson">
    <ComboboxLabel>Assignee:</ComboboxLabel>
    <ComboboxInput
      @change="query = $event.target.value"
      :displayValue="(person) => person.name"
    />
    <ComboboxOptions>
      <ComboboxOption
        v-for="person in filteredPeople"
        :key="person.id"
        :value="person"
      >
        {{ person.name }}
      </ComboboxOption>
    </ComboboxOptions>
  </Combobox>
</template>

<script setup>
  import { ref, computed } from 'vue'
  import {
    Combobox,
    ComboboxLabel,
    ComboboxInput,
    ComboboxOptions,
    ComboboxOption,
  } from '@headlessui/vue'

  const people = [
    { id: 1, name: 'Durward Reynolds' },
    { id: 2, name: 'Kenton Towne' },
    { id: 3, name: 'Therese Wunsch' },
    { id: 4, name: 'Benedict Kessler' },
    { id: 5, name: 'Katelyn Rohan' },
  ]
  const selectedPerson = ref(people[0])
  const query = ref('')

  const filteredPeople = computed(() =>
    query.value === ''
      ? people
      : people.filter((person) => {
          return person.name.toLowerCase().includes(query.value.toLowerCase())
        })
  )
</script>

If you add the name prop to your combobox, hidden input elements will be rendered and kept in sync with your selected value.

<template>
  <form action="/projects/1/assignee" method="post">
    <Combobox v-model="selectedPerson" name="assignee">
      <ComboboxInput
        @change="query = $event.target.value"
        :displayValue="(person) => person.name"
      />
      <ComboboxOptions>
        <ComboboxOption
          v-for="person in filteredPeople"
          :key="person"
          :value="person"
        >
          {{ person.name }}
        </ComboboxOption>
      </ComboboxOptions>
    </Combobox>
    <button>Submit</button>
  </form>
</template>

<script setup>
  import { ref } from 'vue'
  import {
    Combobox,
    ComboboxInput,
    ComboboxOptions,
    ComboboxOption,
  } from '@headlessui/vue'

  const people = [
    { id: 1, name: 'Durward Reynolds' },
    { id: 2, name: 'Kenton Towne' },
    { id: 3, name: 'Therese Wunsch' },
    { id: 4, name: 'Benedict Kessler' },
    { id: 5, name: 'Katelyn Rohan' },
  ]
  const selectedPerson = ref(people[0])
  const query = ref('')

  const filteredPeople = computed(() =>
    query.value === ''
      ? people
      : people.filter((person) => {
          return person.name.toLowerCase().includes(query.value.toLowerCase())
        })
  )
</script>

This lets you use a combobox inside a native HTML <form> and make traditional form submissions as if your combobox was a native HTML form control.

Basic values like strings will be rendered as a single hidden input containing that value, but complex values like objects will be encoded into multiple inputs using a square bracket notation for the names:

<input type="hidden" name="assignee[id]" value="1" />
<input type="hidden" name="assignee[name]" value="Durward Reynolds" />

You can allow users to enter their own value that doesn't exist in the list by including a dynamic ComboboxOption based on the query value.

<template>
  <Combobox v-model="selectedPerson">
    <ComboboxInput
      @change="query = $event.target.value"
      :displayValue="(person) => person.name"
    />
    <ComboboxOptions>
      <ComboboxOption v-if="queryPerson" :value="queryPerson">
        Create "{{ query }}"
      </ComboboxOption>
      <ComboboxOption
        v-for="person in filteredPeople"
        :key="person"
        :value="person"
      >
        {{ person.name }}
      </ComboboxOption>
    </ComboboxOptions>
  </Combobox>
</template>

<script setup>
  import { ref, computed } from 'vue'
  import {
    Combobox,
    ComboboxInput,
    ComboboxOptions,
    ComboboxOption,
  } from '@headlessui/vue'

  const people = [
    { id: 1, name: 'Durward Reynolds' },
    { id: 2, name: 'Kenton Towne' },
    { id: 3, name: 'Therese Wunsch' },
    { id: 4, name: 'Benedict Kessler' },
    { id: 5, name: 'Katelyn Rohan' },
  ]
  const selectedPerson = ref(people[0])
  const query = ref('')

  const queryPerson = computed(() => {
    return query.value === '' ? null : { id: null, name: query.value }
  })
  const filteredPeople = computed(() =>
    query.value === ''
      ? people
      : people.filter((person) => {
          return person.name.toLowerCase().includes(query.value.toLowerCase())
        })
  )
</script>

Depending on what you're building it can sometimes make sense to render additional information about the active option outside of the <ComboboxOptions>. For example, a preview of the active option within the context of a command palette. In these situations you can read the activeOption render prop argument to access this information.

<template>
  <Combobox v-model="selectedPerson" v-slot="{ activeOption }">
    <ComboboxInput
      @change="query = $event.target.value"
      :displayValue="(person) => person.name"
    />
    <ComboboxOptions>
      <ComboboxOption
        v-for="person in filteredPeople"
        :key="person.id"
        :value="person"
      >
        {{ person.name }}
      </ComboboxOption>
    </ComboboxOptions>

    <div v-if="activeOption">
      The current active user is: {{ activeOption.name }}
    </div>
  </Combobox>
</template>

<script setup>
  import { ref, computed } from 'vue'
  import {
    Combobox,
    ComboboxInput,
    ComboboxOptions,
    ComboboxOption,
  } from '@headlessui/vue'

  const people = [
    { id: 1, name: 'Durward Reynolds' },
    { id: 2, name: 'Kenton Towne' },
    { id: 3, name: 'Therese Wunsch' },
    { id: 4, name: 'Benedict Kessler' },
    { id: 5, name: 'Katelyn Rohan' },
  ]
  const selectedPerson = ref(people[0])
  const query = ref('')

  const filteredPeople = computed(() =>
    query.value === ''
      ? people
      : people.filter((person) => {
          return person.name.toLowerCase().includes(query.value.toLowerCase())
        })
  )
</script>

The activeOption will be the value of the current active ComboboxOption.

By default, your ComboboxOptions instance will be shown/hidden automatically based on the internal open state tracked within the Combobox component itself.

<template>
  <Combobox v-model="selectedPerson">
    <ComboboxInput
      @change="query = $event.target.value"
      :displayValue="(person) => person.name"
    />

    <!--
      By default, this will automatically show/hide when typing in the
      ComboboxInput, or when pressing the ComboboxButton.
    -->
    <ComboboxOptions>
      <ComboboxOption
        v-for="person in filteredPeople"
        :key="person.id"
        :value="person"
      >
        {{ person.name }}
      </ComboboxOption>
    </ComboboxOptions>
  </Combobox>
</template>

<script setup>
  import { ref, computed } from 'vue'
  import {
    Combobox,
    ComboboxInput,
    ComboboxOptions,
    ComboboxOption,
  } from '@headlessui/vue'

  const people = [
    { id: 1, name: 'Durward Reynolds' },
    { id: 2, name: 'Kenton Towne' },
    { id: 3, name: 'Therese Wunsch' },
    { id: 4, name: 'Benedict Kessler' },
    { id: 5, name: 'Katelyn Rohan' },
  ]
  const selectedPerson = ref(people[0])
  const query = ref('')

  const filteredPeople = computed(() =>
    query.value === ''
      ? people
      : people.filter((person) => {
          return person.name.toLowerCase().includes(query.value.toLowerCase())
        })
  )
</script>

If you'd rather handle this yourself (perhaps because you need to add an extra wrapper element for one reason or another), you can add a static prop to the ComboboxOptions instance to tell it to always render, and inspect the open slot prop provided by the Combobox to control which element is shown/hidden yourself.

<template>
  <Combobox v-model="selectedPerson" v-slot="{ open }">
    <ComboboxInput
      @change="query = $event.target.value"
      :displayValue="(person) => person.name"
    />

    <div v-show="open">
      <!--
        Using `static`, `ComboboxOptions` is always rendered and ignores
        the `open` state.
      -->
      <ComboboxOptions static>
        <ComboboxOption
          v-for="person in filteredPeople"
          :key="person.id"
          :value="person"
        >
          {{ person.name }}
        </ComboboxOption>
      </ComboboxOptions>
    </div>
  </Combobox>
</template>

<script setup>
  import { ref, computed } from 'vue'
  import {
    Combobox,
    ComboboxInput,
    ComboboxOptions,
    ComboboxOption,
  } from '@headlessui/vue'

  const people = [
    { id: 1, name: 'Durward Reynolds' },
    { id: 2, name: 'Kenton Towne' },
    { id: 3, name: 'Therese Wunsch' },
    { id: 4, name: 'Benedict Kessler' },
    { id: 5, name: 'Katelyn Rohan' },
  ]
  const selectedPerson = ref(people[0])
  const query = ref('')

  const filteredPeople = computed(() =>
    query.value === ''
      ? people
      : people.filter((person) => {
          return person.name.toLowerCase().includes(query.value.toLowerCase())
        })
  )
</script>

Use the disabled prop to disable a ComboboxOption. This will make it unselectable via mouse and keyboard, and it will be skipped when pressing the up/down arrows.

<template>
  <Combobox v-model="selectedPerson">
    <ComboboxInput
      @change="query = $event.target.value"
      :displayValue="(person) => person.name"
    />

    <ComboboxOptions>
      <!-- Disabled options will be skipped by keyboard navigation. -->
      <ComboboxOption
        v-for="person in filteredPeople"
        :key="person.id"
        :value="person"
        :disabled="person.unavailable"
      >
        <span :class='{ "opacity-75": person.unavailable }'>
          {{ person.name }}
        </span>
      </ComboboxOption>
    </ComboboxOptions>
  </Combobox>
</template>

<script setup>
  import { ref, computed } from 'vue'
  import {
    Combobox,
    ComboboxInput,
    ComboboxOptions,
    ComboboxOption,
  } from '@headlessui/vue'

  const people = [
    { id: 1, name: 'Durward Reynolds', unavailable: true },
    { id: 2, name: 'Kenton Towne', unavailable: false },
    { id: 3, name: 'Therese Wunsch', unavailable: false },
    { id: 4, name: 'Benedict Kessler', unavailable: true },
    { id: 5, name: 'Katelyn Rohan', unavailable: false },
  ]
  const selectedPerson = ref(people[0])
  const query = ref('')

  const filteredPeople = computed(() =>
    query.value === ''
      ? people
      : people.filter((person) => {
          return person.name.toLowerCase().includes(query.value.toLowerCase())
        })
  )
</script>

By default, once you've selected a value in a combobox there is no way to clear the combobox back to an empty value — when you clear the input and tab away, the value returns to the previously selected value.

If you want to support empty values in your combobox, use the nullable prop.

<template>
  <Combobox v-model="selectedPerson" nullable>
    <ComboboxInput
      @change="query = $event.target.value"
      :displayValue="(person) => person?.name"
    />

    <ComboboxOptions>
      <ComboboxOption
        v-for="person in filteredPeople"
        :key="person.id"
        :value="person"
      >
        {{ person.name }}
      </ComboboxOption>
    </ComboboxOptions>
  </Combobox>
</template>

<script setup>
  import { ref, computed } from 'vue'
  import {
    Combobox,
    ComboboxInput,
    ComboboxOptions,
    ComboboxOption,
  } from '@headlessui/vue'

  const people = [
    { id: 1, name: 'Durward Reynolds', unavailable: true },
    { id: 2, name: 'Kenton Towne', unavailable: false },
    { id: 3, name: 'Therese Wunsch', unavailable: false },
    { id: 4, name: 'Benedict Kessler', unavailable: true },
    { id: 5, name: 'Katelyn Rohan', unavailable: false },
  ]
  const selectedPerson = ref(people[0])
  const query = ref('')

  const filteredPeople = computed(() =>
    query.value === ''
      ? people
      : people.filter((person) => {
          return person.name.toLowerCase().includes(query.value.toLowerCase())
        })
  )
</script>

When the nullable prop is used, clearing the input and navigating away from the element will update your v-model binding and invoke your displayValue callback with null.

This prop doesn't do anything when allowing multiple values because options are toggled on and off, resulting in an empty array (rather than null) if nothing is selected.

To animate the opening/closing of your combobox, you can use Vue's built-in <transition> component. All you need to do is wrap your ComboboxOptions instance in a <transition>, and the transition will be applied automatically.

<template>
  <Combobox v-model="selectedPerson">
    <ComboboxInput
      @change="query = $event.target.value"
      :displayValue="(person) => person.name"
    />

    <!-- Use Vue's built-in <transition> component to add transitions. -->
    <transition
      enter-active-class="transition duration-100 ease-out"
      enter-from-class="transform scale-95 opacity-0"
      enter-to-class="transform scale-100 opacity-100"
      leave-active-class="transition duration-75 ease-out"
      leave-from-class="transform scale-100 opacity-100"
      leave-to-class="transform scale-95 opacity-0"
    >
      <ComboboxOptions>
        <ComboboxOption
          v-for="person in filteredPeople"
          :key="person.id"
          :value="person"
        >
          {{ person.name }}
        </ComboboxOption>
      </ComboboxOptions>
    </transition>
  </Combobox>
</template>

<script setup>
  import { ref, computed } from 'vue'
  import {
    Combobox,
    ComboboxInput,
    ComboboxOptions,
    ComboboxOption,
  } from '@headlessui/vue'

  const people = [
    { id: 1, name: 'Durward Reynolds' },
    { id: 2, name: 'Kenton Towne' },
    { id: 3, name: 'Therese Wunsch' },
    { id: 4, name: 'Benedict Kessler' },
    { id: 5, name: 'Katelyn Rohan' },
  ]
  const selectedPerson = ref(people[0])
  const query = ref('')

  const filteredPeople = computed(() =>
    query.value === ''
      ? people
      : people.filter((person) => {
          return person.name.toLowerCase().includes(query.value.toLowerCase())
        })
  )
</script>

If you'd like to coordinate multiple transitions for different children of your Combobox, check out the Transition component included in Headless UI.

By default, the Combobox and its subcomponents each render a default element that is sensible for that component.

For example, ComboboxLabel renders a label by default, ComboboxInput renders an input, ComboboxButton renders a button, ComboboxOptions renders a ul, and ComboboxOption renders a li. By contrast, Combobox does not render an element, and instead renders its children directly.

This is easy to change using the as prop, which exists on every component.

<template>
  <!-- Render a `div` instead of nothing -->
  <Combobox as="div" v-model="selectedPerson">
    <ComboboxInput
      @change="query = $event.target.value"
      :displayValue="(person) => person.name"
    />

    <!-- Render a `div` instead of a `ul` -->
    <ComboboxOptions as="div">
      <!-- Render a `span` instead of a `li` -->
      <ComboboxOption
        as="span"
        v-for="person in filteredPeople"
        :key="person.id"
        :value="person"
      >
        {{ person.name }}
      </ComboboxOption>
    </ComboboxOptions>
  </Combobox>
</template>

<script setup>
  import { ref, computed } from 'vue'
  import {
    Combobox,
    ComboboxInput,
    ComboboxOptions,
    ComboboxOption,
  } from '@headlessui/vue'

  const people = [
    { id: 1, name: 'Durward Reynolds' },
    { id: 2, name: 'Kenton Towne' },
    { id: 3, name: 'Therese Wunsch' },
    { id: 4, name: 'Benedict Kessler' },
    { id: 5, name: 'Katelyn Rohan' },
  ]
  const selectedPerson = ref(people[0])
  const query = ref('')

  const filteredPeople = computed(() =>
    query.value === ''
      ? people
      : people.filter((person) => {
          return person.name.toLowerCase().includes(query.value.toLowerCase())
        })
  )
</script>

To tell an element to render its children directly with no wrapper element, use as="template".

<template>
  <Combobox v-model="selectedPerson">
    <!-- Render children directly instead of an `input` -->
    <ComboboxInput
      as="template"
      @change="query = $event.target.value"
      :displayValue="(person) => person.name"
    >
      <input />
    </ComboboxInput>

    <ComboboxOptions>
      <ComboboxOption
        v-for="person in filteredPeople"
        :key="person.id"
        :value="person"
      >
        {{ person.name }}
      </ComboboxOption>
    </ComboboxOptions>
  </Combobox>
</template>

<script setup>
  import { ref, computed } from 'vue'
  import {
    Combobox,
    ComboboxInput,
    ComboboxOptions,
    ComboboxOption,
  } from '@headlessui/vue'

  const people = [
    { id: 1, name: 'Durward Reynolds' },
    { id: 2, name: 'Kenton Towne' },
    { id: 3, name: 'Therese Wunsch' },
    { id: 4, name: 'Benedict Kessler' },
    { id: 5, name: 'Katelyn Rohan' },
  ]
  const selectedPerson = ref(people[0])
  const query = ref('')

  const filteredPeople = computed(() =>
    query.value === ''
      ? people
      : people.filter((person) => {
          return person.name.toLowerCase().includes(query.value.toLowerCase())
        })
  )
</script>

When a Combobox is toggled open, the ComboboxInput stays focused.

The ComboboxButton is ignored for the default tab flow, this means that pressing Tab in the ComboboxInput will skip passed the ComboboxButton.

Clicking a ComboboxButton toggles the options list open and closed. Clicking anywhere outside of the options list will close the combobox.

Command	Description
`ArrowDown`, or `ArrowUp` when `ComboboxInput` is focused	Opens combobox and focuses the selected item
`Enter`, `Space`, `ArrowDown`, or `ArrowUp` when `ComboboxButton` is focused	Opens combobox, focuses the input and selects the selected item
`Esc` when combobox is open	Closes combobox and restores the selected item in the input field
`ArrowDown` or `ArrowUp` when combobox is open	Focuses previous/next non-disabled item
`Home` or `End` when combobox is open	Focuses first/last non-disabled item
`Enter` when combobox is open	Selects the current item
`Tab` when combobox is open	Selects the current active item and closes the combobox
`A–Z` or `a–z` when combobox is open	Calls the `onChange` which allows you to filter the list

All relevant ARIA attributes are automatically managed.

The main Combobox component.

Prop	Default	Description
`as`	`template`	`String \| Component` The element or component the `Combobox` should render as.
`v-model`	—	`T` The selected value.
`disabled`	`false`	`Boolean` Use this to disable the entire combobox component & related children.
`name`	—	`String` The name used when using this component inside a form.
`nullable`	—	`Boolean` Whether you can clear the combobox or not.
`multiple`	`false`	`Boolean` Whether multiple options can be selected or not.

Slot Prop	Description
`open`	`Boolean` Whether or not the combobox is open.
`disabled`	`Boolean` Whether or not the combobox is disabled.
`activeIndex`	`Number \| null` The index of the active option or null if none is active.
`activeOption`	`T \| null` The active option or null if none is active.

The Combobox's input.

Prop	Default	Description
`as`	`input`	`String \| Component` The element or component the `ComboboxInput` should render as.
`displayValue`	—	`(item: T) => string` The string representation of your `value`.

Render Prop	Description
`open`	`Boolean` Whether or not the Combobox is open.
`disabled`	`Boolean` Whether or not the Combobox is disabled.

The Combobox's button.

Prop	Default	Description
`as`	`button`	`String \| Component` The element or component the `ComboboxButton` should render as.

Slot Prop	Description
`open`	`Boolean` Whether or not the Combobox is open.
`disabled`	`Boolean` Whether or not the Combobox is disabled.

A label that can be used for more control over the text your Combobox will announce to screenreaders. Its id attribute will be automatically generated and linked to the root Combobox component via the aria-labelledby attribute.

Prop	Default	Description
`as`	`label`	`String \| Component` The element or component the `ComboboxLabel` should render as.

Slot Prop	Description
`open`	`Boolean` Whether or not the Combobox is open.
`disabled`	`Boolean` Whether or not the Combobox is disabled.

The component that directly wraps the list of options in your custom Combobox.

Prop	Default	Description
`as`	`ul`	`String \| Component` The element or component the `ComboboxOptions` should render as.
`static`	`false`	`Boolean` Whether the element should ignore the internally managed open/closed state.
`unmount`	`true`	`Boolean` Whether the element should be unmounted or hidden based on the open/closed state.
`hold`	`false`	`boolean` Whether or not the active option should stay active even when the mouse leaves the active option.

Slot Prop	Description
`open`	`Boolean` Whether or not the Combobox is open.

Used to wrap each item within your Combobox.

Prop	Default	Description
`value`	—	`T` The option value.
`as`	`li`	`String \| Component` The element or component the `ComboboxOption` should render as.
`disabled`	`false`	`Boolean` Whether or not the option should be disabled for keyboard navigation and ARIA purposes.

Slot Prop	Description
`active`	`Boolean` Whether or not the option is the active/focused option.
`selected`	`Boolean` Whether or not the option is the selected option.
`disabled`	`Boolean` Whether or not the option is the disabled for keyboard navigation and ARIA purposes.

If you're interested in predesigned component examples using Headless UI and Tailwind CSS, check out Tailwind UI — a collection of beautifully designed and expertly crafted components built by us.

It's a great way to support our work on open-source projects like this and makes it possible for us to improve them and keep them well-maintained.