ComponentsSearch Select

Search Select

A beautiful searchable combobox supporting single/multi selection, custom avatars, description lines, and debounced API searching.

React

Async Debounced

Interactive Demo

Toggle through single, multi-selection, and faked network loading configurations below.

Single Search Select (With Subtexts)

Filters static configurations instantly. Currently selected: manager

Manager

Multi-Select Combobox (With Avatars & Badges)

Select multiple assignees. Chips render as closable pills inside the trigger.

Nehry Oliver

Clara Bautista

Async API Stream (Debounced Search)

Simulates dynamic server requests. Type a Rizal municipality name to see debounced fetching shimmers in action.

Search Rizal municipalities...

Installation

pnpm dlx shadcn@latest add https://micto-ui-kit.misangono.net/r/micto/search-select.json

Static Local Filtering

For localized lists (roles, flags, status items). Loads and filters in client-side memory.

import { useState } from "react"
import { SearchSelect } from "@/components/micto/search-select"

const roles = [
  { value: "admin", label: "Administrator", description: "Full privileges" },
  { value: "editor", label: "Editor", description: "Content privileges" },
]

export default function Page() {
  const [role, setRole] = useState("editor")
  return (
    <SearchSelect 
      options={roles} 
      value={role} 
      onChange={setRole} 
      placeholder="Select a system role"
    />
  )
}

Async Search (Multi-Select assignee style)

Throttles network requests automatically using a 300ms debounce. Ideal for searching deep databases.

import { SearchSelect } from "@/components/micto/search-select"

export default function Page() {
  const handleUserSearch = async (query: string) => {
    const res = await fetch(`/api/users?search=${query}`)
    const users = await res.json()
    return users.map(u => ({
      value: u.id,
      label: u.name,
      description: u.email,
      avatar: u.avatar_url // optional image avatar
    }))
  }

  return (
    <SearchSelect 
      onSearch={handleUserSearch} 
      multiple // enables pill badge multi-select
      placeholder="Assign team members..."
    />
  )
}

API Reference

Configure the component using the following properties.

Prop	Type	Default	Description
options	SearchSelectOption[]	[]	Static list of options to search and filter locally inside memory.
onSearch	(query: string) => Promise<SearchSelectOption[]>	undefined	Async search callback. Triggers on debounced input (300ms) with shimmer states.
value	string \| string[]	undefined	Currently selected value. Passes string in single mode, or string array in multi mode.
onChange	(value: any) => void	undefined	Callback triggered when selection state updates.
multiple	boolean	false	Whether to enable multi-selection. Renders closable pills in trigger box.
placeholder	string	'Select option...'	Empty state text shown in select button.
searchPlaceholder	string	'Search...'	Placeholder text displayed in popup filter box.
emptyMessage	string	'No results found.'	Message rendered when search queries find no matching options.
disabled	boolean	false	Disable the entire combobox selection and interactions.

PreviousSalary Grade Explorer NextServer Pagination