Tailwind Admin Template

Component Library

Browse and explore components

Combobox

A Combobox is a UI component that combines a text input with a list of selectable options.

Basic

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 hover:cursor-pointer'>
              <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-header py-1 text-base shadow-md dark:shadow-dark-md ring-1 ring-black/10 dark:ring-white/20 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 dark:group-data-[selected]:text-white'
                  height={20}
                />
                <div className='text-sm text-ld hover:text-primary dark:hover:text-white data-[focus]:text-primary'>
                  {person.name}
                </div>
              </ComboboxOption>
            ))}
          </ComboboxOptions>
        </Combobox>
      </div>
    </div>
  )
}

export default BasicComboCode

With Label

Assignee:

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-header 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

Select:

import { useState } from 'react'
import {
  Field,
  Combobox,
  ComboboxInput,
  ComboboxOptions,
  ComboboxOption,
  Label,
} from '@headlessui/react'
import DisableTabCode from '@/app/components/component-page/headless/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-header 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

Assignee:

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-header 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

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-header 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

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-header 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

'use client'

import React, { useState } from 'react'

import {
  Field,
  Combobox,
  ComboboxInput,
  ComboboxOptions,
  ComboboxOption,
} 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 ComboWidthCode = () => {
  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 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='bottom'
              className='absolute z-10 mt-1 max-h-60 w-56 overflow-auto rounded-md bg-white dark:bg-dark-header 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>
    </>
  )
}

export default ComboWidthCode

With Transitions

'use client'

import { useState } from 'react'
import {
  Field,
  Combobox,
  ComboboxInput,
  ComboboxOptions,
  ComboboxOption,
} 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 WithTransitionsCode = () => {
  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 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
              transition
              anchor='bottom'
              className='origin-top border transition duration-200 ease-out empty:invisible data-[closed]:scale-95 data-[closed]:opacity-0 absolute z-10 mt-1 max-h-60 w-[var(--input-width)]  overflow-auto rounded-md bg-white dark:bg-dark-header py-1 text-base shadow-md dark:shadow-dark-md ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm'>
              {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>
    </>
  )
}

export default WithTransitionsCode

With FramerMotion

'use client'

import { useState } from 'react'
import {
  Combobox,
  ComboboxInput,
  ComboboxOption,
  ComboboxOptions,
} from '@headlessui/react'
import { AnimatePresence, motion } from 'framer-motion'

// 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 WithFramerMotionCode = () => {
  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 className='max-w-sm'>
        <Combobox
          value={selectedPerson}
          onChange={setSelectedPerson}
          onClose={() => setQuery('')}>
          {({ open }) => (
            <div>
              <ComboboxInput
                displayValue={(person: Person | null) =>
                  person ? person.name : ''
                }
                onChange={(event) => setQuery(event.target.value)}
                className='w-full ui-form-control rounded-md p-2'
              />
              <AnimatePresence>
                {open && (
                  <ComboboxOptions
                    static
                    as={motion.div}
                    initial={{ opacity: 0, scale: 0.95 }}
                    animate={{ opacity: 1, scale: 1 }}
                    exit={{ opacity: 0, scale: 0.95 }}
                    anchor='bottom'
                    className='origin-top empty:invisible data-[closed]:scale-95 data-[closed]:opacity-0 absolute z-10 mt-1 max-h-60 w-[var(--input-width)]  overflow-auto rounded-md bg-white dark:bg-dark-header py-1 text-base shadow-md dark:shadow-dark-md ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm'
                    onAnimationComplete={() => setQuery('')}>
                    {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>
                )}
              </AnimatePresence>
            </div>
          )}
        </Combobox>
      </div>
    </>
  )
}

export default WithFramerMotionCode

Binding Values

'use client'

import { useState } from 'react'
import {
  Combobox,
  ComboboxInput,
  ComboboxOption,
  ComboboxOptions,
} from '@headlessui/react'

const people = [
  'Durward Reynolds',
  'Kenton Towne',
  'Therese Wunsch',
  'Benedict Kessler',
  'Katelyn Rohan',
]

