React Customizable Dropdown - Examples

Discover the power and flexibility of the React Customizable Dropdown.

Basic Single Select

A simple dropdown for selecting a single option from a list.

Example Code

      <Dropdown
          label="Select one"
          options={sampleOptions}
          value={val1}
          onChange={(val) => setVal1(val)}
          placeholder="Select a framework"
          searchable
        />

Multi Select with Search

Allow users to select multiple options with an integrated search filter.

Example Code

      <Dropdown
          options={sampleOptions}
          value={val2}
          onChange={(val) => setVal2(val)}
          placeholder="Select favorite stacks"
          searchable
          multiSelect
        />

Asynchronous Data Loading

Fetch options from an external API or simulate loading states.

Example Code

      <div className="flex flex-col gap-2">
          <Dropdown
            options={asyncOptions}
            loading={isLoading}
            value={val3}
            onChange={(val) => setVal3(val)}
            placeholder={isLoading ? "Loading data..." : "Select fetched item"}
          />
          <button
            onClick={() => {
              setIsLoading(true);
              setAsyncOptions([]);
              setTimeout(() => {
                setAsyncOptions(sampleOptions);
                setIsLoading(false);
              }, 1500);
            }}
            className="text-xs text-blue-500 hover:underline self-start"
          >
            Reload Data
          </button>
        </div>

Custom Dark Theme

Fully customizable theme to match your application's design system.

Example Code

      <div className="bg-gray-900 p-4 rounded-xl">
          <Dropdown
            options={sampleOptions}
            value={val4}
            onChange={(val) => setVal4(val)}
            placeholder="Dark Mode Select"
            theme={{
              backgroundColor: "#1f2937",
              textColor: "#fff",
              hoverColor: "#374151",
              primaryColor: "#60a5fa",
              selectedOptionTextColor: "#ffffff",
              selectedOptionBackgroundColor: "#4c1d95",
              optionTextColor: "#fff",
            }}
          />
        </div>

Premium Multi-Select Gradient

Advanced styling with gradients, custom icons, and animations.

Example Code

      <Dropdown
          options={sampleOptions}
          value={val5}
          onChange={(val) => setVal5(val)}
          placeholder="Choose your favorite frameworks..."
          multiSelect
          searchable
          label="Tech Stack Selection"
          labelClassName="text-purple-900 font-semibold text-sm mb-1"
          triggerClassName="border-2 border-purple-300 rounded-xl px-4 py-3 hover:border-purple-400 hover:shadow-md transition-all duration-300 bg-white/80 backdrop-blur-sm"
          menuClassName="shadow-2xl border-2 border-purple-200"
          optionClassName="hover:bg-gradient-to-r hover:from-purple-50 hover:to-pink-50 px-4 py-3"
          selectedOptionClassName="bg-gradient-to-r from-purple-100 to-pink-100 text-purple-900 font-medium"
          arrowIcon={
            <svg
              className="w-5 h-5 text-purple-600"
              fill="currentColor"
              viewBox="0 0 20 20"
            >
              <path
                fillRule="evenodd"
                d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-11a1 1 0 10-2 0v3.586L7.707 9.293a1 1 0 00-1.414 1.414l3 3a1 1 0 001.414 0l3-3a1 1 0 00-1.414-1.414L11 10.586V7z"
                clipRule="evenodd"
              />
            </svg>
          }
          theme={{
            primaryColor: "#a855f7",
            backgroundColor: "rgba(255, 255, 255, 0.9)",
            hoverColor: "#faf5ff",
            textColor: "#581c87",
            focusBorderColor: "#c084fc",
            selectedOptionTextColor: "#7c3aed",
            selectedOptionBackgroundColor: "#f3e8ff",
            multiSelectSelectedOptionTextColor: "#ffffff",
            multiSelectSelectedOptionBackgroundColor: "#a855f7",
            menuBackgroundColor: "#ffffff",
            optionTextColor: "#6b21a8",
          }}
        />

Ocean Breeze Theme

Sophisticated ocean-inspired theme with custom sublabels and shadows.

Example Code

      <Dropdown
          options={sampleOptionsTwo}
          valueField="sublabel"
          sublabelField="sublabel"
          value={val6}
          onChange={(val) => setVal6(val)}
          placeholder="Dive into your selection..."
          searchable
          label="Featured Framework"
          labelClassName="text-cyan-900 font-semibold text-sm mb-1"
          triggerClassName="border-2 border-cyan-300 rounded-2xl px-5 py-4 hover:border-cyan-500 hover:shadow-xl transition-all duration-300 bg-white/90 backdrop-blur-md hover:scale-[1.02]"
          menuClassName="shadow-2xl border-2 border-cyan-200 rounded-2xl"
          optionClassName="hover:bg-gradient-to-r hover:from-cyan-50 hover:to-blue-50 px-5 py-3 transition-all duration-200"
          selectedOptionClassName="bg-gradient-to-r from-cyan-100 to-blue-100 text-cyan-900 font-semibold border-l-4 border-cyan-500"
          arrowIcon={
            <svg
              className="w-6 h-6 text-cyan-600"
              fill="none"
              stroke="currentColor"
              viewBox="0 0 24 24"
            >
              <path
                strokeLinecap="round"
                strokeLinejoin="round"
                strokeWidth={2.5}
                d="M19 9l-7 7-7-7"
              />
            </svg>
          }
          theme={{
            primaryColor: "#06b6d4",
            backgroundColor: "rgba(255, 255, 255, 0.95)",
            hoverColor: "#ecfeff",
            textColor: "#164e63",
            focusBorderColor: "#0891b2",
            selectedOptionTextColor: "#0e7490",
            selectedOptionBackgroundColor: "#cffafe",
            menuBackgroundColor: "#ffffff",
            optionTextColor: "#155e75",
            padding: "0.75rem 1.25rem",
          }}
          triggerStyle={{
            boxShadow: "0 4px 20px rgba(6, 182, 212, 0.1)",
          }}
        />

Frequently Asked Questions

Everything you need to know about React Customizable Dropdown. Can't find the answer you're looking for? Check out our documentation or GitHub repository.