Combobox

<Label htmlFor="typeface-trigger">Editor typeface</Label>
<Popover open={open} onOpenChange={setOpen}>
  <PopoverTrigger render={<Button id="typeface-trigger" variant="outline" role="combobox" className="w-56 justify-between" />}>
  buena mono Regular
  <ChevronsUpDown className="opacity-50" />
  </PopoverTrigger>
  <PopoverContent className="w-56 p-0">
    <Command>
      <CommandInput placeholder="Search styles..." />
      <CommandList>
        <CommandGroup heading="buena mono">…</CommandGroup>
        <CommandGroup heading="buena sans">…</CommandGroup>
      </CommandList>
    </Command>
  </PopoverContent>
</Popover>

{/* Disabled */}
<Button variant="outline" role="combobox" disabled className="w-52 justify-between">
  buena mono Regular
  <ChevronsUpDown className="opacity-50" />
</Button>

{/* Invalid */}
<Button variant="outline" role="combobox" aria-invalid="true" className="w-52 justify-between border-error">
  Select a style
</Button>
<p className="text-xs text-error">Pick a style before publishing.</p>

{/* Clearable */}
{value && (
  <button aria-label="Clear selection" onClick={() => setValue("")}>
    <X className="size-4" />
  </button>
)}

<CommandItem value={style.value} onSelect={setValue}>
  <Hash className="size-4 text-text-tertiary" />
  <span className="flex flex-col">
    <span>{style.label}</span>
    <span className="text-xs text-text-tertiary">{style.meta}</span>
  </span>
  <Check className={cn("ml-auto", value === style.value ? "opacity-100" : "opacity-0")} />
</CommandItem>

const [values, setValues] = useState(["mono-regular"]);

<PopoverTrigger render={<Button role="combobox" className="h-auto min-h-9" />}>
  {values.map((v) => (
    <span className="rounded-md border px-1.5 py-0.5 text-xs">
      {label(v)}
      <button onClick={() => remove(v)}><X className="size-3" /></button>
    </span>
  ))}
</PopoverTrigger>
{/* items toggle in/out of the array instead of closing */}
<CommandItem onSelect={() => toggle(style.value)}>
  {style.label}
  <Check className={values.includes(style.value) ? "opacity-100" : "opacity-0"} />
</CommandItem>