Camel2.0 — Dokumentacja komponentów UI

2.14 #Components.FormSelect Form Select

Custom dropdown select stylizowany jak text-input. Ukryty natywny <select> (accessibility + form submit), widoczny trigger, rozwijana lista opcji. JS: src/js/modules/form-select.js.

Examples

Default styling

Kategoria

Wybierz z listy

.form-select--open

Stan otwarty (dropdown widoczny, chevron obrócony)

Kategoria

Wybierz z listy

.form-select--disabled

Stan wyłączony (opacity 0.2, cursor not-allowed)

Kategoria

Wybierz z listy

.form-select--error

Stan błędu (border 2px solid error)

Kategoria

Wybierz z listy

Markup: form-select.html

<!-- Form Select: Default -->
<div class="form-select [modifier class]" style="max-width:400px;">
  <label class="form-select__label">Kategoria</label>
  <div class="form-select__wrapper">
    <div class="form-select__trigger" tabindex="0">
      <span class="form-select__value">Wybierz z listy</span>
      <span class="form-select__arrow"></span>
    </div>
  </div>
</div>

Source: src/scss/components/_form-select.scss, line 1