Combobox

Combobox is a text field with a list of options under it. The list narrows as you type. Type “j”, then use the arrow keys and Enter, or click an option:

Chosen: nothing yet

ComboboxDemo.tsx

import { Paragraph, View } from '@hozo/core'
import { Combobox } from '@hozo/ui'
import { useState } from 'react'

const COUNTRIES = [
  { value: 'jp', label: 'Japan' },
  { value: 'jm', label: 'Jamaica' },
  { value: 'jo', label: 'Jordan' },
  { value: 'ke', label: 'Kenya' },
  { value: 'kr', label: 'South Korea' },
  { value: 'nz', label: 'New Zealand' },
]

export function ComboboxDemo() {
  const [country, setCountry] = useState<string>()
  return (
    <View className="w-full max-w-xs gap-3">
      <Combobox
        options={COUNTRIES}
        accessibilityLabel="Country"
        placeholder="Type a country"
        value={country}
        onValueChange={setCountry}
      />
      <Paragraph className="text-sm text-hozo-text-body">
        {`Chosen: ${country ?? 'nothing yet'}`}
      </Paragraph>
    </View>
  )
}

• options: { value, label, disabled? } for each option.
• value and onValueChange hold the chosen option’s value.
• Focus stays in the field. The arrows move a highlight through the list with aria-activedescendant, so typing can carry on at any moment. Enter chooses the highlighted option, and Escape closes the list.
• match is starts by default, or contains to match anywhere in a label.
• autocomplete is list by default, which filters the list. both also completes the rest of the first match inline, and none shows every option.
• emptyMessage is shown when nothing matches.
• accessibilityLabel names the field. placeholder is a hint inside it, not a label.