--- title: Autocomplete description: "`Autocomplete`は、ユーザーのテキスト入力に応じて候補を表示するために使用されるコンポーネントです。" links: - source: https://github.com/yamada-ui/yamada-ui/tree/main/packages/react/src/components/autocomplete - storybook: https://yamada-ui.github.io/yamada-ui?path=/story/components-autocomplete--basic --- ```tsx アグモン ガブモン テントモン ピヨモン ゴマモン パルモン パタモン テイルモン ``` ## 使い方 ```tsx import { Autocomplete } from "@yamada-ui/react" ``` ```tsx import { Autocomplete } from "@/components/ui" ``` ```tsx import { Autocomplete } from "@workspaces/ui" ``` ```tsx ``` ### グループ化する ```tsx 成長期 アグモン ガブモン テントモン ピヨモン ゴマモン パルモン パタモン テイルモン グレイモン ガルルモン カブテリモン バードラモン イッカクモン トグモン エンジェモン メタルグレイモン ワーガルルモン アトラーカブテリモン ガルダモン ズドモン リリモン ホーリーエンジェモン エンジェウーモン ウォーグレイモン メタルガルルモン ヘラクルカブテリモン ホウオウモン ヴァイクモン ロゼモン ゴッドドラモン ホーリードラモン ``` ### itemsを使う ```tsx const items = useMemo( () => [ { label: "オメガモン", value: "オメガモン" }, { label: "ディアボロモン", value: "ディアボロモン" }, { items: [ { label: "アグモン", value: "アグモン" }, { label: "ガブモン", value: "ガブモン" }, { label: "テントモン", value: "テントモン" }, { label: "ピヨモン", value: "ピヨモン" }, { label: "ゴマモン", value: "ゴマモン" }, { label: "パルモン", value: "パルモン" }, { label: "パタモン", value: "パタモン" }, { label: "テイルモン", value: "テイルモン" }, ], label: "成長期", }, { items: [ { label: "グレイモン", value: "グレイモン" }, { label: "ガルルモン", value: "ガルルモン" }, { label: "カブテリモン", value: "カブテリモン" }, { label: "バードラモン", value: "バードラモン" }, { label: "イッカクモン", value: "イッカクモン" }, { label: "トグモン", value: "トグモン" }, { label: "エンジェモン", value: "エンジェモン" }, ], label: "成熟期", }, { items: [ { label: "メタルグレイモン", value: "メタルグレイモン" }, { label: "ワーガルルモン", value: "ワーガルルモン" }, { label: "アトラーカブテリモン", value: "アトラーカブテリモン" }, { label: "ガルダモン", value: "ガルダモン" }, { label: "ズドモン", value: "ズドモン" }, { label: "リリモン", value: "リリモン" }, { label: "ホーリーエンジェモン", value: "ホーリーエンジェモン" }, { label: "エンジェウーモン", value: "エンジェウーモン" }, ], label: "完全体", }, { items: [ { label: "ウォーグレイモン", value: "ウォーグレイモン" }, { label: "メタルガルルモン", value: "メタルガルルモン" }, { label: "ヘラクルカブテリモン", value: "ヘラクルカブテリモン" }, { label: "ホウオウモン", value: "ホウオウモン" }, { label: "ヴァイクモン", value: "ヴァイクモン" }, { label: "ロゼモン", value: "ロゼモン" }, { label: "ゴッドドラモン", value: "ゴッドドラモン" }, { label: "ホーリードラモン", value: "ホーリードラモン" }, ], label: "究極体", }, ], [], ) return ``` ### クエリを使う ```tsx const items = useMemo( () => [ { label: ( <> アグモン ), query: "アグモン", value: "アグモン", }, { label: "ガブモン", value: "ガブモン" }, { label: "テントモン", value: "テントモン" }, { label: "ピヨモン", value: "ピヨモン" }, { label: "ゴマモン", value: "ゴマモン" }, { label: "パルモン", value: "パルモン" }, { label: "パタモン", value: "パタモン" }, { label: "テイルモン", value: "テイルモン" }, ], [], ) return ``` ### バリアントを変更する ```tsx const items = useMemo( () => [ { label: "アグモン", value: "アグモン" }, { label: "ガブモン", value: "ガブモン" }, { label: "テントモン", value: "テントモン" }, { label: "ピヨモン", value: "ピヨモン" }, { label: "ゴマモン", value: "ゴマモン" }, { label: "パルモン", value: "パルモン" }, { label: "パタモン", value: "パタモン" }, { label: "テイルモン", value: "テイルモン" }, ], [], ) return ( {(variant) => ( )} ) ``` ### サイズを変更する ```tsx preview functional const items = useMemo( () => [ { label: "アグモン", value: "アグモン" }, { label: "ガブモン", value: "ガブモン" }, { label: "テントモン", value: "テントモン" }, { label: "ピヨモン", value: "ピヨモン" }, { label: "ゴマモン", value: "ゴマモン" }, { label: "パルモン", value: "パルモン" }, { label: "パタモン", value: "パタモン" }, { label: "テイルモン", value: "テイルモン" }, ], [], ) return ( {(size) => ( )} ) ``` ### デフォルト値を設定する デフォルト値を設定する場合は、`defaultValue`に値を設定します。 ```tsx const items = useMemo( () => [ { label: "アグモン", value: "アグモン" }, { label: "ガブモン", value: "ガブモン" }, { label: "テントモン", value: "テントモン" }, { label: "ピヨモン", value: "ピヨモン" }, { label: "ゴマモン", value: "ゴマモン" }, { label: "パルモン", value: "パルモン" }, { label: "パタモン", value: "パタモン" }, { label: "テイルモン", value: "テイルモン" }, ], [], ) return ( ) ``` ### デフォルトの入力値を設定する デフォルトの入力値を設定する場合は、`defaultInputValue`に文字列を設定します。 ```tsx const items = useMemo( () => [ { label: "アグモン", value: "アグモン" }, { label: "ガブモン", value: "ガブモン" }, { label: "テントモン", value: "テントモン" }, { label: "ピヨモン", value: "ピヨモン" }, { label: "ゴマモン", value: "ゴマモン" }, { label: "パルモン", value: "パルモン" }, { label: "パタモン", value: "パタモン" }, { label: "テイルモン", value: "テイルモン" }, ], [], ) return ( ) ``` ### 複数選択を有効する 複数選択を有効にする場合は、`multiple`を`true`に設定します。 ```tsx const items = useMemo( () => [ { label: "アグモン", value: "アグモン" }, { label: "ガブモン", value: "ガブモン" }, { label: "テントモン", value: "テントモン" }, { label: "ピヨモン", value: "ピヨモン" }, { label: "ゴマモン", value: "ゴマモン" }, { label: "パルモン", value: "パルモン" }, { label: "パタモン", value: "パタモン" }, { label: "テイルモン", value: "テイルモン" }, ], [], ) return ``` ### 最大選択数を制限する 最大選択数を制限する場合は、`max`に数値を設定します。 ```tsx const items = useMemo( () => [ { label: "アグモン", value: "アグモン" }, { label: "ガブモン", value: "ガブモン" }, { label: "テントモン", value: "テントモン" }, { label: "ピヨモン", value: "ピヨモン" }, { label: "ゴマモン", value: "ゴマモン" }, { label: "パルモン", value: "パルモン" }, { label: "パタモン", value: "パタモン" }, { label: "テイルモン", value: "テイルモン" }, ], [], ) return ( ) ``` ### 区切り文字を変更する 区切り文字を変更する場合は、`separator`に文字列を設定します。デフォルトでは、`,`が設定されています。 ```tsx const items = useMemo( () => [ { label: "アグモン", value: "アグモン" }, { label: "ガブモン", value: "ガブモン" }, { label: "テントモン", value: "テントモン" }, { label: "ピヨモン", value: "ピヨモン" }, { label: "ゴマモン", value: "ゴマモン" }, { label: "パルモン", value: "パルモン" }, { label: "パタモン", value: "パタモン" }, { label: "テイルモン", value: "テイルモン" }, ], [], ) return ( ) ``` ### カスタム値を許可する カスタム値を許可する場合は、`allowCustomValue`を`true`に設定します。 ```tsx const items = useMemo( () => [ { label: "アグモン", value: "アグモン" }, { label: "ガブモン", value: "ガブモン" }, { label: "テントモン", value: "テントモン" }, { label: "ピヨモン", value: "ピヨモン" }, { label: "ゴマモン", value: "ゴマモン" }, { label: "パルモン", value: "パルモン" }, { label: "パタモン", value: "パタモン" }, { label: "テイルモン", value: "テイルモン" }, ], [], ) return ( console.log("value:", value)} /> ) ``` ### オフセットを変更する オフセットを変更する場合は、`gutter`または`offset`に値を設定します。 ```tsx const items = useMemo( () => [ { label: "アグモン", value: "アグモン" }, { label: "ガブモン", value: "ガブモン" }, { label: "テントモン", value: "テントモン" }, { label: "ピヨモン", value: "ピヨモン" }, { label: "ゴマモン", value: "ゴマモン" }, { label: "パルモン", value: "パルモン" }, { label: "パタモン", value: "パタモン" }, { label: "テイルモン", value: "テイルモン" }, ], [], ) return ( ) ``` ### アニメーションを変更する アニメーションを変更する場合は、`animationScheme`に`"block-start"`や`"inline-end"`などを設定します。 デフォルトでは、`"scale"`が設定されています。 ```tsx const items = useMemo( () => [ { label: "アグモン", value: "アグモン" }, { label: "ガブモン", value: "ガブモン" }, { label: "テントモン", value: "テントモン" }, { label: "ピヨモン", value: "ピヨモン" }, { label: "ゴマモン", value: "ゴマモン" }, { label: "パルモン", value: "パルモン" }, { label: "パタモン", value: "パタモン" }, { label: "テイルモン", value: "テイルモン" }, ], [], ) return ( ) ``` ### 配置を変更する 配置を変更する場合は、`placement`に`"start"`や`"end-end"`などを指定します。デフォルトでは、`"end"`が設定されています。 ```tsx const items = useMemo( () => [ { label: "アグモン", value: "アグモン" }, { label: "ガブモン", value: "ガブモン" }, { label: "テントモン", value: "テントモン" }, { label: "ピヨモン", value: "ピヨモン" }, { label: "ゴマモン", value: "ゴマモン" }, { label: "パルモン", value: "パルモン" }, { label: "パタモン", value: "パタモン" }, { label: "テイルモン", value: "テイルモン" }, ], [], ) return ( ) ``` ### スクロールをブロックする スクロールをブロックするには、`blockScrollOnMount`を`true`に設定します。 ```tsx const items = useMemo( () => [ { label: "アグモン", value: "アグモン" }, { label: "ガブモン", value: "ガブモン" }, { label: "テントモン", value: "テントモン" }, { label: "ピヨモン", value: "ピヨモン" }, { label: "ゴマモン", value: "ゴマモン" }, { label: "パルモン", value: "パルモン" }, { label: "パタモン", value: "パタモン" }, { label: "テイルモン", value: "テイルモン" }, ], [], ) return ( ) ``` ### スクロール時にドロップダウンを閉じる スクロール時にドロップダウンを閉じる場合は、`closeOnScroll`を`true`に設定します。 ```tsx const items = useMemo( () => [ { label: "アグモン", value: "アグモン" }, { label: "ガブモン", value: "ガブモン" }, { label: "テントモン", value: "テントモン" }, { label: "ピヨモン", value: "ピヨモン" }, { label: "ゴマモン", value: "ゴマモン" }, { label: "パルモン", value: "パルモン" }, { label: "パタモン", value: "パタモン" }, { label: "テイルモン", value: "テイルモン" }, ], [], ) return ( ) ``` ### 変更時にドロップダウンを開くイベントをハンドルする 変更時にドロップダウンを開くイベントをハンドルする場合は、`openOnChange`に関数を設定します。 ```tsx const items = useMemo( () => [ { label: "アグモン", value: "アグモン" }, { label: "ガブモン", value: "ガブモン" }, { label: "テントモン", value: "テントモン" }, { label: "ピヨモン", value: "ピヨモン" }, { label: "ゴマモン", value: "ゴマモン" }, { label: "パルモン", value: "パルモン" }, { label: "パタモン", value: "パタモン" }, { label: "テイルモン", value: "テイルモン" }, ], [], ) return ( ev.target.value.length > 2} items={items} placeholder="Select a digimon" /> ) ``` ### 変更時にドロップダウンを閉じるイベントをハンドルする 変更時にドロップダウンを閉じるイベントをハンドルする場合は、`closeOnChange`に関数を設定します。 ```tsx const items = useMemo( () => [ { label: "アグモン", value: "アグモン" }, { label: "ガブモン", value: "ガブモン" }, { label: "テントモン", value: "テントモン" }, { label: "ピヨモン", value: "ピヨモン" }, { label: "ゴマモン", value: "ゴマモン" }, { label: "パルモン", value: "パルモン" }, { label: "パタモン", value: "パタモン" }, { label: "テイルモン", value: "テイルモン" }, ], [], ) return ( !ev.target.value.length} items={items} placeholder="Select a digimon" /> ) ``` ### フォーカス時にドロップダウンを開かない フォーカス時にドロップダウンを開かない場合は、`openOnFocus`を`false`に設定します。 ```tsx const items = useMemo( () => [ { label: "アグモン", value: "アグモン" }, { label: "ガブモン", value: "ガブモン" }, { label: "テントモン", value: "テントモン" }, { label: "ピヨモン", value: "ピヨモン" }, { label: "ゴマモン", value: "ゴマモン" }, { label: "パルモン", value: "パルモン" }, { label: "パタモン", value: "パタモン" }, { label: "テイルモン", value: "テイルモン" }, ], [], ) return ( ) ``` ### クリック時にドロップダウンを開かない クリック時にドロップダウンを開かない場合は、`openOnClick`を`false`に設定します。 ```tsx const items = useMemo( () => [ { label: "アグモン", value: "アグモン" }, { label: "ガブモン", value: "ガブモン" }, { label: "テントモン", value: "テントモン" }, { label: "ピヨモン", value: "ピヨモン" }, { label: "ゴマモン", value: "ゴマモン" }, { label: "パルモン", value: "パルモン" }, { label: "パタモン", value: "パタモン" }, { label: "テイルモン", value: "テイルモン" }, ], [], ) return ( ) ``` ### クリア時にフォーカスしない クリア時にフォーカスしない場合は、`focusOnClear`を`false`に設定します。 ```tsx const items = useMemo( () => [ { label: "アグモン", value: "アグモン" }, { label: "ガブモン", value: "ガブモン" }, { label: "テントモン", value: "テントモン" }, { label: "ピヨモン", value: "ピヨモン" }, { label: "ゴマモン", value: "ゴマモン" }, { label: "パルモン", value: "パルモン" }, { label: "パタモン", value: "パタモン" }, { label: "テイルモン", value: "テイルモン" }, ], [], ) return ( ) ``` ### 選択時にドロップダウンを閉じない 選択時にドロップダウンを閉じない場合は、`closeOnSelect`を`false`に設定します。 ```tsx const items = useMemo( () => [ { closeOnSelect: true, label: "アグモン", value: "アグモン" }, { label: "ガブモン", value: "ガブモン" }, { label: "テントモン", value: "テントモン" }, { label: "ピヨモン", value: "ピヨモン" }, { label: "ゴマモン", value: "ゴマモン" }, { label: "パルモン", value: "パルモン" }, { label: "パタモン", value: "パタモン" }, { label: "テイルモン", value: "テイルモン" }, ], [], ) return ( ) ``` ### フォーカスが外れた場合に閉じない フォーカスが外れた場合にドロップダウンを閉じない場合は、`closeOnBlur`を`false`に設定します。 ```tsx const items = useMemo( () => [ { label: "アグモン", value: "アグモン" }, { label: "ガブモン", value: "ガブモン" }, { label: "テントモン", value: "テントモン" }, { label: "ピヨモン", value: "ピヨモン" }, { label: "ゴマモン", value: "ゴマモン" }, { label: "パルモン", value: "パルモン" }, { label: "パタモン", value: "パタモン" }, { label: "テイルモン", value: "テイルモン" }, ], [], ) return ( ) ``` ### ESCキーが入力された時にドロップダウンを閉じない ESCキーが入力された時にドロップダウンを閉じない場合は、`closeOnEsc`を`false`に設定します。 ```tsx const items = useMemo( () => [ { label: "アグモン", value: "アグモン" }, { label: "ガブモン", value: "ガブモン" }, { label: "テントモン", value: "テントモン" }, { label: "ピヨモン", value: "ピヨモン" }, { label: "ゴマモン", value: "ゴマモン" }, { label: "パルモン", value: "パルモン" }, { label: "パタモン", value: "パタモン" }, { label: "テイルモン", value: "テイルモン" }, ], [], ) return ( ) ``` ### クリアボタンを無効にする クリアボタンを無効にする場合は、`clearable`を`false`に設定します。 ```tsx const items = useMemo( () => [ { label: "アグモン", value: "アグモン" }, { label: "ガブモン", value: "ガブモン" }, { label: "テントモン", value: "テントモン" }, { label: "ピヨモン", value: "ピヨモン" }, { label: "ゴマモン", value: "ゴマモン" }, { label: "パルモン", value: "パルモン" }, { label: "パタモン", value: "パタモン" }, { label: "テイルモン", value: "テイルモン" }, ], [], ) return ( ) ``` ### オプションを無効にする 特定のオプションを無効にする場合は、`disabled`を`true`に設定します。 ```tsx const items = useMemo( () => [ { label: "アグモン", value: "アグモン" }, { label: "ガブモン", value: "ガブモン" }, { label: "テントモン", value: "テントモン" }, { label: "ピヨモン", value: "ピヨモン" }, { label: "ゴマモン", value: "ゴマモン" }, { disabled: true, label: "パルモン", value: "パルモン" }, { label: "パタモン", value: "パタモン" }, { label: "テイルモン", value: "テイルモン" }, ], [], ) return ``` ### 無効にする 無効にする場合は、`disabled`を`true`に設定します。 ```tsx const items = useMemo( () => [ { label: "アグモン", value: "アグモン" }, { label: "ガブモン", value: "ガブモン" }, { label: "テントモン", value: "テントモン" }, { label: "ピヨモン", value: "ピヨモン" }, { label: "ゴマモン", value: "ゴマモン" }, { label: "パルモン", value: "パルモン" }, { label: "パタモン", value: "パタモン" }, { label: "テイルモン", value: "テイルモン" }, ], [], ) return ( {(variant) => ( )} ) ``` ### 読み取り専用にする 読み取り専用にする場合は、`readOnly`を`true`に設定します。 ```tsx const items = useMemo( () => [ { label: "アグモン", value: "アグモン" }, { label: "ガブモン", value: "ガブモン" }, { label: "テントモン", value: "テントモン" }, { label: "ピヨモン", value: "ピヨモン" }, { label: "ゴマモン", value: "ゴマモン" }, { label: "パルモン", value: "パルモン" }, { label: "パタモン", value: "パタモン" }, { label: "テイルモン", value: "テイルモン" }, ], [], ) return ( {(variant) => ( )} ) ``` ### 無効な入力にする 無効な入力にする場合は、`invalid`を`true`に設定します。 ```tsx const items = useMemo( () => [ { label: "アグモン", value: "アグモン" }, { label: "ガブモン", value: "ガブモン" }, { label: "テントモン", value: "テントモン" }, { label: "ピヨモン", value: "ピヨモン" }, { label: "ゴマモン", value: "ゴマモン" }, { label: "パルモン", value: "パルモン" }, { label: "パタモン", value: "パタモン" }, { label: "テイルモン", value: "テイルモン" }, ], [], ) return ( {(variant) => ( )} ) ``` ### ボーダーの色を変更する ボーダーの色を変更する場合は、`focusBorderColor`または`errorBorderColor`に値を設定します。 ```tsx const items = useMemo( () => [ { label: "アグモン", value: "アグモン" }, { label: "ガブモン", value: "ガブモン" }, { label: "テントモン", value: "テントモン" }, { label: "ピヨモン", value: "ピヨモン" }, { label: "ゴマモン", value: "ゴマモン" }, { label: "パルモン", value: "パルモン" }, { label: "パタモン", value: "パタモン" }, { label: "テイルモン", value: "テイルモン" }, ], [], ) return ( ) ``` ### 検索結果が存在しない時のメッセージをカスタマイズする ```tsx const items = useMemo( () => [ { label: "アグモン", value: "アグモン" }, { label: "ガブモン", value: "ガブモン" }, { label: "テントモン", value: "テントモン" }, { label: "ピヨモン", value: "ピヨモン" }, { label: "ゴマモン", value: "ゴマモン" }, { label: "パルモン", value: "パルモン" }, { label: "パタモン", value: "パタモン" }, { label: "テイルモン", value: "テイルモン" }, ], [], ) return ( ) ``` ### アイコンをカスタマイズする ```tsx const items = useMemo( () => [ { label: "アグモン", value: "アグモン" }, { label: "ガブモン", value: "ガブモン" }, { label: "テントモン", value: "テントモン" }, { label: "ピヨモン", value: "ピヨモン" }, { label: "ゴマモン", value: "ゴマモン" }, { label: "パルモン", value: "パルモン" }, { label: "パタモン", value: "パタモン" }, { label: "テイルモン", value: "テイルモン" }, ], [], ) return ( } placeholder="Select a digimon" items={items} /> ) ``` ### オプションのアイコンをカスタマイズする ```tsx const items = useMemo( () => [ { label: "アグモン", value: "アグモン" }, { label: "ガブモン", value: "ガブモン" }, { label: "テントモン", value: "テントモン" }, { label: "ピヨモン", value: "ピヨモン" }, { label: "ゴマモン", value: "ゴマモン" }, { label: "パルモン", value: "パルモン" }, { label: "パタモン", value: "パタモン" }, { label: "テイルモン", value: "テイルモン" }, ], [], ) return ( }} /> ) ``` ### 複数選択時の表示をカスタマイズする ```tsx const items = useMemo( () => [ { label: "アグモン", value: "アグモン" }, { label: "ガブモン", value: "ガブモン" }, { label: "テントモン", value: "テントモン" }, { label: "ピヨモン", value: "ピヨモン" }, { label: "ゴマモン", value: "ゴマモン" }, { label: "パルモン", value: "パルモン" }, { label: "パタモン", value: "パタモン" }, { label: "テイルモン", value: "テイルモン" }, ], [], ) return ( ( {label} )} /> ) ``` ### 制御する ```tsx const [value, setValue] = useState("アグモン") const items = useMemo( () => [ { label: "アグモン", value: "アグモン" }, { label: "ガブモン", value: "ガブモン" }, { label: "テントモン", value: "テントモン" }, { label: "ピヨモン", value: "ピヨモン" }, { label: "ゴマモン", value: "ゴマモン" }, { label: "パルモン", value: "パルモン" }, { label: "パタモン", value: "パタモン" }, { label: "テイルモン", value: "テイルモン" }, ], [], ) return ( ) ``` ## Props ### Autocomplete.Root | Prop | Default | Type | Description | | ---------------------- | -------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `as` | - | `As` | The HTML element to render. | | `asChild` | - | `boolean` | Merges its props onto its immediate child. | | `css` | - | `CSSObject \| CSSObject[]` | The CSS object. | | `colorScheme` | - | `"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` | Set color scheme variables. | | `size` | `"md"` | `"lg" \| "md" \| "sm" \| "xl" \| "xs"` | The size of the component. | | `variant` | `"outline"` | `"filled" \| "flushed" \| "outline" \| "plain"` | The variant of the component. | | `allowCustomValue` | `false` | `boolean` | If `true`, the autocomplete will allow custom value. | | `animationScheme` | `"scale"` | `"none" \| "scale" \| SimplePlacement` | The animation of the element. | | `autoUpdate` | `true` | `boolean` | If `true`, automatically updates the position of the floating element when necessary. | | `blockScrollOnMount` | `false` | `boolean` | If `true`, scrolling will be disabled on the `body` when the modal opens. | | `clearable` | `true` | `boolean` | If `true`, display the clear icon. | | `clearIcon` | - | `ReactNode` | The icon to be used in the clear button. | | `closeOnBlur` | `true` | `boolean` | If `true`, the popover will close when you blur out it by clicking outside or tabbing out. | | `closeOnChange` | `false` | `((ev: ChangeEvent) => boolean) \| boolean` | If `true`, the autocomplete will be closed when the input value changes. | | `closeOnEsc` | `true` | `boolean` | If `true`, the popover will hide on pressing Esc key. | | `closeOnScroll` | `false` | `boolean` | If `true`, the popover will hide on scroll. | | `closeOnSelect` | `true` | `boolean` | If `true`, the list element will be closed when value is selected. | | `contentProps` | - | `AutocompleteContentProps` | Props for content element. | | `defaultInputValue` | - | `string` | The initial value of the input. | | `defaultOpen` | - | `boolean` | If `true`, the element will be initially opened. | | `defaultValue` | - | `Multiple extends true ? string[] : string` | The initial value of the autocomplete. | | `disabled` | `false` | `boolean` | If `true`, the combobox will be disabled. | | `duration` | `0.2` | `MotionTransitionProps["duration"]` | The animation duration. | | `elementProps` | - | `InputGroup.ElementProps` | The props for the end element. | | `elements` | - | `{ floating?: HTMLElement \| null \| undefined; reference?: HTMLButtonElement \| null \| undefined }` | Object containing the reference and floating elements. | | `emptyIcon` | - | `ReactNode` | The icon to be used in the empty element. | | `emptyMessage` | `"No results found"` | `ReactNode` | The message displayed when the search yields no hits. | | `emptyProps` | - | `AutocompleteEmptyProps` | Props for empty element. | | `errorBorderColor` | - | `"-moz-initial" \| "ActiveBorder" \| "ActiveCaption" \| "aliceblue" \| "amber.100" \| "amber.200" \| "amber.300" \| "amber.400" \| "amber.50" \| "amber.500" ...` | The border color when the input is invalid. | | `filter` | - | `AutocompleteFilter` | The function to filter the items. | | `flip` | `true` | `boolean` | If `true`, the popper will change its placement and flip when it's about to overflow its boundary area. | | `focusBorderColor` | - | `"-moz-initial" \| "ActiveBorder" \| "ActiveCaption" \| "aliceblue" \| "amber.100" \| "amber.200" \| "amber.300" \| "amber.400" \| "amber.50" \| "amber.500" ...` | The border color when the input is focused. | | `focusOnClear` | `true` | `boolean` | If `true`, the input will be focused when the clear icon is clicked. | | `groupProps` | - | `Omit` | Props for group element. | | `gutter` | `8` | `number` | The distance or margin between the reference and popper. It is used internally to create an `offset` modifier. | | `icon` | - | `ReactNode` | The icon to be used in the autocomplete. | | `iconProps` | - | `AutocompleteIconProps` | Props for icon element. | | `inputProps` | - | `HTMLStyledProps<"input">` | The props for the input element. | | `inputValue` | - | `string` | The value of the input. | | `invalid` | `false` | `boolean` | If `true`, the field will be invalid. | | `items` | `[]` | `ComboboxItem[]` | If provided, generate options based on items. | | `matcher` | - | `AutocompleteMatcher` | The function to match the items. | | `matchWidth` | `false` | `boolean` | If `true`, the popper will match the width of the reference at all times. It's useful for `autocomplete`, `date-picker` and `select` patterns. | | `max` | - | `number` | The maximum selectable value. | | `middleware` | - | `(false \| { name: string; options?: any; fn: (state: { x: number; y: number; placement: Placement; platform: Platform; strategy: Strategy; initialPlacement: Placement; middlewareData: MiddlewareData; rects: ElementRects; elements: Elements; }) => Promisable<...>; } \| null \| undefined)[]` | Array of middleware objects to modify the positioning or provide data for rendering. | | `multiple` | `false` | `Multiple` | If `true`, the autocomplete will be multiple. | | `name` | - | `string` | The `name` attribute of the input element. | | `offset` | - | `[number, number]` | The main and cross-axis offset to displace popper element from its reference element. | | `onChange` | - | `(value: Multiple extends true ? string[] : string) => void` | The callback invoked when value state changes. | | `onClose` | - | `() => void \| Promise` | Callback invoked to close the element. | | `onInputChange` | - | `(value: string) => void` | The callback invoked when input value state changes. | | `onOpen` | - | `() => void \| Promise` | Callback invoked to open the element. | | `open` | - | `boolean` | If `true`, the element will be opened. | | `openOnChange` | `true` | `((ev: ChangeEvent) => boolean) \| boolean` | If `true`, the autocomplete will be opened when the input value changes. | | `openOnClick` | `true` | `boolean` | If `true`, the combobox will be opened when click on the field. | | `openOnEnter` | `true` | `boolean` | If `true`, the combobox will be opened when enter is pressed. | | `openOnFocus` | `true` | `boolean` | If `true`, the autocomplete will be opened when the input is focused. | | `openOnSpace` | `true` | `boolean` | If `true`, the combobox will be opened when space is pressed. | | `optionProps` | - | `Omit` | Props for option element. | | `placeholder` | - | `string` | The placeholder for autocomplete. | | `placement` | `"end"` | `Direction` | The placement of the popper relative to its reference. | | `platform` | - | `Platform` | Custom or extended platform object. | | `preventOverflow` | `true` | `boolean` | If `true`, will prevent the popper from being cut off and ensure it's visible within the boundary area. | | `readOnly` | `false` | `boolean` | If `true`, the combobox will be readonly. | | `render` | - | `(props: AutocompleteRenderProps) => ReactNode` | The function to render the selected items. | | `required` | `false` | `boolean` | If `true`, the field will be required. | | `rootProps` | - | `InputGroup.RootProps` | Props for root element. | | `selectFocusRef` | - | `RefObject` | The `ref` of the element that should receive focus when selected. | | `selectOnSpace` | `true` | `boolean` | If `true`, the item will be selected when space is pressed. | | `separator` | `","` | `string` | The visual separator between each value. | | `strategy` | `"absolute"` | `Strategy` | The CSS positioning strategy to use. | | `transferFocus` | `true` | `boolean` | If `true`, the focus will be transferred to the popover content when the tab key is pressed. | | `value` | - | `Multiple extends true ? string[] : string` | The value of the autocomplete. | | `whileElementsMounted` | - | `(reference: HTMLButtonElement, floating: HTMLElement, update: () => void) => () => void` | A callback invoked when both the reference and floating elements are mounted, and cleaned up when either is unmounted. This is useful for setting up event listeners (e.g. pass `autoUpdate`). | ### Autocomplete.Group | Prop | Default | Type | Description | | ------------- | ------- | ------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------ | | `as` | - | `As` | The HTML element to render. | | `asChild` | - | `boolean` | Merges its props onto its immediate child. | | `css` | - | `CSSObject \| CSSObject[]` | The CSS object. | | `colorScheme` | - | `"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` | Set color scheme variables. | | `label` | - | `ReactNode` | The label of the group. | | `labelProps` | - | `AutocompleteLabelProps` | Props for the label component. | ### Autocomplete.Label | Prop | Default | Type | Description | | ------------- | ------- | ------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------ | | `as` | - | `As` | The HTML element to render. | | `asChild` | - | `boolean` | Merges its props onto its immediate child. | | `css` | - | `CSSObject \| CSSObject[]` | The CSS object. | | `colorScheme` | - | `"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` | Set color scheme variables. | ### Autocomplete.Option | Prop | Default | Type | Description | | --------------- | ------- | ------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------- | | `as` | - | `As` | The HTML element to render. | | `asChild` | - | `boolean` | Merges its props onto its immediate child. | | `css` | - | `CSSObject \| CSSObject[]` | The CSS object. | | `colorScheme` | - | `"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` | Set color scheme variables. | | `closeOnSelect` | - | `boolean` | If `true`, the item will be closed when selected. | | `disabled` | `false` | `boolean` | If `true`, the item will be disabled. | | `icon` | - | `ReactNode` | The icon to be used in the autocomplete option. | | `selected` | - | `boolean` | If `true`, the item will be selected. | | `value` | - | `string` | The value of the item. | ## アクセシビリティ 現在、v2の移行に伴い、このセクションは更新中です。