Search…
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

TYPE
DEFAULT VALUE
React node
None
A header that will appear at the beginning of the items menu.

items

TYPE
DEFAULT VALUE
Array
None (required)
Use this property to define the items of the DropDown menu.

placeholder

TYPE
DEFAULT VALUE
React node
"Select an item"
The node displayed in the button when there is no selection.

renderLabel

TYPE
DEFAULT VALUE
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)

TYPE
DEFAULT VALUE
Function
None (required)
This callback is called whenever the user selects a new item.

Arguments

  • index (Number): Index of the newly selected item in props.items.
  • items (Array): the items passed in props.items.

selected

TYPE
DEFAULT VALUE
Number
-1
Set this prop to the index of the active item. Set to -1 to unselect and display the placeholder.

wide

TYPE
DEFAULT VALUE
Boolean
false
Takes the full width if set to true.

width

TYPE
DEFAULT VALUE
String
None
Use this prop to set the CSS width of the button.

disabled

TYPE
DEFAULT VALUE
Boolean
false
Disable the DropDown.
Copy link
On this page
Usage
Demonstration
Props