Let me give you additional context for my actual combobox component (installed using solidui – using kobalte underneath the hood). 
```
// ==== Components ====
import {
  ComboboxContent,
  ComboboxControl,
  ComboboxInput,
  ComboboxItem,
  ComboboxItemIndicator,
  ComboboxItemLabel,
  Combobox,
  ComboboxTrigger
} from '@/components/ui/combobox'
import {
  TextFieldDescription,
  TextFieldErrorMessage,
  TextFieldLabel
} from '../ui/text-field'
import { Show, For } from 'solid-js'
// ==== Utils ====
import { cn } from '@/lib/utils'
// ==== Hooks ====
import { useStore } from '@tanstack/solid-form'
import { useFieldContext } from './form-context'
// ==== Types ====
import { SelectOption } from '@/lib/types'

interface FormComboboxProps {
  options: Array<typeof SelectOption.infer>
  placeholder?: string
  helpertext?: string
  label?: string
}

export default function FormCombobox(props: FormComboboxProps) {
  const field = useFieldContext<string>()
  const errors = useStore(field().store, (state) => state.meta.errors)

  const getLabel = (value: string) => {
    return props.options.find(opt => opt.value === value)?.label
  }

  return (
    <Combobox
      validationState={errors().length > 0 ? 'invalid' : 'valid'}
      options={props.options.map(o => o.value)}
      value={field().state.value}
      onChange={(v) => field().handleChange(v!)}
      placeholder={props.placeholder}
      triggerMode='focus'
      defaultFilter={(option, inputValue) => {
        const optionName = getLabel(option)
        if (!optionName) return false
        return optionName.toLowerCase().includes(inputValue.toLowerCase())
      }}
      itemComponent={(props) => (
        <ComboboxItem item={props.item}>
          <ComboboxItemLabel>{getLabel(props.item.rawValue)}</ComboboxItemLabel>
          <ComboboxItemIndicator />
        </ComboboxItem>
      )}
    >
      <Show when={props.label}>
        <TextFieldLabel for={field.name}>
          {props.label}
        </TextFieldLabel>
      </Show>
      <ComboboxControl
        aria-label={props.label}
        class={cn(
          "my-1 py-0 border-brand-light-dark",
          "focus-within:border-brand-primary",
          "focus-within:ring-[3px]",
          "focus-within:ring-brand-primary/30",
          "h-8",
          errors().length > 0 && 'border-destructive focus-within:border-destructive focus-within:ring-destructive/30'
        )}
      >
        <ComboboxInput value={field().state.value ? getLabel(field().state.value) : ''} />
        <ComboboxTrigger />
      </ComboboxControl>
      <Show when={props.helpertext && errors().length === 0}>
        <TextFieldDescription class="mt-2">
          {props.helpertext}
        </TextFieldDescription>
      </Show>
      <Show when={errors().length > 0 ? true : false}>
        <For each={errors()}>
          {(err) => (
            <TextFieldErrorMessage class="mt-1">
              {err.message}
            </TextFieldErrorMessage>
          )}
        </For>
      </Show>
      <ComboboxContent />
    </Combobox>
  )

}
```