Hudoro Dropdown

Hudoro Dropdown adalah komponen dropdown React untuk single select dan multi select, dengan dukungan search, icon, disabled option, serta navigasi keyboard.

Features

• Single select dan multi select
• Searchable dropdown
• Item support untuk icon, description, dan disable
• Keyboard support: Escape untuk close dropdown ArrowUp / ArrowDown untuk pindah highlight Enter / Space untuk memilih item yang sedang di-highlight

Screenshot

Installation

Install dengan pnpm:

pnpm add @hudoro/dropdown

Install dengan yarn:

yarn add @hudoro/dropdown

Install dengan npm:

npm i @hudoro/dropdown

Usage

import React, {SVGProps, useState} from "react";
import ReactDOM from "react-dom/client";
import {Dropdown} from "@hudoro/dropdown";

type DropdownValue = {
  label: string;
  value: string;
};

const CustomIcon: React.FC<SVGProps<SVGSVGElement>> = (props) => {
  return (
    <svg
      width="20"
      height="20"
      viewBox="0 0 20 20"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      {...props}
    >
      <path
        d="M3.33333 13.3333C3.33333 13.3333 4.16666 12.5 6.66666 12.5C9.16666 12.5 10.8333 14.1667 13.3333 14.1667C15.8333 14.1667 16.6667 13.3333 16.6667 13.3333V3.33333C16.6667 3.33333 15.8333 4.16667 13.3333 4.16667C10.8333 4.16667 9.16666 2.5 6.66666 2.5C4.16666 2.5 3.33333 3.33333 3.33333 3.33333V17.5"
        stroke="currentColor"
        strokeWidth="1.5"
        strokeLinecap="round"
        strokeLinejoin="round"
      />
    </svg>
  );
};

const allOptions = [
  {
    icon: <CustomIcon color="#0f766e" />,
    label: "Jakarta",
    value: "jakarta",
    description: "Ibu kota Indonesia",
  },
  {
    icon: <CustomIcon color="#2563eb" />,
    label: "Bandung",
    value: "bandung",
    description: "Kota kreatif dan kuliner",
  },
  {
    icon: <CustomIcon color="#ea580c" />,
    label: "Yogyakarta",
    value: "yogyakarta",
    description: "Kota budaya dan wisata",
    disable: true,
  },
];

const App = () => {
  const [value, setValue] = useState<DropdownValue[]>([]);
  const [searchValue, setSearchValue] = useState("");

  const filteredOptions = allOptions.filter((item) => {
    const keyword = searchValue.toLowerCase();
    return `${item.label} ${item.description || ""}`
      .toLowerCase()
      .includes(keyword);
  });

  return (
    <div style={{padding: 40}}>
      <Dropdown
        dropdownLists={filteredOptions}
        defaultValue={value}
        onChange={setValue}
        multiSelect
        searchAble
        iconLeft={<CustomIcon />}
        placeholder="Pilih kota"
        onSearch={setSearchValue}
        searchValue={searchValue}
        onFocus={() => console.log("focus")}
        onBlur={() => console.log("blur")}
      />
    </div>
  );
};

ReactDOM.createRoot(document.getElementById("app")!).render(<App />);

Props

Dropdown

| Prop | Type | Default | Required | Description | | :--- | :--- | :--- | :--- | :--- | | onChange | (props: { label: string; value: string }[]) => void | - | yes | Callback saat value berubah | | dropdownLists | DropdownItem[] | - | yes | Data item yang ditampilkan di dropdown | | defaultValue | { label: string; value: string }[] | [] | no | Value awal atau controlled value yang dikirim dari parent | | size | "sm" \| "md" \| "lg" | "md" | no | Ukuran dropdown | | error | boolean | false | no | Menampilkan error state | | multiSelect | boolean | false | no | Mengaktifkan multi select | | searchAble | boolean | false | no | Menampilkan input search saat dropdown terbuka | | iconLeft | React.ReactElement<IconPropsDropdown> | - | no | Icon di sisi kiri input | | placeholder | string | - | no | Placeholder saat belum ada value | | onSearch | (value: string) => void | - | no | Callback saat isi search berubah | | position | "top" \| "bottom" | auto | no | Saat ini belum dipakai langsung oleh komponen; posisi dropdown masih mengikuti kalkulasi otomatis viewport | | onBlur | (e: React.FocusEvent<HTMLDivElement, Element>) => void | - | no | Callback saat dropdown kehilangan fokus | | onFocus | (e: React.FocusEvent<HTMLDivElement, Element>) => void | - | no | Callback saat dropdown mendapatkan fokus | | disable | boolean | false | no | Menonaktifkan interaksi dropdown | | searchValue | string | - | no | Nilai search yang dikontrol dari parent |

DropdownItem

| Field | Type | Required | Description | | :--- | :--- | :--- | :--- | | label | string | yes | Teks utama item | | value | string | yes | Nilai item | | icon | React.ReactElement<IconPropsDropdown> | no | Icon item | | disable | boolean | no | Menonaktifkan item tertentu | | description | string | no | Teks deskripsi tambahan di bawah label |

Notes

• searchAble dan searchValue biasanya dipakai bersamaan untuk pola controlled search.
• Pada multiSelect, onChange akan mengembalikan array seluruh item yang sedang terpilih.
• Item dengan disable: true tidak bisa dipilih lewat klik maupun keyboard.