# DropDown

A DropDown component.

## Usage <a href="#usage" id="usage"></a>

```jsx
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

![](/files/Od2X7LtS7bz2Tz34x770)

## Props <a href="#props" id="props"></a>

#### `header` <a href="#header" id="header"></a>

| TYPE         | DEFAULT VALUE |
| ------------ | ------------- |
| `React node` | None          |

A header that will appear at the beginning of the items menu.

#### `items` <a href="#items" id="items"></a>

| TYPE    | DEFAULT VALUE   |
| ------- | --------------- |
| `Array` | None (required) |

Use this property to define the items of the DropDown menu.

#### placeholder <a href="#placeholder" id="placeholder"></a>

| TYPE         | DEFAULT VALUE      |
| ------------ | ------------------ |
| `React node` | `"Select an item"` |

The node displayed in the button when there is no selection.

#### renderLabel <a href="#renderlabel" id="renderlabel"></a>

| 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) <a href="#onchange-index-2c-items" id="onchange-index-2c-items"></a>

| 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 <a href="#selected" id="selected"></a>

| 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 <a href="#wide" id="wide"></a>

| TYPE      | DEFAULT VALUE |
| --------- | ------------- |
| `Boolean` | `false`       |

Takes the full width if set to `true`.

#### width <a href="#width" id="width"></a>

| TYPE     | DEFAULT VALUE |
| -------- | ------------- |
| `String` | None          |

Use this prop to set the CSS width of the button.

#### disabled <a href="#disabled" id="disabled"></a>

| TYPE      | DEFAULT VALUE |
| --------- | ------------- |
| `Boolean` | `false`       |

Disable the DropDown.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://legacy-docs.aragon.org/developers/tools/aragonui/data-entry/dropdown.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.