> For the complete documentation index, see [llms.txt](https://bogdanov-inc.gitbook.io/ui-konstruktor-oktell/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://bogdanov-inc.gitbook.io/ui-konstruktor-oktell/kontroly/vypadayushii-spisok.md).

# Выпадающий список

![](https://899924798-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FzcMn1glkgcrvuggFcDlD%2Fuploads%2F3CeBUGOGP0EpaoFrIhws%2Fdropdown.png?alt=media\&token=44802709-7606-4eae-a507-e57e2aed09d7)

Компонент для создания выпадающего списка для формы.

**Свойства:**

* *<mark style="color:purple;">size</mark>* - выбор размера поля ввода из предложенных значений
* *<mark style="color:purple;">value</mark>* - выбор значения по умолчанию. Содержит следующие поля:
  * **id** - уникальный id значения по умолчанию
  * **title** - текст значения по умолчанию
* *<mark style="color:purple;">required</mark>* - сделает поле обязательным для ввода
* *<mark style="color:purple;">disabled</mark>* - запретит редактирование поля, сделает его **readonly**. При выборе свойства **required** поле не должно остаться пустым во избежание ошибок.
* *<mark style="color:purple;">placeholder</mark>* - подсказка для ввода значения. Отображается при пустом **value** поля
* *<mark style="color:purple;">itemsMaxHeight</mark>* - высота выпадающего списка в <mark style="color:green;">px</mark>. Если количество элементов списка не помещается в заданную высоту, то появляется прокрутка.
* *<mark style="color:purple;">items</mark>* - список значений выпадающего списка. При выборе заменяет поле **value** на выбранное значение. Содержит следующие поля:
  * **id** - уникальный id элемента
  * **title** - текст элемента

**События:**

* *<mark style="background-color:purple;">onChange</mark>* - событие срабатывает при изменении значения **value**
* *<mark style="background-color:purple;">onSelect</mark>* - событие срабатывает при выборе определенного значения из выпадающего списка
* *<mark style="background-color:purple;">onClear</mark>* - событие срабатывает после удаления значения **value** в ручную или с помощью кнопки очистить