Mantine Combobox スキル

概要

Combobox は、セレクト型の UI を構築するための低レベルのプリミティブを提供します。組み込みの Select、Autocomplete、TagsInput コンポーネントはすべてこの上に構築されています。

コアワークフロー

1. ストアを作成

const combobox = useCombobox({
  onDropdownClose: () => combobox.resetSelectedOption(),
  onDropdownOpen: () => combobox.selectFirstOption(),
});

2. 構造をレンダリング

<Combobox store={combobox} onOptionSubmit={handleSubmit}>
  <Combobox.Target>
    <InputBase
      component="button"
      pointer
      rightSection={<Combobox.Chevron />}
      onClick={() => combobox.toggleDropdown()}
    >
      {value || <Input.Placeholder>Pick value</Input.Placeholder>}
    </InputBase>
  </Combobox.Target>
  <Combobox.Dropdown>
    <Combobox.Options>
      {options.map((item) => (
        <Combobox.Option value={item} key={item}>{item}</Combobox.Option>
      ))}
    </Combobox.Options>
  </Combobox.Dropdown>
</Combobox>

3. サブミットを処理

const handleSubmit = (val: string) => {
  setValue(val);
  combobox.closeDropdown();
};

ターゲットタイプ

参考資料

• references/api.md — 完全な API: useCombobox オプションとストア、すべてのサブコンポーネント props、CSS 変数、Styles API セレクタ
• references/patterns.md — コード例: 検索可能なセレクト、ピル付きマルチセレクト、グループ、カスタムレンダリング、クリアボタン、フォーム統合