Search combobox
A searchable single-choice field with disabled options, clear, and explicit loading and recovery states.
Assign a reviewer
Search your team by name, role, or city.
- Maya ChenDesign systems · Melbourne
- Jordan LeeFrontend · Sydney
- Amina YusufAccessibility · Brisbane
- Leo MartinOn leave until 2 November
Assigned to Maya Chen.
Implementation
1"use client";2 3import {4 useId,5 useLayoutEffect,6 useRef,7 useState,8 type InputHTMLAttributes,9 type KeyboardEvent,10} from "react";11import { Check, ChevronDown, LoaderCircle, Search, X } from "lucide-react";12 13export type SearchComboboxOption = {14 value: string;15 label: string;16 description?: string;17 disabled?: boolean;18 /** Additional words matched by the default local filter. */19 keywords?: readonly string[];20};21 22export type SearchComboboxProps = Omit<23 InputHTMLAttributes<HTMLInputElement>,24 "value" | "defaultValue" | "onChange" | "children" | "size"25> & {26 options: readonly SearchComboboxOption[];27 value?: string | null;28 defaultValue?: string | null;