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