Feature Request: Add Searchable Select with Inline Search Input

[realrezamirzaei]

Hi HeroUI Team,

First of all, thank you for the amazing component library! I’ve been using @heroui/react in my project and really appreciate the clean design and ease of use.

I’d like to request a new feature for the Select / Autocomplete component: a searchable select that allows users to search for options directly inside the dropdown. The main idea is:

1. When the user opens the dropdown, the first row should contain a search input field.
2. Users can type in this field to filter the available options dynamically as they type.
3. The rest of the dropdown should display the filtered results in real-time.
4. The feature should work seamlessly with selectedKey and onSelectionChange props, so current usage patterns of Select don’t break.
5. Optional: Allow customization of placeholder text for the search input (e.g., “Search…”).

This would be extremely useful in scenarios where there are many options, such as country, city, or role selection. Currently, Autocomplete works well for basic usage, but having a native searchable Select with a built-in inline search would make the UI much cleaner and avoid extra custom implementations.

Example usage concept:

<Select
  label="City"
  placeholder="Select city"
  searchable={true}       // new prop
  searchPlaceholder="Search cities..."
  selectedKey={selectedCity}
  onSelectionChange={handleCityChange}
>
  {cities.map(city => (
    <SelectItem key={city.id}>{city.name}</SelectItem>
  ))}
</Select>

Benefits

• Improves UX for long lists
• Reduces need for custom components or extra packages
• Keeps the library cohesive and consistent
• I would love to see this feature added in a future release. Thank you for considering!

[benkingcode]

Is this possible? The underlying React Aria supports it https://react-aria.adobe.com/Select#autocomplete