DropDown
A DropDown component.
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}
/>
)
}

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