SSsearchable-select
v0.1.0 · MIT · Zero runtime deps

MUI Select with a
built-in search field.

A searchable, accessible MUI Select for React — with in-menu search, loading state, debouncing, and full TypeScript support.

View live demo →Read the docs
$npm install @shakiraliswe/searchable-select

Live preview

Selected value: apple

Example.tsx
import { useState } from "react";
import { SearchableSelect } from "@shakiraliswe/searchable-select";

const options = [
  { value: "apple", label: "Apple" },
  { value: "banana", label: "Banana" },
  { value: "cherry", label: "Cherry" },
];

export function Example() {
  const [value, setValue] = useState<string | number>("apple");

  return (
    <SearchableSelect
      label="Fruit"
      options={options}
      value={value}
      onChange={setValue}
    />
  );
}
🔍

In-menu search

A search field lives inside the dropdown — no extra plumbing.

♿

Accessible

Proper labeling and role="searchbox" on the search input.

⏳

Loading state

Show a spinner while options load. Auto-disables the control.

🧩

Fully typed

Written in TypeScript, ships its own .d.ts. No @types needed.

📦

Tiny footprint

MUI, Emotion, and React are peer deps — nothing bundled twice.

🌲

Tree-shakeable

sideEffects: false. Ships both ESM and CJS builds.

Ready to try it?

Explore interactive examples or dig into the props reference.

Interactive demoAPI reference