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.