Форми

Select

Дві поверхні: variant="sunken" (за замовчуванням, впадина як у Input) і variant="raised" (опукла — face on a base wall, як DatePicker / Button). Для пошуку / async / custom-меню зі знижками — переходь на Combobox (приклад внизу).

import { Select } from "@residence/glass-ui"

Sunken (default)

Paper-hole рецепт як у Input. У формах.

Raised — як кнопка

Toolbar / sticky header. Period switcher, account picker.

Реальні приклади

Довгі лейбли (план рахунків), валюти, складні значення. Truncation працює: вибране значення обрізається, шеврон тримається справа.

Placeholder

Поки нічого не вибрано — серий лейбл.

States

Invalid / Disabled, обидві поверхні.

Search — пошук всередині дропдауна

isSearchable — додає input з пошуком у шапці випадного списку. Списки на 50+ опцій (план рахунків, контрагенти, склад послуг) одразу стають придатними. Працює і на sunken, і на raised трігерах.

Multi — кілька опцій з чекбоксами

isMultiple — клік перемикає вибір, дропдаун лишається відкритим. Використовуй onValuesChange для отримання масиву ключів. Шапка показує N обрано (за замовч.) або multiSummary="labels" для комою. Пошук вмикається автоматично — великий мульти-список без нього нечитабельний.

multiSummary="count" (default)

Поточні ключі: ["311","631"]

multiSummary="labels"

Список з 3 обраних — трігер обрізається multi-line truncate.

Стани розширених режимів

Invalid / Disabled поведінка ідентична одиничному select.

Custom dropdown — використовуй Combobox

Якщо потрібне власне меню (з іконками, описами, пошуком, async-завантаженням) — це не Select, а <Combobox>. Той же рецепт у меню (face / base wall / corner tint), плюс keyboard nav і aria-activedescendant.