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:
npm install @headlessui/react
Comboboxes are built using the Combobox
, Combobox.Input
, Combobox.Button
,
Combobox.Options
, Combobox.Option
and Combobox.Label
components.
The Combobox.Input
will automatically open/close the Combobox.Options
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.
import { useState } from 'react' import { Combobox } from '@headlessui/react' const people = [ 'Durward Reynolds', 'Kenton Towne', 'Therese Wunsch', 'Benedict Kessler', 'Katelyn Rohan', ] function MyCombobox() { const [selectedPerson, setSelectedPerson] = useState(people[0]) const [query, setQuery] = useState('') const filteredPeople = query === '' ? people : people.filter((person) => { return person.toLowerCase().includes(query.toLowerCase()) }) return ( <Combobox value={selectedPerson} onChange={setSelectedPerson}> <Combobox.Input onChange={(event) => setQuery(event.target.value)} /> <Combobox.Options> {filteredPeople.map((person) => ( <Combobox.Option key={person} value={person}> {person} </Combobox.Option> ))} </Combobox.Options> </Combobox> ) }
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 Combobox.Input
.
import { useState } from 'react' import { Combobox } from '@headlessui/react' 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 }, ] function MyCombobox() { const [selectedPerson, setSelectedPerson] = useState(people[0]) const [query, setQuery] = useState('') const filteredPeople = query === '' ? people : people.filter((person) => { return person.name.toLowerCase().includes(query.toLowerCase()) }) return ( <Combobox value={selectedPerson} onChange={setSelectedPerson}> <Combobox.Input onChange={(event) => setQuery(event.target.value)}
displayValue={(person) => person.name}/> <Combobox.Options> {filteredPeople.map((person) => ( <Combobox.Option key={person.id} value={person} disabled={person.unavailable} > {person.name} </Combobox.Option> ))} </Combobox.Options> </Combobox> ) }
This is a headless component so there are no styles included by default. Instead, the components expose useful information via render props that you can use to apply the styles you'd like to apply yourself.
To style the active Combobox.Option
you can read the active
render prop
argument, 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 Combobox.Option
you can read the selected
render prop
argument, 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.
import { useState, Fragment } from 'react' import { Combobox } from '@headlessui/react' import { CheckIcon } from '@heroicons/react/solid' 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' }, ] function MyCombobox() { const [selectedPerson, setSelectedPerson] = useState(people[0]) const [query, setQuery] = useState('') const filteredPeople = query === '' ? people : people.filter((person) => { return person.name.toLowerCase().includes(query.toLowerCase()) }) return ( <Combobox value={selectedPerson} onChange={setSelectedPerson}> <Combobox.Input onChange={(event) => setQuery(event.target.value)} displayValue={(person) => person.name} /> <Combobox.Options> {filteredPeople.map((person) => ( /* Use the `active` state to conditionally style the active option. */ /* Use the `selected` state to conditionally style the selected option. */ <Combobox.Option key={person.id} value={person} as={Fragment}>
{({ active, selected }) => (<li className={`${active ? 'bg-blue-500 text-white' : 'bg-white text-black'}`} >{selected && <CheckIcon />}{person.name} </li> )} </Combobox.Option> ))} </Combobox.Options> </Combobox> ) }
To allow selecting multiple values in your combobox, use the multiple
prop and pass an array to value
instead of a single option.
import { useState } from 'react' import { Combobox } from '@headlessui/react' 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' }, ] function MyCombobox() {
const [selectedPeople, setSelectedPeople] = useState([people[0], people[1]])return ( <Combobox value={selectedPeople} onChange={setSelectedPeople} multiple> {selectedPeople.length > 0 && ( <ul> {selectedPeople.map((person) => ( <li key={person.id}>{person.name}</li> ))} </ul> )}<Combobox.Input /><Combobox.Options> {people.map((person) => ( <Combobox.Option key={person.id} value={person}> {person.name} </Combobox.Option> ))} </Combobox.Options> </Combobox> ) }
The displayValue
prop is omitted because the selectedPeople
is already displayed in a list above the input. If you wish to display the items in the Combobox.Input
then the displayValue
receives an array.
import { useState } from 'react' import { Combobox } from '@headlessui/react' 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' }, ] function MyCombobox() {
const [selectedPeople, setSelectedPeople] = useState([people[0], people[1]])return ( <Combobox value={selectedPeople} onChange={setSelectedPeople} multiple> <Combobox.InputdisplayValue={(people) =>people.map((person) => person.name).join(', ')}/> <Combobox.Options> {people.map((person) => ( <Combobox.Option key={person.id} value={person}> {person.name} </Combobox.Option> ))} </Combobox.Options> </Combobox> ) }
This will keep the combobox open when you are selecting options, and choosing an option will toggle it in place.
Your onChange
handler will be called 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 Combobox.Label
component.
import { useState } from 'react' import { Combobox } from '@headlessui/react' 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' }, ] function MyCombobox() { const [selectedPerson, setSelectedPerson] = useState(people[0]) const [query, setQuery] = useState('') const filteredPeople = query === '' ? people : people.filter((person) => { return person.name.toLowerCase().includes(query.toLowerCase()) }) return ( <Combobox value={selectedPerson} onChange={setSelectedPerson}>
<Combobox.Label>Assignee:</Combobox.Label><Combobox.Input onChange={(event) => setQuery(event.target.value)} displayValue={(person) => person.name} /> <Combobox.Options> {filteredPeople.map((person) => ( <Combobox.Option key={person.id} value={person}> {person.name} </Combobox.Option> ))} </Combobox.Options> </Combobox> ) }
If you add the name
prop to your combobox, hidden input
elements will be rendered and kept in sync with your selected value.
import { useState } from 'react' import { Combobox } from '@headlessui/react' 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' }, ] function Example() { const [selectedPerson, setSelectedPerson] = useState(people[0]) const [query, setQuery] = useState('') const filteredPeople = query === '' ? people : people.filter((person) => { return person.name.toLowerCase().includes(query.toLowerCase()) }) return ( <form action="/projects/1/assignee" method="post"> <Combobox value={selectedPerson} onChange={setSelectedPerson}
name="assignee"> <Combobox.Input onChange={(event) => setQuery(event.target.value)} displayValue={(person) => person.name} /> <Combobox.Options> {filteredPeople.map((person) => ( <Combobox.Option key={person.id} value={person}> {person.name} </Combobox.Option> ))} </Combobox.Options> </Combobox> <button>Submit</button> </form> ) }
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 Combobox.Option
based on the query
value.
import { useState } from 'react' import { Combobox } from '@headlessui/react' 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' }, ] function Example() { const [selectedPerson, setSelectedPerson] = useState(people[0]) const [query, setQuery] = useState('') const filteredPeople = query === '' ? people : people.filter((person) => { return person.name.toLowerCase().includes(query.toLowerCase()) }) return ( <Combobox value={selectedPerson} onChange={setSelectedPerson}> <Combobox.Input onChange={(event) => setQuery(event.target.value)} displayValue={(person) => person.name} /> <Combobox.Options>
{query.length > 0 && (<Combobox.Option value={{ id: null, name: query }}>Create "{query}"</Combobox.Option>)}{filteredPeople.map((person) => ( <Combobox.Option key={person.id} value={person}> {person.name} </Combobox.Option> ))} </Combobox.Options> </Combobox> ) }
Depending on what you're building it can sometimes make sense to render
additional information about the active option outside of the
<Combobox.Options>
. 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.
import { useState } from 'react' import { Combobox } from '@headlessui/react' 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' }, ] function MyCombobox() { const [selectedPerson, setSelectedPerson] = useState(people[0]) const [query, setQuery] = useState('') const filteredPeople = query === '' ? people : people.filter((person) => { return person.name.toLowerCase().includes(query.toLowerCase()) }) return ( <Combobox value={selectedPerson} onChange={setSelectedPerson}>
{({ activeOption }) => (<> <Combobox.Input onChange={(event) => setQuery(event.target.value)} displayValue={(person) => person.name} /> <Combobox.Options> {filteredPeople.map((person) => ( <Combobox.Option key={person.id} value={person}> {person.name} </Combobox.Option> ))} </Combobox.Options>{activeOption && (<div>The current active user is: {activeOption.name}</div>)}</> )} </Combobox> ) }
The activeOption
will be the value
of the current active Combobox.Option
.
By default, your Combobox.Options
instance will be shown/hidden automatically
based on the internal open
state tracked within the Combobox
component
itself.
import { useState } from 'react' import { Combobox } from '@headlessui/react' 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' }, ] function MyCombobox() { const [selectedPerson, setSelectedPerson] = useState(people[0]) const [query, setQuery] = useState('') const filteredPeople = query === '' ? people : people.filter((person) => { return person.name.toLowerCase().includes(query.toLowerCase()) }) return ( <Combobox value={selectedPerson} onChange={setSelectedPerson}> <Combobox.Input onChange={(event) => setQuery(event.target.value)} displayValue={(person) => person.name} /> {/* By default, this will automatically show/hide when typing in the Combobox.Input, or when pressing the Combobox.Button. */} <Combobox.Options> {filteredPeople.map((person) => ( <Combobox.Option key={person.id} value={person}> {person.name} </Combobox.Option> ))} </Combobox.Options> </Combobox> ) }
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 Combobox.Options
instance to tell it to always render, and inspect the open
render prop provided by Combobox
to control which element is shown/hidden yourself.
import { useState } from 'react' import { Combobox } from '@headlessui/react' 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' }, ] function MyCombobox() { const [selectedPerson, setSelectedPerson] = useState(people[0]) const [query, setQuery] = useState('') const filteredPeople = query === '' ? people : people.filter((person) => { return person.name.toLowerCase().includes(query.toLowerCase()) }) return ( <Combobox value={selectedPerson} onChange={setSelectedPerson}>
{({ open }) => (<> <Combobox.Input onChange={(event) => setQuery(event.target.value)} displayValue={(person) => person.name} />{open && (<div> {/* Using `static`, `Combobox.Options` is always rendered and ignores the `open` state. */}<Combobox.Options static>{filteredPeople.map((person) => ( <Combobox.Option key={person.id} value={person}> {person.name} </Combobox.Option> ))} </Combobox.Options> </div> )} </> )} </Combobox> ) }
Use the disabled
prop to disable a Combobox.Option
. This will make it unselectable via mouse and keyboard, and it will be skipped when pressing the up/down arrows.
import { useState } from 'react' import { Combobox } from '@headlessui/react' 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 }, ] function MyCombobox() { const [selectedPerson, setSelectedPerson] = useState(people[0]) const [query, setQuery] = useState('') const filteredPeople = query === '' ? people : people.filter((person) => { return person.name.toLowerCase().includes(query.toLowerCase()) }) return ( <Combobox value={selectedPerson} onChange={setSelectedPerson}> <Combobox.Input onChange={(event) => setQuery(event.target.value)} displayValue={(person) => person.name} /> <Combobox.Options> {filteredPeople.map((person) => ( /* Disabled options will be skipped by keyboard navigation. */ <Combobox.Option key={person.id} value={person}
disabled={person.unavailable}> <span className={person.unavailable ? 'opacity-75' : ''}> {person.name} </span> </Combobox.Option> ))} </Combobox.Options> </Combobox> ) }
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.
import { useState } from 'react' import { Combobox } from '@headlessui/react' 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 }, ] function MyCombobox() { const [selectedPerson, setSelectedPerson] = useState(people[0]) const [query, setQuery] = useState('') const filteredPeople = query === '' ? people : people.filter((person) => { return person.name.toLowerCase().includes(query.toLowerCase()) }) return (
<Combobox value={selectedPerson} onChange={setSelectedPerson} nullable><Combobox.Input onChange={(event) => setQuery(event.target.value)}displayValue={(person) => person?.name}/> <Combobox.Options> {filteredPeople.map((person) => ( <Combobox.Option key={person.id} value={person}> {person.name} </Combobox.Option> ))} </Combobox.Options> </Combobox> ) }
When the nullable
prop is used, clearing the input and navigating away from the element will invoke your onChange
and displayValue
callbacks 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 the combobox panel, use the provided Transition
component. All you need to do is wrap the Combobox.Options
in a <Transition>
, and the transition will be applied automatically.
import { useState } from 'react' import { Combobox, Transition } from '@headlessui/react' 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' }, ] function MyCombobox() { const [selectedPerson, setSelectedPerson] = useState(people[0]) const [query, setQuery] = useState('') const filteredPeople = query === '' ? people : people.filter((person) => { return person.name.toLowerCase().includes(query.toLowerCase()) }) return ( <Combobox value={selectedPerson} onChange={setSelectedPerson}> <Combobox.Input onChange={(event) => setQuery(event.target.value)} displayValue={(person) => person.name} />
<Transitionenter="transition duration-100 ease-out"enterFrom="transform scale-95 opacity-0"enterTo="transform scale-100 opacity-100"leave="transition duration-75 ease-out"leaveFrom="transform scale-100 opacity-100"leaveTo="transform scale-95 opacity-0"><Combobox.Options> {filteredPeople.map((person) => ( <Combobox.Option key={person.id} value={person}> {person.name} </Combobox.Option> ))} </Combobox.Options></Transition></Combobox> ) }
By default our built-in Transition
component automatically communicates with
the Combobox
components to handle the open/closed states. However, if you require
more control over this behavior, you can explicitly control it:
import { useState } from 'react' import { Combobox, Transition } from '@headlessui/react' 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' }, ] function MyCombobox() { const [selectedPerson, setSelectedPerson] = useState(people[0]) const [query, setQuery] = useState('') const filteredPeople = query === '' ? people : people.filter((person) => { return person.name.toLowerCase().includes(query.toLowerCase()) }) return ( <Combobox value={selectedPerson} onChange={setSelectedPerson}>
{({ open }) => (<><Combobox.Input onChange={(event) => setQuery(event.target.value)} displayValue={(person) => person.name} /> {/* Use the Transition + open render prop argument to add transitions. */} <Transitionshow={open}enter="transition duration-100 ease-out" enterFrom="transform scale-95 opacity-0" enterTo="transform scale-100 opacity-100" leave="transition duration-75 ease-out" leaveFrom="transform scale-100 opacity-100" leaveTo="transform scale-95 opacity-0" > {/* Don't forget to add `static` to your Combobox.Options! */}<Combobox.Options static>{filteredPeople.map((person) => ( <Combobox.Option key={person.id} value={person}> {person.name} </Combobox.Option> ))} </Combobox.Options> </Transition></>)}</Combobox> ) }
Because they're renderless, Headless UI components also compose well with other animation libraries in the React ecosystem like Framer Motion and React Spring.
By default, the Combobox
and its subcomponents each render a default element that is sensible for that component.
For example, Combobox.Label
renders a label
by default, Combobox.Input
renders an input
, Combobox.Button
renders a button
, Combobox.Options
renders a ul
, and Combobox.Option
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.
import { useState } from 'react' import { Combobox } from '@headlessui/react' 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' }, ] function MyCombobox() { const [selectedPerson, setSelectedPerson] = useState(people[0]) const [query, setQuery] = useState('') const filteredPeople = query === '' ? people : people.filter((person) => { return person.name.toLowerCase().includes(query.toLowerCase()) }) return ( /* Render a `div` instead of a React.Fragment */
<Combobox as="div" value={selectedPerson} onChange={setSelectedPerson}><Combobox.Input onChange={(event) => setQuery(event.target.value)} displayValue={(person) => person.name} /> {/* Render a `div` instead of a `ul` */}<Combobox.Options as="div">{filteredPeople.map((person) => ( /* Render a `span` instead of a `li` */<Combobox.Option as="span" key={person.id} value={person}>{person.name} </Combobox.Option> ))} </Combobox.Options> </Combobox> ) }
To tell an element to render its children directly with no wrapper element, use a Fragment
.
import { useState, Fragment } from 'react' import { Combobox } from '@headlessui/react' 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' }, ] function MyCombobox() { const [selectedPerson, setSelectedPerson] = useState(people[0]) const [query, setQuery] = useState('') const filteredPeople = query === '' ? people : people.filter((person) => { return person.name.toLowerCase().includes(query.toLowerCase()) }) return ( <Combobox value={selectedPerson} onChange={setSelectedPerson}> {/* Render a `Fragment` instead of an `input` */} <Combobox.Input
as={Fragment}onChange={(event) => setQuery(event.target.value)} displayValue={(person) => person.name} > <input /> </Combobox.Input> <Combobox.Options> {filteredPeople.map((person) => ( <Combobox.Option key={person.id} value={person}> {person.name} </Combobox.Option> ))} </Combobox.Options> </Combobox> ) }
When a Combobox is toggled open, the Combobox.Input
stays focused.
The Combobox.Button
is ignored for the default tab flow, this means that pressing Tab
in the Combobox.Input
will skip passed the Combobox.Button
.
Clicking a Combobox.Button
toggles the options list open and closed. Clicking anywhere outside of the options list will close the combobox.
Command | Description |
ArrowDown, or ArrowUp when | Opens combobox and focuses the selected item |
Enter, Space, ArrowDown, or ArrowUp when | 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 |
Prop | Default | Description |
as | Fragment | String | Component The element or component the |
disabled | false | Boolean Use this to disable the entire combobox component & related children. |
value | — | T The selected value. |
onChange | — | (value: T) => void The function to call when a new option is selected. |
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. |
Render Prop | Description |
open |
Whether or not the combobox is open. |
disabled |
Whether or not the combobox is disabled. |
activeIndex |
The index of the active option or null if none is active. |
activeOption |
The active option or null if none is active. |
Prop | Default | Description |
as | input | String | Component The element or component the |
displayValue | — | (item: T) => string The string representation of your |
Render Prop | Description |
open |
Whether or not the Combobox is open. |
disabled |
Whether or not the Combobox is disabled. |
Prop | Default | Description |
as | button | String | Component The element or component the |
Render Prop | Description |
open |
Whether or not the Combobox is open. |
disabled |
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 |
Render Prop | Description |
open |
Whether or not the Combobox is open. |
disabled |
Whether or not the Combobox is disabled. |
Prop | Default | Description |
as | ul | String | Component The element or component the |
static | false | Boolean Whether the element should ignore the internally managed open/closed state. Note: |
unmount | true | Boolean Whether the element should be unmounted or hidden based on the open/closed state. Note: |
hold | false | boolean Whether or not the active option should stay active even when the mouse leaves the active option. |
Render Prop | Description |
open |
Whether or not the Combobox is open. |
Prop | Default | Description |
value | — | T The option value. |
as | li | String | Component The element or component the |
disabled | false | Boolean Whether or not the option should be disabled for keyboard navigation and ARIA purposes. |
Render Prop | Description |
active |
Whether or not the option is the active/focused option. |
selected |
Whether or not the option is the selected option. |
disabled |
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.