可输入的下拉 Combobox

<div data-xxd-combobox style="width:100%;max-width:240px"><input class="xxd-input" placeholder="输入筛选" aria-label="主色"><ul class="xxd-listbox"><li class="xxd-option" data-value="ink">墨色</li><li class="xxd-option" data-value="#1d9bf0">X 蓝</li><li class="xxd-option" data-value="#3b74b8">湖蓝</li><li class="xxd-option" data-value="#5a8a3c">苔绿</li></ul></div>
<div data-xxd-combobox data-multiple data-creatable style="width:100%;max-width:280px"><div class="xxd-taginput"><input placeholder="选或新建标签" aria-label="标签"></div><ul class="xxd-listbox"><li class="xxd-option">海报</li><li class="xxd-option">封面</li><li class="xxd-option">卡片</li></ul></div>

export function ComboboxDemo() {
  const [value, setValue] = useState<string | null>("湖蓝");
  return (
    <Combobox value={value} onValueChange={(v) => setValue(v as string | null)} items={accents}>
      <Combobox.TriggerInput placeholder="输入筛选" />
      <Combobox.Content>
        <Combobox.Empty />
        <Combobox.List>
          {(item: string) => (
            <Combobox.Item key={item} value={item}>
              {item}
            </Combobox.Item>
          )}
        </Combobox.List>
      </Combobox.Content>
    </Combobox>
  );
}