diff --git a/documentation/%D0%9A%D0%BE%D0%BD%D1%81%D1%82%D1%80%D1%83%D0%BA%D1%82%D0%BE%D1%80%20%D0%BA%D0%BB%D0%B0%D1%81%D1%81%D0%B0%20DropDown.html b/documentation/%D0%9A%D0%BE%D0%BD%D1%81%D1%82%D1%80%D1%83%D0%BA%D1%82%D0%BE%D1%80%20%D0%BA%D0%BB%D0%B0%D1%81%D1%81%D0%B0%20DropDown.html
index 3f3f9f3..4bf47c8 100644
--- a/documentation/%D0%9A%D0%BE%D0%BD%D1%81%D1%82%D1%80%D1%83%D0%BA%D1%82%D0%BE%D1%80%20%D0%BA%D0%BB%D0%B0%D1%81%D1%81%D0%B0%20DropDown.html
+++ b/documentation/%D0%9A%D0%BE%D0%BD%D1%81%D1%82%D1%80%D1%83%D0%BA%D1%82%D0%BE%D1%80%20%D0%BA%D0%BB%D0%B0%D1%81%D1%81%D0%B0%20DropDown.html
@@ -6,11 +6,13 @@
 
     <script src="scripts/prettify/prettify.js"></script>
     <script src="scripts/prettify/lang-css.js"></script>
+
     <!--[if lt IE 9]>
       <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
     <![endif]-->
     <link type="text/css" rel="stylesheet" href="styles/prettify-tomorrow.css" />
     <link type="text/css" rel="stylesheet" href="styles/jsdoc-default.css" />
+    <link type="text/css" rel="stylesheet" href="styles/descriptionOptions.css" />
   </head>
 
   <body>
@@ -77,10 +79,14 @@
             <h5>Example</h5>
 
             <pre class="prettyprint"><code>options = {
- selector: 'Уникальный селектор',
+      selector: 'Уникальный селектор',
       selected: 'Выбранный элемент',
       placeholder: '...',
       items: [string|number|object],
+      darkTheme: true/false,
+      searchMode: true/false,
+      closeOnSelect:  true/false,
+      lenguage: 'ru/en',
       styles: {
         head: {
           background: '...',
@@ -89,6 +95,7 @@
         chips: {...},
         caret: {...},
         placeholder: {...},
+        lable: {..},
       },
       event: '...',
       url: 'http/...',
@@ -97,6 +104,79 @@
 }</code></pre>
           </div>
         </article>
+
+        <h4>Описание всех параметров селекта</h4>
+        <section>
+          <ul class="descriptionOptions">
+            <li>
+              <strong>selector</strong> - <strong>*обязательный параметр(индефикатор)</strong>,
+              который задаеться при создании селекта.
+            </li>
+            <li>
+              <strong>selected</strong> - необязательный параметр, в который передается элемент
+              который будет выбран изначально в селекте.
+            </li>
+            <li>
+              <strong>placeholder</strong> - необязательный параметр, в который передается текст
+              плейсхолдера селекта.
+            </li>
+            <li>
+              <strong>items</strong> -
+              <strong
+                >*обязательный параметр(эсли не указан другой способ получения данных (url))</strong
+              >, это массив елементов, которые будут отображаться в селекте при выборе.
+            </li>
+            <li>
+              <strong>darkTheme</strong> - необязательный параметр, который отвечает за включение
+              светлой/темной темы по умолчанию, стоит темная тема(darkTheme == true).
+            </li>
+            <li>
+              <strong>searchMode</strong> - необязательный параметр, который добавляет живой поиск
+              по элеметам селекта.
+            </li>
+            <li>
+              <strong>closeOnSelect</strong> - необязательный параметр, который отвечает за
+              поведения селекта при открытии, если closeOnSelect: false, тогда при выборе елемента в
+              селекте закрытия не происходит, и можно выбрать другой элемент по умолчанию,
+              closeOnSelect:true.
+            </li>
+
+            <li>
+              <strong>lenguage</strong> - необязательный параметр, отвечающий за локализацию
+              некоторых текстовых элементов. по умолчанию стоит 'en'. Можно добавить свою
+              локализацию, с помощью функции <a href="global.html#addLenguage">addLanguage()</a>,
+              передав туда объект с полями для текста.
+            </li>
+            <li>
+              <strong>event</strong> - необязательный параметр, который отвечает за поведения
+              селекта, передавая в этот параметр, евент по типу 'mouseenter', селект будет
+              открываться при наведении.
+            </li>
+            <li>
+              <strong>url</strong> -
+              <strong
+                >*обязательный параметр(эсли не указан другой способ получения данных
+                (items)),</strong
+              >
+              htylthbn данные которые приходят с бекэнда в формате {id:"", title: "", value: ""}.
+            </li>
+            <li>
+              <strong>multiselect</strong> - необязательный параметр, который отвечает за поведения
+              селекта, добавляет возможность выбирать несколько элементов. Выбранные элементы
+              отрисовываются как обычный текст, через запятую.
+            </li>
+            <li>
+              <strong>multiselectTag</strong> - необязательный параметр, который отвечает за
+              поведения селекта, для него,
+              <strong>***работает только в месте с подключением multiselect.</strong>
+            </li>
+            <li>
+              <strong>styles</strong> - необязательный параметр, который отвечает за кастомизацию
+              элементов селекта, в него передаются обьекты с CSS свойствами для кастомизируемых
+              элементов.
+            </li>
+          </ul>
+        </section>
       </section>
     </div>
 
@@ -121,6 +201,8 @@
       <ul>
         <li><a href="global.html#addOptionsBehaviour">#addOptionsBehaviour</a></li>
         <li><a href="global.html#close">#close</a></li>
+        <li><a href="global.html#checkTheme">#checkTheme</a></li>
+        <li><a href="global.html#closeSelectClick">#closeSelectClick</a></li>
         <li><a href="global.html#init">#init</a></li>
         <li><a href="global.html#initEvent">#initEvent</a></li>
         <li><a href="global.html#initSelected">#initSelected</a></li>
@@ -131,6 +213,7 @@
       </ul>
       <h3>Public methods</h3>
       <ul>
+        <li><a href="global.html#addLenguage">addLenguage</a></li>
         <li><a href="global.html#addItem">addItem</a></li>
         <li><a href="global.html#buttonControl">buttonControl</a></li>
         <li><a href="global.html#deleteItem">deleteItem</a></li>
diff --git a/documentation/DropDown.html b/documentation/DropDown.html
index b178481..6c4b60a 100644
--- a/documentation/DropDown.html
+++ b/documentation/DropDown.html
@@ -22,7 +22,7 @@
           <h2>
             <span class="attribs"><span class="type-signature"></span></span>DropDown<span
               class="signature"
-              >()</span
+              >(options)</span
             ><span class="type-signature"></span>
           </h2>
 
@@ -34,7 +34,8 @@
             <h2>Constructor</h2>
 
             <h4 class="name" id="DropDown">
-              <span class="type-signature"></span>new DropDown<span class="signature">()</span
+              <span class="type-signature"></span>new DropDown<span class="signature"
+                >(options)</span
               ><span class="type-signature"></span>
             </h4>
 
@@ -62,13 +63,6 @@
             </dl>
           </div>
 
-          <h3 class="subsection-title">Classes</h3>
-
-          <dl>
-            <dt><a href="DropDown.html">DropDown</a></dt>
-            <dd></dd>
-          </dl>
-
           <h3 class="subsection-title">Members</h3>
 
           <h4 class="name" id="indexes">
@@ -131,6 +125,8 @@
       <ul>
         <li><a href="global.html#addOptionsBehaviour">#addOptionsBehaviour</a></li>
         <li><a href="global.html#close">#close</a></li>
+        <li><a href="global.html#checkTheme">#checkTheme</a></li>
+        <li><a href="global.html#closeSelectClick">#closeSelectClick</a></li>
         <li><a href="global.html#init">#init</a></li>
         <li><a href="global.html#initEvent">#initEvent</a></li>
         <li><a href="global.html#initSelected">#initSelected</a></li>
@@ -141,6 +137,7 @@
       </ul>
       <h3>Public methods</h3>
       <ul>
+        <li><a href="global.html#addLenguage">addLenguage</a></li>
         <li><a href="global.html#addItem">addItem</a></li>
         <li><a href="global.html#buttonControl">buttonControl</a></li>
         <li><a href="global.html#deleteItem">deleteItem</a></li>
diff --git a/documentation/cg-dropdown.js.html b/documentation/cg-dropdown.js.html
index 4142af4..4b7f4dc 100644
--- a/documentation/cg-dropdown.js.html
+++ b/documentation/cg-dropdown.js.html
@@ -23,9 +23,11 @@
             createSelected,
             customStyles,
             getFormatItem,
+            getSelectText,
             customStylesFormat,
             nativOptionMultiple,
             nativOptionOrdinary,
+            clearSelect,
           } from './components/utils';
           import {
             createBreadcrumb,
@@ -33,6 +35,7 @@
             createNativSelectOption,
             createNativeSelect,
           } from './components/create-element';
