---
title: "single-choice-dropdown"
description: "Overview"
permalink: /docs/build/ui-components/all-ui-components/single-choice-dropdown/
---
# single-choice-dropdown
## Overview
* `single-choice-dropdown` is supported in all versions of the JourneyApps Container and Runtime.
* It received several functional updates in version **4.84.0** of the JourneyApps Runtime.
A `single-choice-dropdown` component allows users to make a single selection from a pre-defined set of options in a dropdown component.
### Basic Example
**main.view\.xml**
```xml
...
```
## Advanced Attributes
### `align-dialog-content`
Specifies how the content of the list of options dialog should be aligned. This includes the display value of each option, as well as the header text of the dialog.
```xml
```
### `dialog-title`
Header text of the dialog that displays the list of options of the `single-choice-dropdown`.
```xml
```
### `empty-message`
Text that is displayed if no options are available to list once the user opens the `single-choice-dropdown`.
```xml
```
### `search-controls`
Set the visibility of the search box of the `single-choice-dropdown` component. `auto` shows the search box when the list of options contains 12 options or more. `none` never shows the search box, and `show` always shows the search box at the top of the list of options.
```xml
```
### `align-content`
### `align-label`
### `clear-button-visibility`
### `disabled`
### `icon-position`
### `id`
### `label-case`
### `label-color`
### `modifier-text`
### `on-change`
### `placeholder`
### `show-if`
### `hide-if`
## Common Attributes
### `border-radius`
### `bind`
### `label`
### `required`
## Component Methods
The following component methods are available when an [`id`](/docs/build/ui-components/common-attributes/id/) is assigned to the component and `component.singleChoiceDropdown({id:'my-id'})` is called from JS/TS:
### `clear`
Programmatically clear the selected value bound to the `single-choice-dropdown`.
### `clearSearch`
Programmatically clear a value entered into the search box.
### `openDropdown`
Programmatically open the list of items.
### `closeDropdown`
Programmatically close the list of items.
### `scrollDown`
Programmatically scroll down the list of items when the `single-choice-dropdown` is opened.
### `scrollIntoView`
Programmatically scroll until the `single-choice-dropdown` is visible in the view.
### `scrollUp`
Programmatically scroll up the list of items when the `single-choice-dropdown` is opened.
### `selectItem`
Programmatically select an item from the list by its label.
**main.view\.xml**
```xml
```
**main.js**
```javascript
function select() {
component.singleChoiceDropdown({id: 'my-dropdown'}).openDropdown(); // Need to open the dropdown first
component.singleChoiceDropdown({id: 'my-dropdown'}).selectItem('Yellow');
}
```
### `selectItemByIndex`
Programmatically select an item from the list by its index. **Note**: Indexes begin at 1.
**main.view\.xml**
```xml
```
**main.js**
```javascript
function select() {
component.singleChoiceDropdown({id: 'my-dropdown'}).openDropdown(); // Need to open the dropdown first
component.singleChoiceDropdown({id: 'my-dropdown'}).selectItemByIndex(2);
// Selects "Red"
}
```
### `setSearch`
Programmatically enter a search value and triggers a search of the `single-choice-dropdown`.