DropDown

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
header
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.

DateRangePicker

Switch

Last modified 2mo ago

Copy link

On this page

Usage

Demonstration

Props

Usage

Demonstration

Props

`header`

`items`

placeholder

renderLabel

Props

onChange(index, items)

Arguments

selected

wide

width

disabled