const BindingStringAsValueCode = () => {
  const [selectedPerson, setSelectedPerson] = useState(people[0])
  const [query, setQuery] = useState('')

  const filteredPeople =
    query === ''
      ? people
      : people.filter((person) => {
          return person.toLowerCase().includes(query.toLowerCase())
        })

  const handleSelection = (person: any) => {
    setSelectedPerson(person)
    setQuery('') // Reset query after selection
  }

  return (
    <>
      <div className='max-w-sm'>
        <Combobox value={selectedPerson} onChange={handleSelection}>
          <ComboboxInput
            aria-label='Assignee'
            onChange={(event) => setQuery(event.target.value)}
            value={query} // Bind input to the query state
            className='w-full ui-form-control rounded-md p-2'
          />
          <ComboboxOptions
            anchor='bottom'
            className='origin-top border transition duration-200 ease-out empty:invisible data-[closed]:scale-95 data-[closed]:opacity-0 absolute z-10 mt-1 max-h-60 w-[var(--input-width)]  overflow-auto rounded-md bg-white dark:bg-dark-header py-1 text-base shadow-md dark:shadow-dark-md ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm'>
            {filteredPeople.map((person) => (
              <ComboboxOption
                key={person}
                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}
              </ComboboxOption>
            ))}
          </ComboboxOptions>
        </Combobox>
      </div>
    </>
  )
}

export default BindingStringAsValueCode

Open On Focus

'use client'

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 ComboOnFocusCode = () => {
  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 (
    <>
      <div className='max-w-sm'>
        <Combobox
          immediate
          value={selectedPerson}
          onChange={() => setSelectedPerson}
          onClose={() => setQuery('')}>
          <ComboboxInput
            aria-label='Assignee'
            displayValue={(person: any) => person?.name}
            onChange={(event) => setQuery(event.target.value)}
            className='w-full ui-form-control rounded-md p-2'
          />
          <ComboboxOptions
            anchor='bottom'
            className='origin-top border transition duration-200 ease-out empty:invisible data-[closed]:scale-95 data-[closed]:opacity-0 absolute z-10 mt-1 max-h-60 w-[var(--input-width)]  overflow-auto rounded-md bg-white dark:bg-dark-header py-1 text-base shadow-md dark:shadow-dark-md ring-1 ring-black/10 focus:outline-none sm:text-sm'>
            {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-white  data-[focus]:bg-hover data-[focus]:text-primary'>
                {person.name}
              </ComboboxOption>
            ))}
          </ComboboxOptions>
        </Combobox>
      </div>
    </>
  )
}

export default ComboOnFocusCode

Rendering As Different Elements

'use client'

