Combobox
- Home
- Combobox
Basic
Sample Code
Show Code
Copy Code
import { useState } from 'react'
import {
Combobox,
ComboboxButton,
ComboboxInput,
ComboboxOption,
ComboboxOptions,
} from '@headlessui/react'
import { Icon } from '@iconify/react'
import clsx from 'clsx'
// Define the type for the person object
interface Person {
id: number
name: string
}
const people: Person[] = [
{ id: 1, name: 'Tom Cook' },
{ id: 2, name: 'Wade Cooper' },
{ id: 3, name: 'Tanya Fox' },
{ id: 4, name: 'Arlene Mccoy' },
{ id: 5, name: 'Devon Webb' },
]
const BasicComboCode = () => {
const [query, setQuery] = useState<string>('')
const [selected, setSelected] = useState<Person>(people[1])
const filteredPeople =
query === ''
? people
: people.filter((person) => {
return person.name.toLowerCase().includes(query.toLowerCase())
})
return (
<div>
<div className='max-w-sm'>
<Combobox
value={selected}
onChange={(value: Person) => setSelected(value)}
onClose={() => setQuery('')}>
<div className='relative'>
<ComboboxInput
className={clsx(
'w-full ui-form-control rounded-md p-2',
'focus:outline-none focus:dark:ring-2 focus:dark:ring-white/25'
)}
displayValue={(person: Person) => person?.name}
onChange={(event) => setQuery(event.target.value)}
/>
<ComboboxButton className='group absolute inset-y-0 right-0 px-2.5'>
<Icon icon='solar:alt-arrow-down-outline' height={20} />
</ComboboxButton>
</div>
<ComboboxOptions
anchor='bottom'
transition
className={clsx(
'absolute z-10 mt-1 max-h-60 w-[var(--input-width)] overflow-auto rounded-md bg-white dark:bg-dark py-1 text-base shadow-md dark:shadow-dark-md ring-1 ring-border ring-opacity-5 focus:outline-none sm:text-sm',
'transition duration-100 ease-in data-[leave]:data-[closed]:opacity-0'
)}>
{filteredPeople.map((person) => (
<ComboboxOption
key={person.id}
value={person}
className='group flex cursor-pointer ui-dropdown-item bg-hover dark:bg-hover hover:text-primary text-primary dark:text-primary data-[focus]:bg-hover data-[focus]:text-primary'>
<Icon
icon='solar:check-read-linear'
className='invisible group-data-[selected]:visible'
height={20}
/>
<div className='text-sm text-ld hover:text-primary data-[focus]:text-primary'>
{person.name}
</div>
</ComboboxOption>
))}
</ComboboxOptions>
</Combobox>
</div>
</div>
)
}
export default BasicComboCode
With Label
Sample Code
Show Code
Copy Code
import { useState } from 'react'
import {
Field,
Combobox,
ComboboxInput,
ComboboxOptions,
ComboboxOption,
Label,
} from '@headlessui/react'
// Define the type for the person object
interface Person {
id: number
name: string
}
const people: Person[] = [
{ 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 ComboWithLableCode = () => {
const [selectedPerson, setSelectedPerson] = useState<Person | null>(people[0])
const [query, setQuery] = useState('')
const filteredPeople =
query === ''
? people
: people.filter((person) => {
return person.name.toLowerCase().includes(query.toLowerCase())
})
return (
<div>
<div className='max-w-sm'>
<Field className='flex gap-3 items-center'>
<Label className='text-ld'>Assignee:</Label>
<Combobox
value={selectedPerson}
onChange={setSelectedPerson}
onClose={() => setQuery('')}>
<ComboboxInput
displayValue={(person: Person | null) =>
person ? person.name : ''
}
onChange={(event) => setQuery(event.target.value)}
className='w-full ui-form-control rounded-md p-2'
/>
<ComboboxOptions
anchor='bottom'
className='absolute z-10 mt-1 max-h-60 w-[var(--input-width)] overflow-auto rounded-md bg-white dark:bg-dark py-1 text-base shadow-md dark:shadow-dark-md ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm empty:invisible'>
{filteredPeople.map((person) => (
<ComboboxOption
key={person.id}
value={person}
className='group flex cursor-pointer ui-dropdown-item bg-hover dark:bg-hover text-ld hover:text-primary dark:hover:text-primary data-[focus]:bg-hover data-[focus]:text-primary'>
{person.name}
</ComboboxOption>
))}
</ComboboxOptions>
</Combobox>
</Field>
</div>
</div>
)
}
export default ComboWithLableCode
Disabled
Sample Code
Show Code
Copy Code
import { useState } from 'react'
import {
Field,
Combobox,
ComboboxInput,
ComboboxOptions,
ComboboxOption,
Label,
} from '@headlessui/react'
import DisableTabCode from '@/app/components/headless-ui/Tabs/Code/DisableTabCode'
// Define the type for the person object
interface Person {
id: number
name: string
}
const people: Person[] = [
{ 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 DisabledCode = () => {
const [selectedPerson, setSelectedPerson] = useState<Person | null>(people[0])
const [query, setQuery] = useState('')
const filteredPeople =
query === ''
? people
: people.filter((person) => {
return person.name.toLowerCase().includes(query.toLowerCase())
})
return (
<div>
<div className='max-w-sm'>
<Field className='flex gap-3 items-center' disabled>
<Label className='text-ld'>Select:</Label>
<Combobox
value={selectedPerson}
onChange={setSelectedPerson}
onClose={() => setQuery('')}>
<ComboboxInput
displayValue={(person: Person | null) =>
person ? person.name : ''
}
onChange={(event) => setQuery(event.target.value)}
className='w-full ui-form-control rounded-md p-2'
/>
<ComboboxOptions
anchor='bottom'
className='absolute z-10 mt-1 max-h-60 w-[var(--input-width)] overflow-auto rounded-md bg-white dark:bg-dark py-1 text-base shadow-md dark:shadow-dark-md ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm empty:invisible'>
{filteredPeople.map((person) => (
<ComboboxOption
key={person.id}
value={person}
className='group flex cursor-pointer ui-dropdown-item bg-hover dark:bg-hover text-ld hover:text-primary dark:hover:text-primary data-[focus]:bg-hover data-[focus]:text-primary'>
{person.name}
</ComboboxOption>
))}
</ComboboxOptions>
</Combobox>
</Field>
</div>
</div>
)
}
export default DisabledCode
Disabled Combo Option
Sample Code
Show Code
Copy Code
import { useState } from 'react'
import {
Field,
Combobox,
ComboboxInput,
ComboboxOptions,
ComboboxOption,
Label,
} from '@headlessui/react'
// Define the type for the person object
interface Person {
id: number
name: string
available: boolean
}
const people: Person[] = [
{ id: 1, name: 'Durward Reynolds', available: true },
{ id: 2, name: 'Kenton Towne', available: true },
{ id: 3, name: 'Therese Wunsch', available: true },
{ id: 4, name: 'Benedict Kessler', available: false },
{ id: 5, name: 'Katelyn Rohan', available: true },
]
const DisableComboOptCode = () => {
const [selectedPerson, setSelectedPerson] = useState<Person | null>(people[0])
const [query, setQuery] = useState('')
const filteredPeople =
query === ''
? people
: people.filter((person) => {
return person.name.toLowerCase().includes(query.toLowerCase())
})
return (
<div>
<div className='max-w-sm'>
<Field className='flex gap-3 items-center'>
<Label className='text-ld'>Assignee:</Label>
<Combobox
value={selectedPerson}
onChange={setSelectedPerson}
onClose={() => setQuery('')}>
<ComboboxInput
displayValue={(person: Person | null) =>
person ? person.name : ''
}
onChange={(event) => setQuery(event.target.value)}
className='w-full ui-form-control rounded-md p-2'
/>
<ComboboxOptions
anchor='bottom'
className='absolute z-10 mt-1 max-h-60 w-[var(--input-width)] overflow-auto rounded-md bg-white dark:bg-dark py-1 text-base shadow-md dark:shadow-dark-md ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm empty:invisible'>
{filteredPeople.map((person) => (
<ComboboxOption
key={person.id}
value={person}
disabled={!person.available}
className='group flex cursor-pointer ui-dropdown-item bg-hover dark:bg-hover text-ld hover:text-primary dark:hover:text-primary data-[focus]:bg-hover data-[focus]:text-primary data-[disabled]:opacity-50 data-[disabled]:hover:text-darklink'>
{person.name}
</ComboboxOption>
))}
</ComboboxOptions>
</Combobox>
</Field>
</div>
</div>
)
}
export default DisableComboOptCode
HTML Forms
Sample Code
Show Code
Copy Code
import { useState } from 'react'
import {
Combobox,
ComboboxInput,
ComboboxOption,
ComboboxOptions,
} 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' },
]
const HtmlFormsCodes = () => {
const [selectedPerson, setSelectedPerson] = useState<string>(people[0].name)
const [query, setQuery] = useState('')
const filteredPeople =
query === ''
? people
: people.filter((person) =>
person.name.toLowerCase().includes(query.toLowerCase())
)
return (
<div>
<div className='max-w-sm'>
<form
action='/projects/1/assignee'
method='post'
className='flex gap-3'>
<Combobox
name='assignee'
value={selectedPerson}
onChange={(value) => setSelectedPerson(value as string)}
onClose={() => setQuery('')}>
<ComboboxInput
aria-label='Assignee'
displayValue={() => selectedPerson}
onChange={(event) => setQuery(event.target.value)}
className='w-full ui-form-control rounded-md p-2'
/>
<ComboboxOptions
anchor='bottom'
className='absolute z-10 mt-1 max-h-60 w-[var(--input-width)] overflow-auto rounded-md bg-white dark:bg-dark py-1 text-base shadow-md dark:shadow-dark-md ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm empty:invisible'>
{filteredPeople.map((person) => (
<ComboboxOption
key={person.id}
value={person.name}
className='group flex cursor-pointer ui-dropdown-item bg-hover dark:bg-hover text-ld hover:text-primary dark:hover:text-primary data-[focus]:bg-hover data-[focus]:text-primary'>
{person.name}
</ComboboxOption>
))}
</ComboboxOptions>
</Combobox>
<button type='submit' className='ui-button bg-primary'>
Submit
</button>
</form>
</div>
</div>
)
}
export default HtmlFormsCodes
Dropdown Position
Sample Code
Show Code
Copy Code
import { useState } from 'react'
import {
Field,
Combobox,
ComboboxInput,
ComboboxOptions,
ComboboxOption,
Label,
} from '@headlessui/react'
// Define the type for the person object
interface Person {
id: number
name: string
}
const people: Person[] = [
{ 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 ComboPositionCode = () => {
const [selectedPerson, setSelectedPerson] = useState<Person | null>(people[0])
const [query, setQuery] = useState('')
const filteredPeople =
query === ''
? people
: people.filter((person) => {
return person.name.toLowerCase().includes(query.toLowerCase())
})
return (
<div>
<div className='max-w-sm'>
<Field>
<Combobox
value={selectedPerson}
onChange={setSelectedPerson}
onClose={() => setQuery('')}>
<ComboboxInput
displayValue={(person: Person | null) =>
person ? person.name : ''
}
onChange={(event) => setQuery(event.target.value)}
className='w-full ui-form-control rounded-md p-2'
/>
<ComboboxOptions
anchor='top start'
className='absolute z-10 mt-1 max-h-60 w-[var(--input-width)] overflow-auto rounded-md bg-white dark:bg-dark py-1 text-base shadow-md dark:shadow-dark-md ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm empty:invisible'>
{filteredPeople.map((person) => (
<ComboboxOption
key={person.id}
value={person}
className='group flex cursor-pointer ui-dropdown-item bg-hover dark:bg-hover text-ld hover:text-primary dark:hover:text-primary data-[focus]:bg-hover data-[focus]:text-primary'>
{person.name}
</ComboboxOption>
))}
</ComboboxOptions>
</Combobox>
</Field>
</div>
</div>
)
}
export default ComboPositionCode
Dropdown Width
With Transitions
With FramerMotion
Binding Values
Open On Focus
Rendering As Different Elements
Binding Objects as Values
Rendering Active Option Details
Virtual Scrolling
Selecting Multiple Values
- Durward Reynolds
- Kenton Towne
Settings
Theme Option
Theme Direction
Theme Colors
BLUE_THEME
AQUA_THEME
PURPLE_THEME
GREEN_THEME
CYAN_THEME
ORANGE_THEME
Layout Type
Container Option
Sidebar Type
Card With
Theme Border Radius
Current Value: 7