Headless Form Combobox

Combobox

Home
Combobox

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

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

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

Chat Application

eCommerce App

Notes App

Calendar App

Contact Application

Tickets App

Email App

Blog App

Chat Application

eCommerce App

Notes App

Calendar App

Contact Application

Tickets App

Email App

Blog App

HOME

APPS

UI ELEMENTS

FORM ELEMENTS

PAGES

WIDGETS

TABLES

CHARTS

ICONS

AUTH

Combobox

Basic

Sample Code

With Label

Sample Code

Disabled

Sample Code

Disabled Combo Option

Sample Code

HTML Forms

Sample Code

Dropdown Position

Sample Code

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