+          import { ru, en } from './language/language';
           
           /**
            * @class Описание класса DropDown
@@ -110,6 +113,10 @@
                 selected: 'Выбранный элемент',
                 placeholder: '...',
                 items: [string|number|object],
+                darkTheme: true/false,
+                searchMode: true/false,
+                closeOnSelect:  true/false,
+                lenguage: 'ru/en',
                 styles: {
                   head: {
                     background: '...',
@@ -118,6 +125,7 @@
                   chips: {...},
                   caret: {...},
                   placeholder: {...},
+                  lable: {..},
                 },
                 event: '...',
                 url: 'http/...',
@@ -130,6 +138,7 @@
               this.#init(options);
               this.#render();
               this.#initEvent();
+              this.#closeSelectClick();
             }
           
             /**
@@ -246,6 +255,7 @@
              * @method buttonControl
              */
             buttonControl(button, method) {
+              this.btn = button;
               button.addEventListener('click', () => {
                 if (method === 'open') {
                   this.#open(true);
@@ -257,6 +267,29 @@
               });
             }
           
+            /**
+             * Метод экземпляра класса DropDown
+             * @param {object} lenguage объект в котором находятся поля для подключения языка имеет два обязательных поля placeholder, textInListSearch
+             * @description метод позволяющий заменить плейсхолдер в поиске и текст который выводится если нет результата
+             * @method addLenguage
+             */
+            addLenguage(lenguage) {
+              const { placeholder, textInListSearch } = lenguage;
+              const { searchMode } = this.#options;
+          
+              if (searchMode &amp;&amp; searchMode == true) {
+                const search = this.#element.querySelector('.inputSearch');
+                const textNoRezult = this.#element.querySelector('.noRezult');
+                const textNode = document.createTextNode(textInListSearch);
+          
+                search.setAttribute('placeholder', placeholder);
+                search.setAttribute('placeholder', placeholder);
+          
+                textNoRezult.innerText = '';
+                textNoRezult.appendChild(textNode);
+              }
+            }
+          
             /**
              * Приватный метод инициализации экземпляра класса DropDown
              * @method #init
@@ -279,6 +312,7 @@
                     'MAN',
                     'max',
                   ],
+                  darkTheme: true,
                   multiselect: true,
                   multiselectTag: true,
                 }
@@ -295,13 +329,14 @@
           
               this.#element = elem;
           
-              this.#element.addEventListener('click', () => {
+              this.#element.addEventListener('click', (e) => {
+                e.preventDefault();
                 this.#open();
               });
           
               this.#items = [];
           
-              if (multiselect) {
+              if (multiselect &amp;&amp; multiselect == true) {
                 this.#selectedItems = [];
               }
           
@@ -333,7 +368,7 @@
              * @protected
              */
             #initSelected(select) {
-              const { styles, selected, placeholder } = this.#options;
+              const { styles, selected, placeholder, lable } = this.#options;
           
               if (selected) {
                 createSelected(this.#element, selected);
@@ -343,13 +378,23 @@
                 createSelected(this.#element, 'Select...');
               }
           
-              if (styles) {
-                customStyles(this.#element, styles);
-              }
-          
               if (select) {
                 createSelected(this.#element, select, styles);
               }
+          
+              if (lable) {
+                const lableItem = document.createElement('h1');
+                const textLable = document.createTextNode(lable);
+          
+                lableItem.appendChild(textLable);
+                lableItem.classList.add('label');
+          
+                this.#element.insertAdjacentElement('beforebegin', lableItem);
+              }
+          
+              if (styles) {
+                customStyles(this.#element, styles);
+              }
             }
           
             /**
@@ -360,7 +405,7 @@
              * @description Рендер елементов в селекте.
              */
             #render(select) {
-              const { styles, multiselect, searchMode } = this.#options;
+              const { styles, multiselect, searchMode, multiselectTag, darkTheme, lenguage } = this.#options;
               const random = Math.random().toString(36).substring(2, 10);
           
               if (select || (select &amp;&amp; styles)) {
@@ -371,16 +416,23 @@
               }
           
               const ulList = document.createElement('ul');
-              const intputSearch = createInputSearch(random);
-              this.random = random;
-          
               const nativSelect = createNativeSelect();
           
-              ulList.classList.add('list');
+              let intputSearch = '';
+              this.random = random;
+          
               if (searchMode) {
+                if (lenguage === 'ru') {
+                  intputSearch = createInputSearch(random, ru.placeholder);
+                } else {
+                  intputSearch = createInputSearch(random, en.placeholder);
+                }
+          
                 ulList.appendChild(intputSearch);
               }
           
+              ulList.classList.add('list');
+          
               if (styles) {
                 const { list } = styles;
                 customStylesFormat(list, ulList);
@@ -398,12 +450,16 @@
                 liItem.classList.add('list__item');
                 strongItem.classList.add('category');
           
-                if (multiselect) {
+                if (multiselect &amp;&amp; multiselect == true) {
                   const checkBox = document.createElement('input');
                   checkBox.type = 'checkbox';
                   checkBox.setAttribute('id', `chbox-${dataItem.id}`);
-          
                   liItem.appendChild(checkBox);
+          
+                  if (multiselectTag &amp;&amp; multiselectTag == true) {
+                    checkBox.classList.add('displayHide');
+                  }
+          
                   nativSelect.setAttribute('multiple', 'multiple');
                 }
           
@@ -431,9 +487,45 @@
                 return item;
               });
           
+              if (darkTheme == false) {
+                this.#checkTheme();
+              }
+          
+              this.#list = this.#element.querySelector('.list');
+              this.#caret = this.#element.querySelector('.caret');
+          
               this.#addOptionsBehaviour();
             }
           
+            /**
+             * Приватный метод рендера экземпляра класса DropDown
+             * @protected
+             * @method #checkTheme
+             * @description Изменяет цветовую схему с темной на светлую.
+             */
+            #checkTheme() {
+              const { darkTheme, searchMode } = this.#options;
+          
+              const select = this.#element.querySelector('.cg-select');
+              const caret = this.#element.querySelector('.caret');
+              const list = this.#element.querySelector('ul.list');
+              const search = this.#element.querySelector('.inputSearch');
+          
+              if (darkTheme == false) {
+                select.classList.add('selectWhite');
+                caret.classList.add('caretWhite');
+                list.classList.add('listWhite');
+          
+                if (searchMode == true) {
+                  search.classList.add('inputWhite');
+                }
+              } else if (darkTheme == true || !darkTheme) {
+                return;
+              } else {
+                throw new Error('Styles error or invalid value entered!');
+              }
+            }
+          
             /**
              * Приватный метод рендера экземпляра класса DropDown
              *@protected
@@ -441,7 +533,7 @@
              * @description Рендер елементов в селекте переданных с URL и их настойка
              */
             async #renderUrl() {
-              const { url, items, multiselect } = this.#options;
+              const { url, items, multiselect, multiselectTag } = this.#options;
           
               if (items) {
                 return;
@@ -468,9 +560,12 @@
                 const liUrl = document.createElement('li');
                 const textUrl = document.createTextNode(item.title);
           
-                if (multiselect) {
+                if (multiselect &amp;&amp; multiselect == true) {
                   const checkBox = document.createElement('input');
                   checkBox.type = 'checkbox';
+                  if (multiselectTag &amp;&amp; multiselectTag == true) {
+                    checkBox.classList.add('displayHide');
+                  }
           
                   checkBox.setAttribute('id', `chbox-${item.id}`);
                   nativSelect.setAttribute('multiple', 'multiple');
@@ -509,9 +604,6 @@
              * @method #open
              */
             #open(oneClick) {
-              this.#list = this.#element.querySelector('.list');
-              this.#caret = this.#element.querySelector('.caret');
-          
               if (oneClick === true) {
                 this.#list.classList.add('open');
                 this.#caret.classList.add('caret_rotate');
@@ -539,14 +631,23 @@
              * @method #addOptionsBehaviour
              */
             #addOptionsBehaviour() {
-              const { multiselect, placeholder, selected, multiselectTag, searchMode } = this.#options;
+              const {
+                multiselect,
+                placeholder,
+                selected,
+                multiselectTag,
+                searchMode,
+                closeOnSelect,
+                darkTheme,
+              } = this.#options;
           
               const options = this.#element.querySelectorAll('.list__item');
               const select = this.#element.querySelector('.selected');
               const nativOption = this.#element.querySelectorAll('.nativSelect__nativOption');
+          
               const ulMultipul = document.createElement('ul');
           
-              if (multiselect) {
+              if (multiselect &amp;&amp; multiselect == true) {
                 ulMultipul.classList.add('multiselect-tag');
                 select.classList.add('overflow-hidden');
               }
@@ -557,12 +658,26 @@
           
               options.forEach((option, index) => {
                 option.addEventListener('click', (event) => {
+                  const dataSelectText = {
+                    placeholder,
+                    selected,
+                    selectedItems: this.#selectedItems,
+                    indexes: this.#indexes,
+                    darkTheme,
+                    multiselectTag,
+                  };
+          
                   const item = this.#items[index];
           
-                  if (multiselect) {
+                  if (closeOnSelect == false || (multiselect &amp;&amp; multiselect == true)) {
                     event.stopPropagation();
-                    option.classList.toggle('active');
+                    event.preventDefault();
+                  }
           
+                  const checkIndex = this.#indexes.indexOf(index);
+          
+                  if (multiselect &amp;&amp; multiselect == true) {
+                    option.classList.toggle('active');
                     const checkBox = option.querySelector('input[type="checkbox"]');
           
                     if (checkBox) {
@@ -570,16 +685,12 @@
                         checkBox.checked = !checkBox.checked;
                       }
           
-                      const checkIndex = this.#indexes.indexOf(index);
-          
                       if (checkIndex === -1) {
                         nativOptionMultiple(nativOption, item.title, true);
-          
                         this.#indexes.push(index);
-          
                         select.innerText = '';
           
-                        if (multiselectTag) {
+                        if (multiselectTag &amp;&amp; multiselectTag == true) {
                           this.#selectedItems.push(item);
                           select.appendChild(ulMultipul);
           
@@ -596,25 +707,20 @@
                           select.innerText = this.#selectedItems;
                         }
                       } else {
-                        if (multiselectTag) {
+                        if (multiselectTag &amp;&amp; multiselectTag == true) {
                           const tagItem = document.getElementById(`tag-${index}-${item.id}`);
                           ulMultipul.removeChild(tagItem);
                         }
+          
                         this.#indexes.splice(checkIndex, 1);
                         this.#selectedItems.splice(checkIndex, 1);
                         nativOptionMultiple(nativOption, item.title, false);
                       }
           
                       if (!this.#selectedItems.length) {
-                        if (placeholder) {
-                          select.innerText = placeholder;
-                        } else if (selected) {
-                          select.innerText = selected;
-                        } else {
-                          select.innerText = 'Select...';
-                        }
+                        getSelectText(dataSelectText, select);
                       } else {
-                        if (multiselectTag) {
+                        if (multiselectTag &amp;&amp; multiselectTag == true) {
                           select.appendChild(ulMultipul);
                         } else {
                           select.innerText = this.#selectedItems;
@@ -624,6 +730,7 @@
                   } else {
                     select.innerText = item.title;
                     this.#selectedItems = item;
+          
                     nativOptionOrdinary(nativOption, item.title);
           
                     options.forEach((option) => {
@@ -631,6 +738,8 @@
                     });
                     option.classList.add('active');
                   }
+          
+                  clearSelect(select, this.#element, dataSelectText);
                 });
               });
             }
@@ -642,13 +751,22 @@
              * @method #searchMode
              */
             #searchMode(random) {
+              const { lenguage } = this.#options;
+          
               const input = this.#element.querySelector(`#searchSelect-${random}`);
               const searchSelect = this.#element.querySelectorAll('.list__item');
               const result = document.createElement('p');
-              const textNode = document.createTextNode('No matches...');
+          
+              let textNode = '';
+              if (lenguage === 'ru') {
+                textNode = document.createTextNode(`${ru.textInListSearch}`);
+              } else {
+                textNode = document.createTextNode(`${en.textInListSearch}`);
+              }
           
               result.appendChild(textNode);
               result.classList.add('displayHide');
+              result.classList.add('noRezult');
               input.parentElement.appendChild(result);
           
               input.addEventListener('click', (e) => {
@@ -699,6 +817,27 @@
                 }
               }
             }
+          
+            /**
+             * Приватный метод экземпляра класса DropDown
+             * @protected
+             * @description Закрывает список по клику вне элемента
+             * @method #closeSelectClick
+             */
+            #closeSelectClick() {
+              const dropdown = document.querySelector(`${this.#options.selector}`);
+          
+              document.addEventListener('click', (e) => {
+                const withinBoundaries = e.composedPath().includes(dropdown);
+                if (!withinBoundaries) {
+                  if (this.btn) {
+                    return;
+                  } else {
+                    this.#close();
+                  }
+                }
+              });
+            }
           }
 </code></pre>
         </article>
@@ -726,6 +865,8 @@
       <ul>
         <li><a href="global.html#addOptionsBehaviour">#addOptionsBehaviour</a></li>
         <li><a href="global.html#close">#close</a></li>
+        <li><a href="global.html#checkTheme">#checkTheme</a></li>
+        <li><a href="global.html#closeSelectClick">#closeSelectClick</a></li>
         <li><a href="global.html#init">#init</a></li>
         <li><a href="global.html#initEvent">#initEvent</a></li>
         <li><a href="global.html#initSelected">#initSelected</a></li>
@@ -736,6 +877,7 @@
       </ul>
       <h3>Public methods</h3>
       <ul>
+        <li><a href="global.html#addLenguage">addLenguage</a></li>
         <li><a href="global.html#addItem">addItem</a></li>
         <li><a href="global.html#buttonControl">buttonControl</a></li>
         <li><a href="global.html#deleteItem">deleteItem</a></li>
diff --git a/documentation/create-element.js.html b/documentation/create-element.js.html
index 0bd657a..beb0d06 100644
--- a/documentation/create-element.js.html
+++ b/documentation/create-element.js.html
@@ -65,6 +65,7 @@
               }
             
               svgIcon.addEventListener('click', (event) => {
+                event.preventDefault();
                 event.stopPropagation();
                 nativOptionMultiple(nativOption, title, false);
             
@@ -100,7 +101,6 @@
             export function createNativeSelect() {
               const nativSelect = document.createElement('select');
             
-              nativSelect.setAttribute('form', 'data');
               nativSelect.setAttribute('name', 'dataSelect');
               nativSelect.classList.add('nativSelect');
               return nativSelect;
@@ -120,15 +120,25 @@
             /**
              * Метод который создает поиск элементов в селекте
              * @param {string} random уникальное значение для input элемента.
+             * @param {string} lenguage текст на определенном языке переданный из файла language.js
              * @returns {HTMLInputElement} Возвращает сформированный input елемент.
              */
-            export function createInputSearch(random) {
+            export function createInputSearch(random, lenguage) {
               const intputSearch = document.createElement('input');
             
               intputSearch.type = 'text';
               intputSearch.classList.add('inputSearch');
               intputSearch.setAttribute('id', `searchSelect-${random}`);
-              intputSearch.setAttribute('placeholder', 'Search...');
+            
+              if (lenguage) {
+                intputSearch.setAttribute('placeholder', `${lenguage}`);
+              } else {
+                intputSearch.setAttribute('placeholder', 'Search...');
+              }
+            
+              intputSearch.addEventListener('click', (e) => {
+                e.preventDefault();
+              });
             
               return intputSearch;
             }
@@ -158,6 +168,8 @@
       <ul>
         <li><a href="global.html#addOptionsBehaviour">#addOptionsBehaviour</a></li>
         <li><a href="global.html#close">#close</a></li>
+        <li><a href="global.html#checkTheme">#checkTheme</a></li>
+        <li><a href="global.html#closeSelectClick">#closeSelectClick</a></li>
         <li><a href="global.html#init">#init</a></li>
         <li><a href="global.html#initEvent">#initEvent</a></li>
         <li><a href="global.html#initSelected">#initSelected</a></li>
@@ -168,6 +180,7 @@
       </ul>
       <h3>Public methods</h3>
       <ul>
+        <li><a href="global.html#addLenguage">addLenguage</a></li>
         <li><a href="global.html#addItem">addItem</a></li>
         <li><a href="global.html#buttonControl">buttonControl</a></li>
         <li><a href="global.html#deleteItem">deleteItem</a></li>
diff --git a/documentation/global.html b/documentation/global.html
index 8e3aa6c..f768fe3 100644
--- a/documentation/global.html
+++ b/documentation/global.html
@@ -46,7 +46,7 @@
               <ul class="dummy">
                 <li>
                   <a href="cg-dropdown.js.html">cg-dropdown.js</a>,
-                  <a href="cg-dropdown.js.html#line232">line 232</a>
+                  <a href="cg-dropdown.js.html#line272">line 272</a>
                 </li>
               </ul>
             </dd>
@@ -68,6 +68,7 @@
           'MAN',
           'max',
         ],
+        darkTheme: true,
         multiselect: true,
         multiselectTag: true,
       }</code></pre>
@@ -92,7 +93,27 @@
               <ul class="dummy">
                 <li>
                   <a href="cg-dropdown.js.html">cg-dropdown.js</a>,
-                  <a href="cg-dropdown.js.html#line480">line 480</a>
+                  <a href="cg-dropdown.js.html#line606">line 606</a>
+                </li>
+              </ul>
+            </dd>
+          </dl>
+
+          <h4 class="name" id="checkTheme">
+            <span class="type-signature">(protected) </span>#checkTheme<span class="signature"
+              >()</span
+            ><span class="type-signature"></span>
+          </h4>
+
+          <div class="description">Изменяет цветовую схему с темной на светлую.</div>
+
+          <dl class="details">
+            <dt class="tag-source">Source:</dt>
+            <dd class="tag-source">
+              <ul class="dummy">
+                <li>
+                  <a href="cg-dropdown.js.html">cg-dropdown.js</a>,
+                  <a href="cg-dropdown.js.html#line479">line 479</a>
                 </li>
               </ul>
             </dd>
@@ -111,7 +132,27 @@
               <ul class="dummy">
                 <li>
                   <a href="cg-dropdown.js.html">cg-dropdown.js</a>,
-                  <a href="cg-dropdown.js.html#line469">line 469</a>
+                  <a href="cg-dropdown.js.html#line595">line 595</a>
+                </li>
+              </ul>
+            </dd>
+          </dl>
+
+          <h4 class="name" id="closeSelectClick">
+            <span class="type-signature">(protected) </span>#closeSelectClick<span class="signature"
+              >()</span
+            ><span class="type-signature"></span>
+          </h4>
+
+          <div class="description">Закрывает список по клику вне элемента</div>
+
+          <dl class="details">
+            <dt class="tag-source">Source:</dt>
+            <dd class="tag-source">
+              <ul class="dummy">
+                <li>
+                  <a href="cg-dropdown.js.html">cg-dropdown.js</a>,
+                  <a href="cg-dropdown.js.html#line800">line 800</a>
                 </li>
               </ul>
             </dd>
@@ -131,7 +172,7 @@
               <ul class="dummy">
                 <li>
                   <a href="cg-dropdown.js.html">cg-dropdown.js</a>,
-                  <a href="cg-dropdown.js.html#line575">line 575</a>
+                  <a href="cg-dropdown.js.html#line776">line 776</a>
                 </li>
               </ul>
             </dd>
@@ -179,7 +220,7 @@
               <ul class="dummy">
                 <li>
                   <a href="cg-dropdown.js.html">cg-dropdown.js</a>,
-                  <a href="cg-dropdown.js.html#line299">line 299</a>
+                  <a href="cg-dropdown.js.html#line341">line 341</a>
                 </li>
               </ul>
             </dd>
@@ -227,7 +268,7 @@
               <ul class="dummy">
                 <li>
                   <a href="cg-dropdown.js.html">cg-dropdown.js</a>,
-                  <a href="cg-dropdown.js.html#line449">line 449</a>
+                  <a href="cg-dropdown.js.html#line578">line 578</a>
                 </li>
               </ul>
             </dd>
@@ -275,7 +316,7 @@
               <ul class="dummy">
                 <li>
                   <a href="cg-dropdown.js.html">cg-dropdown.js</a>,
-                  <a href="cg-dropdown.js.html#line327">line 327</a>
+                  <a href="cg-dropdown.js.html#line379">line 379</a>
                 </li>
               </ul>
             </dd>
@@ -295,7 +336,7 @@
               <ul class="dummy">
                 <li>
                   <a href="cg-dropdown.js.html">cg-dropdown.js</a>,
-                  <a href="cg-dropdown.js.html#line393">line 393</a>
+                  <a href="cg-dropdown.js.html#line508">line 508</a>
                 </li>
               </ul>
             </dd>
@@ -341,7 +382,7 @@
               <ul class="dummy">
                 <li>
                   <a href="cg-dropdown.js.html">cg-dropdown.js</a>,
-                  <a href="cg-dropdown.js.html#line617">line 617</a>
+                  <a href="cg-dropdown.js.html#line726">line 726</a>
                 </li>
               </ul>
             </dd>
@@ -392,7 +433,58 @@
               <ul class="dummy">
                 <li>
                   <a href="cg-dropdown.js.html">cg-dropdown.js</a>,
-                  <a href="cg-dropdown.js.html#line107">line 107</a>
+                  <a href="cg-dropdown.js.html#line123">line 123</a>
+                </li>
+              </ul>
+            </dd>
+          </dl>
+
+          <h4 class="name" id="addLenguage">
+            <span class="type-signature"></span>addLenguage<span class="signature">(lenguage)</span
+            ><span class="type-signature"></span>
+          </h4>
+
+          <div class="description">
+            метод позволяющий заменить плейсхолдер в поиске и текст который выводится если нет
+            результата
+          </div>
+
+          <h5>Parameters:</h5>
+
+          <table class="params">
+            <thead>
+              <tr>
+                <th>Name</th>
+
+                <th>Type</th>
+
+                <th class="last">Description</th>
+              </tr>
+            </thead>
+
+            <tbody>
+              <tr>
+                <td class="name"><code>lenguage</code></td>
+
+                <td class="type">
+                  <span class="param-type">object</span>
+                </td>
+
+                <td class="description last">
+                  объект в котором находятся поля для подключения языка имеет два обязательных поля
+                  placeholder, textInListSearch
+                </td>
+              </tr>
+            </tbody>
+          </table>
+
+          <dl class="details">
+            <dt class="tag-source">Source:</dt>
+            <dd class="tag-source">
+              <ul class="dummy">
+                <li>
+                  <a href="cg-dropdown.js.html">cg-dropdown.js</a>,
+                  <a href="cg-dropdown.js.html#line249">line 249</a>
                 </li>
               </ul>
             </dd>
@@ -450,7 +542,7 @@
               <ul class="dummy">
                 <li>
                   <a href="cg-dropdown.js.html">cg-dropdown.js</a>,
-                  <a href="cg-dropdown.js.html#line213">line 213</a>
+                  <a href="cg-dropdown.js.html#line229">line 229</a>
                 </li>
               </ul>
             </dd>
@@ -498,7 +590,7 @@
               <ul class="dummy">
                 <li>
                   <a href="cg-dropdown.js.html">cg-dropdown.js</a>,
-                  <a href="cg-dropdown.js.html#line129">line 129</a>
+                  <a href="cg-dropdown.js.html#line145">line 145</a>
                 </li>
               </ul>
             </dd>
@@ -517,7 +609,7 @@
               <ul class="dummy">
                 <li>
                   <a href="cg-dropdown.js.html">cg-dropdown.js</a>,
-                  <a href="cg-dropdown.js.html#line147">line 147</a>
+                  <a href="cg-dropdown.js.html#line163">line 163</a>
                 </li>
               </ul>
             </dd>
@@ -564,7 +656,7 @@
               <ul class="dummy">
                 <li>
                   <a href="cg-dropdown.js.html">cg-dropdown.js</a>,
-                  <a href="cg-dropdown.js.html#line192">line 192</a>
+                  <a href="cg-dropdown.js.html#line208">line 208</a>
                 </li>
               </ul>
             </dd>
@@ -609,7 +701,7 @@
               <ul class="dummy">
                 <li>
                   <a href="cg-dropdown.js.html">cg-dropdown.js</a>,
-                  <a href="cg-dropdown.js.html#line179">line 179</a>
+                  <a href="cg-dropdown.js.html#line195">line 195</a>
                 </li>
               </ul>
             </dd>
@@ -667,7 +759,7 @@
               <ul class="dummy">
                 <li>
                   <a href="cg-dropdown.js.html">cg-dropdown.js</a>,
-                  <a href="cg-dropdown.js.html#line157">line 157</a>
+                  <a href="cg-dropdown.js.html#line173">line 173</a>
                 </li>
               </ul>
             </dd>
@@ -697,6 +789,8 @@
       <ul>
         <li><a href="global.html#addOptionsBehaviour">#addOptionsBehaviour</a></li>
         <li><a href="global.html#close">#close</a></li>
+        <li><a href="global.html#checkTheme">#checkTheme</a></li>
+        <li><a href="global.html#closeSelectClick">#closeSelectClick</a></li>
         <li><a href="global.html#init">#init</a></li>
         <li><a href="global.html#initEvent">#initEvent</a></li>
         <li><a href="global.html#initSelected">#initSelected</a></li>
@@ -707,6 +801,7 @@
       </ul>
       <h3>Public methods</h3>
       <ul>
+        <li><a href="global.html#addLenguage">addLenguage</a></li>
         <li><a href="global.html#addItem">addItem</a></li>
         <li><a href="global.html#buttonControl">buttonControl</a></li>
         <li><a href="global.html#deleteItem">deleteItem</a></li>
diff --git a/documentation/index.html b/documentation/index.html
index 50768ce..806c98f 100644
--- a/documentation/index.html
+++ b/documentation/index.html
@@ -23,12 +23,30 @@
           реализованны методы взаимодействия с селектом
         </p>
 
+        <h5>Для создания компонета нужно:</h5>
+        <ul>
+          <li>Создать button елемент</li>
+          <li>Присвоить ему класс cg-dropdown</li>
+          <li>Присвоить ему уникальный класс, например(cg-dropdown_categories)</li>
+          <li>Создать новый экземпляр класса(new DropDown)</li>
+          <li>Передать все желаемые настройки как объект</li>
+        </ul>
+        <p>
+          <strong>*Все настройки можно посмореть в вкладке</strong>
+          <a
+            href="%25D0%259A%25D0%25BE%25D0%25BD%25D1%2581%25D1%2582%25D1%2580%25D1%2583%25D0%25BA%25D1%2582%25D0%25BE%25D1%2580%2520%25D0%25BA%25D0%25BB%25D0%25B0%25D1%2581%25D1%2581%25D0%25B0%2520DropDown.html"
+            >Конструктор класса</a
+          >
+        </p>
+
         <h5>Доступна возможность кастомизации основных элементов, таких как:</h5>
         <ul>
           <li>Кнопка селекта</li>
           <li>Список c элементами селекта</li>
           <li>Placeholder</li>
           <li>При режиме мультиселект доступна кастомизация chips(выбранных эл-ов)</li>
+          <li>Label элемента(если он был указан)</li>
+          <li>Переключение тем с темной на светлую</li>
         </ul>
       </section>
     </div>
@@ -54,6 +72,8 @@
       <ul>
         <li><a href="global.html#addOptionsBehaviour">#addOptionsBehaviour</a></li>
         <li><a href="global.html#close">#close</a></li>
+        <li><a href="global.html#checkTheme">#checkTheme</a></li>
+        <li><a href="global.html#closeSelectClick">#closeSelectClick</a></li>
         <li><a href="global.html#init">#init</a></li>
         <li><a href="global.html#initEvent">#initEvent</a></li>
         <li><a href="global.html#initSelected">#initSelected</a></li>
@@ -64,6 +84,7 @@
       </ul>
       <h3>Public methods</h3>
       <ul>
+        <li><a href="global.html#addLenguage">addLenguage</a></li>
         <li><a href="global.html#addItem">addItem</a></li>
         <li><a href="global.html#buttonControl">buttonControl</a></li>
         <li><a href="global.html#deleteItem">deleteItem</a></li>
diff --git a/documentation/module-Utils.html b/documentation/module-Utils.html
index 927d30f..8a20fc7 100644
--- a/documentation/module-Utils.html
+++ b/documentation/module-Utils.html
@@ -22,7 +22,10 @@
 
         <article>
           <div class="container-overview">
-            <div class="description">Utils module</div>
+            <div class="description">
+              В этом модуле представленны функции которые переиспользуются в классе селекта или в
+              других модулях. Он создан для лучшего понимания кода.
+            </div>
 
             <dl class="details">
               <dt class="tag-source">Source:</dt>
@@ -77,7 +80,7 @@
             <dd class="tag-source">
               <ul class="dummy">
                 <li>
-                  <a href="utils.js.html">utils.js</a>, <a href="utils.js.html#line84">line 84</a>
+                  <a href="utils.js.html">utils.js</a>, <a href="utils.js.html#line78">line 78</a>
                 </li>
               </ul>
             </dd>
@@ -94,6 +97,71 @@
             </dd>
           </dl>
 
+          <h4 class="name" id=".clearSelect">
+            <span class="type-signature">(static) </span>clearSelect<span class="signature"
+              >(select, element, dataSelectText)</span
+            ><span class="type-signature"></span>
+          </h4>
+
+          <div class="description">Создание кнопки отчиски селекта, при единичном выборе.</div>
+
+          <h5>Parameters:</h5>
+
+          <table class="params">
+            <thead>
+              <tr>
+                <th>Name</th>
+
+                <th>Type</th>
+
+                <th class="last">Description</th>
+              </tr>
+            </thead>
+
+            <tbody>
+              <tr>
+                <td class="name"><code>select</code></td>
+
+                <td class="type">
+                  <span class="param-type">HTMLElement</span>
+                </td>
+
+                <td class="description last">место в селекте которое будет переназначено на ''.</td>
+              </tr>
+
+              <tr>
+                <td class="name"><code>element</code></td>
+
+                <td class="type">
+                  <span class="param-type">HTMLElement</span>
+                </td>
+
+                <td class="description last">экземпляр класса DropDown.</td>
+              </tr>
+
+              <tr>
+                <td class="name"><code>dataSelectText</code></td>
+
+                <td class="type">
+                  <span class="param-type">object</span>
+                </td>
+
+                <td class="description last">текст который отрисовывается в селекте.</td>
+              </tr>
+            </tbody>
+          </table>
+
+          <dl class="details">
+            <dt class="tag-source">Source:</dt>
+            <dd class="tag-source">
+              <ul class="dummy">
+                <li>
+                  <a href="utils.js.html">utils.js</a>, <a href="utils.js.html#line174">line 174</a>
+                </li>
+              </ul>
+            </dd>
+          </dl>
+
           <h4 class="name" id=".createSelected">
             <span class="type-signature">(static) </span>createSelected<span class="signature"
               >(element, content, styles)</span
@@ -272,7 +340,7 @@
             <dd class="tag-source">
               <ul class="dummy">
                 <li>
-                  <a href="utils.js.html">utils.js</a>, <a href="utils.js.html#line71">line 71</a>
+                  <a href="utils.js.html">utils.js</a>, <a href="utils.js.html#line65">line 65</a>
                 </li>
               </ul>
             </dd>
@@ -332,7 +400,7 @@
             <dd class="tag-source">
               <ul class="dummy">
                 <li>
-                  <a href="utils.js.html">utils.js</a>, <a href="utils.js.html#line98">line 98</a>
+                  <a href="utils.js.html">utils.js</a>, <a href="utils.js.html#line111">line 111</a>
                 </li>
               </ul>
             </dd>
@@ -348,6 +416,198 @@
               <span class="param-type">object</span>
             </dd>
           </dl>
+
+          <h4 class="name" id=".getSelectText">
+            <span class="type-signature">(static) </span>getSelectText<span class="signature"
+              >(data, select)</span
+            ><span class="type-signature"> &rarr; {HTMLElement}</span>
+          </h4>
+
+          <div class="description">Вставка изначального текста селекта(до выбора)</div>
+
+          <h5>Parameters:</h5>
+
+          <table class="params">
+            <thead>
+              <tr>
+                <th>Name</th>
+
+                <th>Type</th>
+
+                <th class="last">Description</th>
+              </tr>
+            </thead>
+
+            <tbody>
+              <tr>
+                <td class="name"><code>data</code></td>
+
+                <td class="type">
+                  <span class="param-type">object</span>
+                </td>
+
+                <td class="description last">объект в котором находяться title селекта</td>
+              </tr>
+
+              <tr>
+                <td class="name"><code>select</code></td>
+
+                <td class="type">
+                  <span class="param-type">HTMLElement</span>
+                </td>
+
+                <td class="description last">елемент селекта, куда будет вставляться title</td>
+              </tr>
+            </tbody>
+          </table>
+
+          <dl class="details">
+            <dt class="tag-source">Source:</dt>
+            <dd class="tag-source">
+              <ul class="dummy">
+                <li>
+                  <a href="utils.js.html">utils.js</a>, <a href="utils.js.html#line92">line 92</a>
+                </li>
+              </ul>
+            </dd>
+          </dl>
+
+          <h5>Returns:</h5>
+
+          <div class="param-desc">возвращает сформированный елемент селекта</div>
+
+          <dl>
+            <dt>Type</dt>
+            <dd>
+              <span class="param-type">HTMLElement</span>
+            </dd>
+          </dl>
+
+          <h4 class="name" id=".nativOptionMultiple">
+            <span class="type-signature">(static) </span>nativOptionMultiple<span class="signature"
+              >(element, item, condition)</span
+            ><span class="type-signature"></span>
+          </h4>
+
+          <div class="description">
+            Поведение нативного(Multiple) селекта при выборе в кастомном
+          </div>
+
+          <h5>Parameters:</h5>
+
+          <table class="params">
+            <thead>
+              <tr>
+                <th>Name</th>
+
+                <th>Type</th>
+
+                <th class="last">Description</th>
+              </tr>
+            </thead>
+
+            <tbody>
+              <tr>
+                <td class="name"><code>element</code></td>
+
+                <td class="type">
+                  <span class="param-type">NodeList</span>
+                </td>
+
+                <td class="description last">NodeList нативного селекта</td>
+              </tr>
+
+              <tr>
+                <td class="name"><code>item</code></td>
+
+                <td class="type">
+                  <span class="param-type">object</span>
+                </td>
+
+                <td class="description last">выбранный элемент в кастомном селекте</td>
+              </tr>
+
+              <tr>
+                <td class="name"><code>condition</code></td>
+
+                <td class="type">
+                  <span class="param-type">boolean</span>
+                </td>
+
+                <td class="description last">
+                  специальный флаг при котором добавляются/убераются атрибуты у нативного селекта
+                </td>
+              </tr>
+            </tbody>
+          </table>
+
+          <dl class="details">
+            <dt class="tag-source">Source:</dt>
+            <dd class="tag-source">
+              <ul class="dummy">
+                <li>
+                  <a href="utils.js.html">utils.js</a>, <a href="utils.js.html#line152">line 152</a>
+                </li>
+              </ul>
+            </dd>
+          </dl>
+
+          <h4 class="name" id=".nativOptionOrdinary">
+            <span class="type-signature">(static) </span>nativOptionOrdinary<span class="signature"
+              >(element, item)</span
+            ><span class="type-signature"></span>
+          </h4>
+
+          <div class="description">
+            Поведение нативного(одинарного) селекта при выборе кастомного
+          </div>
+
+          <h5>Parameters:</h5>
+
+          <table class="params">
+            <thead>
+              <tr>
+                <th>Name</th>
+
+                <th>Type</th>
+
+                <th class="last">Description</th>
+              </tr>
+            </thead>
+
+            <tbody>
+              <tr>
+                <td class="name"><code>element</code></td>
+
+                <td class="type">
+                  <span class="param-type">NodeList</span>
+                </td>
+
+                <td class="description last">NodeList нативного селекта</td>
+              </tr>
+
+              <tr>
+                <td class="name"><code>item</code></td>
+
+                <td class="type">
+                  <span class="param-type">object</span>
+                </td>
+
+                <td class="description last">выбранный элемент в кастомном селекте</td>
+              </tr>
+            </tbody>
+          </table>
+
+          <dl class="details">
+            <dt class="tag-source">Source:</dt>
+            <dd class="tag-source">
+              <ul class="dummy">
+                <li>
+                  <a href="utils.js.html">utils.js</a>, <a href="utils.js.html#line137">line 137</a>
+                </li>
+              </ul>
+            </dd>
+          </dl>
         </article>
       </section>
     </div>
@@ -373,6 +633,8 @@
       <ul>
         <li><a href="global.html#addOptionsBehaviour">#addOptionsBehaviour</a></li>
         <li><a href="global.html#close">#close</a></li>
+        <li><a href="global.html#checkTheme">#checkTheme</a></li>
+        <li><a href="global.html#closeSelectClick">#closeSelectClick</a></li>
         <li><a href="global.html#init">#init</a></li>
         <li><a href="global.html#initEvent">#initEvent</a></li>
         <li><a href="global.html#initSelected">#initSelected</a></li>
@@ -383,6 +645,7 @@
       </ul>
       <h3>Public methods</h3>
       <ul>
+        <li><a href="global.html#addLenguage">addLenguage</a></li>
         <li><a href="global.html#addItem">addItem</a></li>
         <li><a href="global.html#buttonControl">buttonControl</a></li>
         <li><a href="global.html#deleteItem">deleteItem</a></li>
@@ -392,7 +655,6 @@
         <li><a href="global.html#selectIndex">selectIndex</a></li>
       </ul>
     </nav>
-
     <br class="clear" />
 
     <footer>
diff --git a/documentation/module-createElementChips.html b/documentation/module-createElementChips.html
index 69f4f9f..f7cd35b 100644
--- a/documentation/module-createElementChips.html
+++ b/documentation/module-createElementChips.html
@@ -21,7 +21,12 @@
         <header></header>
 
         <article>
-          <div class="container-overview"></div>
+          <div class="container-overview">
+            <div class="description">
+              В этом модуле представленны функции используемые в классе селекта. Модуль предназначен
+              для выноса важной логики селекта и удобства использования.
+            </div>
+          </div>
 
           <h3 class="subsection-title">Methods</h3>
 
@@ -116,7 +121,7 @@
 
           <h4 class="name" id=".createInputSearch">
             <span class="type-signature">(static) </span>createInputSearch<span class="signature"
-              >(random)</span
+              >(random, lenguage)</span
             ><span class="type-signature"> &rarr; {HTMLInputElement}</span>
           </h4>
 
@@ -145,6 +150,18 @@
 
                 <td class="description last">уникальное значение для input элемента.</td>
               </tr>
+
+              <tr>
+                <td class="name"><code>lenguage</code></td>
+
+                <td class="type">
+                  <span class="param-type">string</span>
+                </td>
+
+                <td class="description last">
+                  текст на определенном языке переданный из файла language.js
+                </td>
+              </tr>
             </tbody>
           </table>
 
@@ -154,7 +171,7 @@
               <ul class="dummy">
                 <li>
                   <a href="create-element.js.html">create-element.js</a>,
-                  <a href="create-element.js.html#line102">line 102</a>
+                  <a href="create-element.js.html#line103">line 103</a>
                 </li>
               </ul>
             </dd>
@@ -185,7 +202,7 @@
               <ul class="dummy">
                 <li>
                   <a href="create-element.js.html">create-element.js</a>,
-                  <a href="create-element.js.html#line77">line 77</a>
+                  <a href="create-element.js.html#line78">line 78</a>
                 </li>
               </ul>
             </dd>
@@ -258,6 +275,8 @@
       <ul>
         <li><a href="global.html#addOptionsBehaviour">#addOptionsBehaviour</a></li>
         <li><a href="global.html#close">#close</a></li>
+        <li><a href="global.html#checkTheme">#checkTheme</a></li>
+        <li><a href="global.html#closeSelectClick">#closeSelectClick</a></li>
         <li><a href="global.html#init">#init</a></li>
         <li><a href="global.html#initEvent">#initEvent</a></li>
         <li><a href="global.html#initSelected">#initSelected</a></li>
@@ -268,6 +287,7 @@
       </ul>
       <h3>Public methods</h3>
       <ul>
+        <li><a href="global.html#addLenguage">addLenguage</a></li>
         <li><a href="global.html#addItem">addItem</a></li>
         <li><a href="global.html#buttonControl">buttonControl</a></li>
         <li><a href="global.html#deleteItem">deleteItem</a></li>
diff --git a/documentation/styles/descriptionOptions.css b/documentation/styles/descriptionOptions.css
new file mode 100644
index 0000000..b90f8c8
--- /dev/null
+++ b/documentation/styles/descriptionOptions.css
@@ -0,0 +1,3 @@
+.descriptionOptions li {
+  margin-top: 15px;
+}
diff --git a/documentation/utils.js.html b/documentation/utils.js.html
index 299e8d0..0171eb1 100644
--- a/documentation/utils.js.html
+++ b/documentation/utils.js.html
@@ -62,15 +62,16 @@
                return;
              }
            
-             const { head, caret, placeholder } = styles;
+             const { head, caret, placeholder, lable } = styles;
            
              const cgSelect = element.querySelector('.cg-select');
              const caretSelect = element.querySelector('.caret');
              const placeholderSelect = element.querySelector('.selected');
+             const lableItem = element.parentElement.querySelector('h1.label');
            
              customStylesFormat(head, cgSelect);
-           
              customStylesFormat(caret, caretSelect);
+             customStylesFormat(lable, lableItem);
            
              if (placeholderSelect) {
                customStylesFormat(placeholder, placeholderSelect);
@@ -103,6 +104,25 @@
              return item.hasOwnProperty('id') &amp;&amp; item.hasOwnProperty('title') &amp;&amp; item.hasOwnProperty('value');
            }
            
+           /**
+            * Вставка изначального текста селекта(до выбора)
+            * @param {object} data объект в котором находяться title селекта
+            * @param {HTMLElement} select елемент селекта, куда будет вставляться title
+            * @returns {HTMLElement} возвращает сформированный елемент селекта
+            */
+           export function getSelectText(data, select) {
+             const { placeholder, selected } = data;
+           
+             if (placeholder) {
+               select.innerText = placeholder;
+             } else if (selected) {
+               select.innerText = selected;
+             } else {
+               select.innerText = 'Select...';
+             }
+             return select;
+           }
+           
            /**
             * Преобразование каждого елемента полученного из поля Items;
             * @param {object | string} dataItem полученный елемент переданный при создании селекта может быть как object/string
@@ -165,6 +185,67 @@
                }
              });
            }
+           
+           /**
+            * Создание кнопки отчиски селекта, при единичном выборе.
+            * @param {HTMLElement} select место в селекте которое будет переназначено на ''.
+            * @param {HTMLElement} element экземпляр класса DropDown.
+            * @param {object} dataSelectText текст который отрисовывается в селекте.
+            */
+           export function clearSelect(select, element, dataSelectText) {
+             const { selectedItems, indexes, darkTheme, multiselectTag } = dataSelectText;
+           
+             const options = element.querySelectorAll('.list__item');
+             const ulMultiSelect = element.querySelector('.multiselect-tag');
+             const svgIcon = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+             const path1 = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+             const path2 = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+             const checkBox = element.querySelectorAll('li input');
+           
+             svgIcon.setAttribute('viewBox', '0 0 10 10');
+             path1.setAttribute('d', 'M2,8 L8,2');
+             path2.setAttribute('d', 'M2,2 L8,8');
+             svgIcon.appendChild(path1);
+             svgIcon.appendChild(path2);
+           
+             if (multiselectTag &amp;&amp; multiselectTag == true) {
+               return;
+             }
+           
+             if (darkTheme === true || !darkTheme) {
+               path1.classList.add('pathWhite');
+               path2.classList.add('pathWhite');
+             }
+           
+             if (darkTheme === false) {
+               path1.classList.add('pathBlack');
+               path2.classList.add('pathBlack');
+             }
+           
+             svgIcon.classList.add('svg-icon');
+             svgIcon.classList.add('svg-clear');
+           
+             select.appendChild(svgIcon);
+           
+             svgIcon.addEventListener('click', () => {
+               select.innerText = '';
+           
+               if (Array.isArray(selectedItems)) {
+                 selectedItems.splice(0);
+                 indexes.splice(0);
+               }
+           
+               checkBox.forEach((item) => {
+                 item.checked = false;
+               });
+           
+               getSelectText(dataSelectText, select);
+           
+               options.forEach((option) => {
+                 option.classList.remove('active');
+               });
+             });
+           }
 </code></pre>
         </article>
       </section>
@@ -191,15 +272,19 @@
       <ul>
         <li><a href="global.html#addOptionsBehaviour">#addOptionsBehaviour</a></li>
         <li><a href="global.html#close">#close</a></li>
+        <li><a href="global.html#checkTheme">#checkTheme</a></li>
+        <li><a href="global.html#closeSelectClick">#closeSelectClick</a></li>
         <li><a href="global.html#init">#init</a></li>
         <li><a href="global.html#initEvent">#initEvent</a></li>
         <li><a href="global.html#initSelected">#initSelected</a></li>
         <li><a href="global.html#open">#open</a></li>
         <li><a href="global.html#render">#render</a></li>
         <li><a href="global.html#renderUrl">#renderUrl</a></li>
+        <li><a href="global.html#searchMode">#searchMode</a></li>
       </ul>
       <h3>Public methods</h3>
       <ul>
+        <li><a href="global.html#addLenguage">addLenguage</a></li>
         <li><a href="global.html#addItem">addItem</a></li>
         <li><a href="global.html#buttonControl">buttonControl</a></li>
         <li><a href="global.html#deleteItem">deleteItem</a></li>
diff --git a/src/cg-dropdown.js b/src/cg-dropdown.js
index d5f8a5b..bc939e0 100644
--- a/src/cg-dropdown.js
+++ b/src/cg-dropdown.js
@@ -93,7 +93,9 @@ export class DropDown {
       placeholder: '...',
       items: [string|number|object],
       darkTheme: true/false,
-      closeOnSelect: true/false,
+      searchMode: true/false,
+      closeOnSelect:  true/false,
+      lenguage: 'ru/en',
       styles: {
         head: {
           background: '...',
@@ -289,6 +291,7 @@ export class DropDown {
           'MAN',
           'max',
         ],
+        darkTheme: true,
         multiselect: true,
         multiselectTag: true,
       }

Name	Type	Description
`select`	+ HTMLElement +	место в селекте которое будет переназначено на ''.
`element`	+ HTMLElement +	экземпляр класса DropDown.
`dataSelectText`	+ object +	текст который отрисовывается в селекте.
Name	Type	Description
`data`	+ object +	объект в котором находяться title селекта
`select`	+ HTMLElement +	елемент селекта, куда будет вставляться title
Name	Type	Description
`element`	+ NodeList +	NodeList нативного селекта
`item`	+ object +	выбранный элемент в кастомном селекте
`condition`	+ boolean +	+ специальный флаг при котором добавляются/убераются атрибуты у нативного селекта +