Dropdown

A customizable dropdown/select component with search functionality, icons, and keyboard navigation support

Basic Dropdown

Select Category

With Icons

Select Country

Searchable Dropdown

Select User (Type to search)

Pre-selected Value

Priority Level

With Disabled Items

Select Department

Disabled Dropdown

Unavailable Selection

Form Example

Country *

Department

Dropdown Component

tsx

1import React, { useState, useRef, useEffect } from "react";
2import { ChevronDown, Check } from "lucide-react";
3import { cn } from "@/lib/cn";
4
5interface DropdownItem {
6  id: string | number;
7  label: string;
8  value: string | number;
9  disabled?: boolean;
10  icon?: React.ReactNode;