ComboBox

Single item selection

Selected:

none

1import React, { useState } from 'react'
2import ComboBox from '@hummingbot/hbui/components/combobox'
3
4const items = [
5  { id: 1, label: 'Wade Cooper' },
6  { id: 2, label: 'Arlene Mccoy' },
7  { id: 3, label: 'Devon Webb' },
8  { id: 4, label: 'Tom Cook' },
9  { id: 5, label: 'Tanya Fox' },
10  { id: 6, label: 'Hellen Schmidt' },
11]
12
13const [selected, setSelected] = useState(items[0])
14
15<ComboBox
16  placeholderName='Name' // shown in empty state
17  items={items}
18  selected={selected}
19  setSelected={setSelected}
20/>

Multiple item selection

Selected:

1import React, { useState } from 'react'
2import ComboBox from '@hummingbot/hbui/components/combobox'
3
4const items = [
5  { id: 1, label: 'Wade Cooper' },
6  { id: 2, label: 'Arlene Mccoy' },
7  { id: 3, label: 'Devon Webb' },
8  { id: 4, label: 'Tom Cook' },
9  { id: 5, label: 'Tanya Fox' },
10  { id: 6, label: 'Hellen Schmidt' },
11]
12
13// pass array instead to useState
14const [selectedMultiple, setSelectedMultiple] = useState([items[0]])
15
16<ComboBox
17  multiple={true} // enable multiple mode
18  placeholderName='People' // shown in empty state
19  items={items}
20  selected={selectedMultiple}
21  setSelected={setSelectedMultiple}
22/>