import { forwardRef, useState } from 'react'
import {
  Combobox,
  ComboboxButton,
  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 MyCustomButton = forwardRef<HTMLButtonElement, any>((props, ref) => {
  return <button ref={ref} {...props} />
})

const RenderAsDiffElementsCode = () => {
  const [selectedPerson, setSelectedPerson] = useState(people[0])
  const [query, setQuery] = useState('')

  const filteredPeople =
    query === ''
      ? people
      : people.filter((person) =>
          person.name.toLowerCase().includes(query.toLowerCase())
        )

  return (
    <>
      <div className='max-w-sm'>
        <Combobox
          value={selectedPerson}
          onChange={() => setSelectedPerson}
          onClose={() => setQuery('')}>
          <span className='flex gap-3'>
            <ComboboxInput
              aria-label='Assignee'
              displayValue={(person: any) => person?.name}
              onChange={(event) => setQuery(event.target.value)}
              className='w-full ui-form-control rounded-md p-2'
            />
            <ComboboxButton
              as={MyCustomButton}
              className='ui-button bg-primary text-white'>
              Open
            </ComboboxButton>
          </span>
          <ComboboxOptions
            as='ul'
            className='origin-top border transition duration-200 ease-out empty:invisible data-[closed]:scale-95 data-[closed]:opacity-0 absolute z-10 mt-1 max-h-60 w-[var(--input-width)]  overflow-auto rounded-md bg-white dark:bg-dark-header py-1 text-base shadow-md dark:shadow-dark-md ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm'>
            {filteredPeople.map((person) => (
              <ComboboxOption
                as='li'
                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-white data-[focus]:bg-hover data-[focus]:text-primary'>
                {person.name}
              </ComboboxOption>
            ))}
          </ComboboxOptions>
        </Combobox>
      </div>
    </>
  )
}

export default RenderAsDiffElementsCode

Binding Objects as Values

'use client'

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 BindingValuesCode = () => {
  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 (
    <>
      <div className='max-w-sm'>
        <Combobox
          value={selectedPerson}
          onChange={() => setSelectedPerson}
          onClose={() => setQuery('')}>
          <ComboboxInput
            aria-label='Assignee'
            displayValue={(person: any) => person?.name}
            onChange={(event) => setQuery(event.target.value)}
            className='w-full ui-form-control rounded-md p-2'
          />
          <ComboboxOptions
            anchor='bottom'
            className='origin-top border transition duration-200 ease-out empty:invisible data-[closed]:scale-95 data-[closed]:opacity-0 absolute z-10 mt-1 max-h-60 w-[var(--input-width)]  overflow-auto rounded-md bg-white dark:bg-dark-header py-1 text-base shadow-md dark:shadow-dark-md ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm'>
            {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>
      </div>
    </>
  )
}

export default BindingValuesCode

Rendering Active Option Details

'use client'

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 AcrtiveOptionDetailsCode = () => {
  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 (
    <>
      <div className='max-w-sm'>
        <Combobox
          value={selectedPerson}
          onChange={() => setSelectedPerson}
          onClose={() => setQuery('')}>
          {({ activeOption }) => (
            <div>
              <ComboboxInput
                aria-label='Assignee'
                displayValue={(person: any) => person?.name}
                onChange={(event) => setQuery(event.target.value)}
                className='w-full ui-form-control rounded-md p-2'
              />
              <ComboboxOptions
                anchor='top'
                className='origin-top border transition duration-200 ease-out empty:invisible data-[closed]:scale-95 data-[closed]:opacity-0 absolute z-10 mt-1 max-h-60 w-[var(--input-width)]  overflow-auto rounded-md bg-white dark:bg-dark-header py-1 text-base shadow-md dark:shadow-dark-md ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm'>
                {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>
              {activeOption && (
                <p className='text-ld'>
                  The currently focused user is: <b>{activeOption.name}</b>
                </p>
              )}
            </div>
          )}
        </Combobox>
      </div>
    </>
  )
}

export default AcrtiveOptionDetailsCode

Virtual Scrolling

'use client'

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' },
  // +1000 more people
]

const VirtualScrollCode = () => {
  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 (
    <>
      <div className='max-w-sm'>
        <Combobox
          value={selectedPerson}
          virtual={{ options: filteredPeople }}
          onChange={() => setSelectedPerson}
          onClose={() => setQuery('')}>
          <ComboboxInput
            aria-label='Assignee'
            displayValue={(person: any) => person?.name}
            onChange={(event) => setQuery(event.target.value)}
            className='w-full ui-form-control rounded-md p-2'
          />
          <ComboboxOptions
            anchor='bottom'
            className='origin-top border transition duration-200 ease-out empty:invisible data-[closed]:scale-95 data-[closed]:opacity-0 absolute z-10 mt-1 max-h-60 w-[var(--input-width)]  overflow-auto rounded-md bg-white dark:bg-dark-header py-1 text-base shadow-md dark:shadow-dark-md ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm'>
            {({ option: person }) => (
              <ComboboxOption
                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>
      </div>
    </>
  )
}

export default VirtualScrollCode

Selecting Multiple Values

Durward Reynolds
Kenton Towne

'use client'
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 MultipleSelectValCode = () => {
  const [selectedPeople, setSelectedPeople] = useState([people[0], people[1]])
  const [query, setQuery] = useState('')

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

  return (
    <>
      <div className='max-w-sm'>
        <Combobox
          multiple
          value={selectedPeople}
          onChange={setSelectedPeople}
          onClose={() => setQuery('')}>
          {selectedPeople.length > 0 && (
            <ul>
              {selectedPeople.map((person) => (
                <li key={person.id}>{person.name}</li>
              ))}
            </ul>
          )}
          <ComboboxInput
            aria-label='Assignees'
            onChange={(event) => setQuery(event.target.value)}
            className='w-full ui-form-control rounded-md p-2'
          />
          <ComboboxOptions
            anchor='bottom'
            className='origin-top border transition duration-200 ease-out empty:invisible data-[closed]:scale-95 data-[closed]:opacity-0 absolute z-10 mt-1 max-h-60 w-[var(--input-width)]  overflow-auto rounded-md bg-white dark:bg-dark-header py-1 text-base shadow-md dark:shadow-dark-md ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm'>
            {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>
      </div>
    </>
  )
}

export default MultipleSelectValCode

Component Library

FORMS

DATA DISPLAY

FEEDBACK

NAVIGATION

SURFACES

UTILS

CHARTS

Combobox

Basic

Component Code

With Label

Component Code

Disabled

Component Code

Disabled Combo Option

Component Code

HTML Forms

Component Code

Dropdown Position

Component Code

Dropdown Width

Component Code

With Transitions

Component Code

With FramerMotion

Component Code

Binding Values

Component Code

Open On Focus

Component Code

Rendering As Different Elements

Component Code

Binding Objects as Values

Component Code

Rendering Active Option Details

Component Code

Virtual Scrolling

Component Code

Selecting Multiple Values

Component Code