Dropdown - React

Dropdown

ReactVueJS + CSS

Impor

SelectDropdown

Copy

import { SelectDropdown } from '@idds/react';

export default function App() {
  const [selected, setSelected] = useState('');
  const options = [
    { label: 'Option 1', value: 'option1' },
    { label: 'Option 2', value: 'option2' },
  ];

  return (
    <SelectDropdown
      options={options}
      selected={selected}
      onSelect={(val) => setSelected(val)}
      placeholder="Select..."
    />
  );
}

BasicDropdown

Copy

import { BasicDropdown } from '@idds/react';

export default function App() {
  return (
    <BasicDropdown
      trigger={<button>Open Menu</button>}
      content={
        <div style={{ padding: '16px' }}>
          <h3 style={{ margin: '0 0 8px' }}>My Content</h3>
          <p style={{ margin: 0 }}>This is a basic dropdown content.</p>
        </div>
      }
    />
  );
}

Contoh Penggunaan

Contoh 1 - SelectDropdown: Single

PreviewCode

Users

Contoh 2 - SelectDropdown: Multiple

PreviewCode

Select Users

Terpilih:

Contoh 3 - SelectDropdown: Radio

PreviewCode

Contoh 4 - SelectDropdown: API Integration

PreviewCode

---

Debug Info:

• Current Page: 1
• Has More: No
• Loading: No
• Options: 0 / 0
• Search Term: ""
• Selected: None

Contoh 5 - Dropdown: Menu

PreviewCode

John Doe

Props

SelectDropdown

Name	Type	Default	Required	Description
options	SelectOption[]	—	Yes	Array of options untuk dropdown.
label?	ReactNode	—	No	Label untuk dropdown.
selected	any | any[]	—	Yes	Nilai yang terpilih (single atau multiple).
onSelect	(selectedValue: any | any[], rawValue?: any) => void	—	Yes	Callback ketika option dipilih.
placeholder?	string	'Select...'	No	Placeholder text untuk trigger.
size?	'sm' | 'md' | 'lg'	'md'	No	Ukuran dropdown.
indicator?	'check' | 'radio'	'check'	No	Tipe indicator untuk selected option.
multiple?	boolean	false	No	Apakah memungkinkan multiple selection.
width?	number | string	'100%'	No	Lebar komponen (container + default popup).
panelWidth?	number | string	—	No	Lebar khusus popup; jika tidak diisi, ikut width.
panelHeight?	number | string	600	No	Tinggi maksimum popup (overflow akan scroll).
disabled?	boolean	false	No	Apakah komponen dalam mode readonly/disabled.
onSearch?	(searchTerm: string) => void	—	No	Callback untuk search dengan debounce.
searchDebounceMs?	number	300	No	Delay untuk debounce search (ms).
hasMore?	boolean	false	No	Apakah masih ada data yang bisa di-load (untuk infinite scroll).
loading?	boolean	false	No	Apakah sedang loading data.
onLoadMore?	(page: number) => void	—	No	Callback untuk load data halaman berikutnya.
onSelectedRawChange?	(selectedRaw: SelectOption | SelectOption[] | null) => void	—	No	Callback untuk perubahan selectedRaw (berisi SelectOption object atau array). Single select mengembalikan SelectOption | null, multiple select mengembalikan SelectOption[] | null.
triggerClassName?	string	''	No	ClassName tambahan untuk trigger.
panelClassName?	string	''	No	ClassName tambahan untuk panel.
renderOptionLabel?	(option: SelectOption) => ReactNode	—	No	Custom render untuk label option.
renderSelectedPreview?	(selected: any | any[]) => ReactNode	—	No	Custom render untuk preview selected value.
className?	string	''	No	ClassName tambahan.
onClose?	() => void	—	No	Callback saat dropdown ditutup.
prefixNode?	ReactNode	—	No	Node yang ditampilkan sebelum label pada trigger.
currentPage?	number	1	No	Halaman saat ini (infinite scroll).
onRemoveSelected?	(value: any) => void	—	No	Callback untuk remove selected item dari preview.
searchValue?	string	—	No	Controlled search value.
onSearchChange?	(searchTerm: string) => void	—	No	Callback saat search value berubah.
showPreviewValue?	boolean	true	No	Tampilkan preview selected value.
searchable?	boolean	true	No	Aktifkan fitur search.

Dropdown

Name	Type	Default	Required	Description
trigger	ReactNode	—	Yes	Trigger element untuk membuka dropdown.
items	ReactNode[]	—	Yes	Array of ReactNode yang akan ditampilkan sebagai item dropdown.
className?	string	''	No	ClassName tambahan untuk container trigger.
dropdownClassName?	string	''	No	ClassName tambahan untuk kotak dropdown.
dropdownStyle?	CSSProperties	—	No	Inline style tambahan untuk kotak dropdown.
disabled?	boolean	false	No	Jika true, dropdown tidak bisa dibuka.
dropdownWidth?	number	160	No	Lebar dropdown dalam pixel.

Di halaman ini

• Impor
• Contoh Penggunaan
• Props