Live demo

Every example below runs the real @shakiraliswe/searchable-select package. Interact with the component on the left, copy the code on the right.

1. Basic usage

A controlled select with an in-menu search field. Try typing to filter.

Fruit

tsx

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

<SearchableSelect
  label="Fruit"
  options={fruits}
  value={value}
  onChange={setValue}
/>

2. Debounced search (large list)

Debounce the filter for large datasets. Below: ~180 countries with a 200ms debounce.

Country

tsx

<SearchableSelect
  label="Country"
  options={countries}
  value={value}
  onChange={setValue}
  searchDebounceMs={200}
  searchPlaceholder="Search countries..."
/>

3. Loading state (async options)

Options load after a delay. The control shows a spinner and is disabled while loading.

Fruit

tsx

const [options, setOptions] = useState<SelectOption[]>([]);
const [loading, setLoading] = useState(true);

useEffect(() => {
  fetchOptions().then((opts) => {
    setOptions(opts);
    setLoading(false);
  });
}, []);

<SearchableSelect
  label="Fruit"
  options={options}
  value={value}
  onChange={setValue}
  loading={loading}
/>

4. Disabled options

Mark individual options as disabled by setting `disabled: true` on the option.

Fruit

tsx

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

<SearchableSelect
  label="Fruit"
  options={options}
  value={value}
  onChange={setValue}
/>

5. Search disabled

Hide the in-menu search field for very short option lists.

Fruit

tsx

<SearchableSelect
  label="Fruit"
  options={fruits}
  value={value}
  onChange={setValue}
  hasSearch={false}
/>

6. Custom placeholder & empty state

Customize the search placeholder and what shows when no options match.

Country

tsx

<SearchableSelect
  label="Country"
  options={countries}
  value={value}
  onChange={setValue}
  searchPlaceholder="Find a country by name…"
  noOptionsContent={
    <span style={{ fontStyle: "italic", opacity: 0.7 }}>
      Nothing here — try a different query.
    </span>
  }
/>

7. Disabled control

Passes through MUI's `disabled` prop from the underlying Select.

Fruit

tsx

<SearchableSelect
  label="Fruit"
  options={fruits}
  value={value}
  onChange={setValue}
  disabled
/>