DropDown
A DropDown component.
Usage
import { DropDown } from '@aragon/ui'
function App() {
const [selected, setSelected] = useState(0)
return (
<DropDown
items={['Wandering Thunder', 'Black Wildflower', 'Ancient Paper']}
selected={selected}
onChange={setSelected}
/>
)
}
Demonstration

Props
header
header
React node
None
A header that will appear at the beginning of the items menu.
items
items
Array
None (required)
Use this property to define the items of the DropDown menu.
placeholder
React node
"Select an item"
The node displayed in the button when there is no selection.
renderLabel
React component
({ selectedLabel }) => selectedLabel
A function (or React component), used to display the button label.
Props
selectedLabel
(String
): label of the selected item.selectedIndex
(Number
): index of the selected item.
onChange(index, items)
Function
None (required)
This callback is called whenever the user selects a new item.
Arguments
index
(Number
): Index of the newly selected item inprops.items
.items
(Array
): the items passed inprops.items
.
selected
Number
-1
Set this prop to the index of the active item. Set to -1
to unselect and display the placeholder.
wide
Boolean
false
Takes the full width if set to true
.
width
String
None
Use this prop to set the CSS width of the button.
disabled
Boolean
false
Disable the DropDown.
Last updated
Was this helpful?