Skip to main content
This is the React InstantSearch v7 documentation. If you’re upgrading from v6, see the upgrade guide. If you were using React InstantSearch Hooks, this v7 documentation applies—just check for necessary changes. To continue using v6, you can find the archived documentation.

​
About this widget

The <MenuSelect> widget isn’t part of React InstantSearch, but you can make a custom version with the useMenu Hook. This widget allows a user to select a single value to refine inside a select element.

​
Examples

import { useMenu } from "react-instantsearch";

export function MenuSelect(props) {
  const { items, refine } = useMenu(props);
  const { value: selectedValue } = items.find((item) => item.isRefined) || {
    value: "",
  };

  return (
    <select
      value={selectedValue}
      onChange={(event) => {
        refine(event.target.value);
      }}
    >
      {items.map((item) => (
        <option value={item.value}>
          {item.label} ({item.count})
        </option>
      ))}
    </select>
  );
}
⌘I