Kiritiş · compound
Köp tanlov
Bir neçta variant tanlanadigan maydon: tanlanganlar maydonda chip, ostida belgili (checkbox şaklli) röyxat. Yozib qidiradi, Enter/Space belgilaydi, Backspace oxirgi chipni olib taşlaydi; «+n» (data-visible), «3 ta tanlandi» (data-mode="count"), eng köpi (data-max), «Hammasini tanlaş», forma uçun yaşirin maydonlar (data-name) (#28).
- Toşkent
- Samarqand
- Buxoro
- Namangan
- Qarşi
- Heç narsa topilmadi
Variantlar
| Atribut | Qiymatlar | Standart |
|---|---|---|
data-mode | chipscount «3 ta tanlandi» matni | chips |
Anatomiya
- root
.fx-multiselectşart - field
.fx-multiselect__fieldşart - input
.fx-multiselect__inputşart - chips
.fx-multiselect__chipsixtiyoriy - summary
.fx-multiselect__summaryixtiyoriy - chev
.fx-multiselect__chevixtiyoriy - popup
.fx-multiselect__popupşart - foot
.fx-multiselect__footixtiyoriy - all
.fx-multiselect__allixtiyoriy
Holatlar
Klaviatura va kiriş
| Tugma | Amal |
|---|---|
| ↓ ↑ | Röyxatni oçadi, faol variantni siljitadi |
| Enter | Faol variantni belgilaydi/olib taşlaydi |
| Space | Maydon böş bölsa — faol variantni belgilaydi |
| Backspace | Maydon böş bölsa — oxirgi chipni olib taşlaydi |
| Esc | Röyxatni yopadi |
Maydon role="combobox" + aria-controls/aria-expanded/aria-activedescendant; röyxat role="listbox" aria-multiselectable="true"; variantda aria-selected; chip olib taşlaş tugmasida «Olib taşlaş: <nom>»; tanlangan soni aria-live bilan e'lon qilinadi.
Naqş: WAI-ARIA APG combobox · rol combobox
Kod
AI uçun: qaçon işlatiladi
- 5+ variantdan bir neçtasini tanlaş (filtr, teg, huquqlar).
npx foxui add multiselect
<div class="fx-field">
<label class="fx-label" for="ms1">Şaharlar</label>
<div class="fx-multiselect" data-fx-multiselect data-name="shahar" data-visible="2">
<div class="fx-multiselect__field">
<input class="fx-multiselect__input" id="ms1" role="combobox" aria-expanded="false" aria-controls="ms1-list" aria-autocomplete="list" autocomplete="off" placeholder="Şahar tanlang">
<svg class="fx-multiselect__chev" viewBox="0 0 16 16" aria-hidden="true"><path d="M4 6l4 4 4-4" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
</div>
<div class="fx-multiselect__popup" hidden>
<ul class="fx-listbox" role="listbox" id="ms1-list" aria-multiselectable="true" aria-label="Şaharlar">
<li class="fx-option" role="option" id="ms1-o1" data-value="toshkent" aria-selected="true">Toşkent</li>
<li class="fx-option" role="option" id="ms1-o2" data-value="samarqand" aria-selected="true">Samarqand</li>
<li class="fx-option" role="option" id="ms1-o3" data-value="buxoro" aria-selected="true">Buxoro</li>
<li class="fx-option" role="option" id="ms1-o4" data-value="namangan" aria-selected="false">Namangan</li>
<li class="fx-option" role="option" id="ms1-o5" data-value="qarshi" aria-selected="false">Qarşi</li>
<li class="fx-listbox__empty" hidden>Heç narsa topilmadi</li>
</ul>
<div class="fx-multiselect__foot"><span class="fx-multiselect__status" aria-live="polite"></span><button class="fx-multiselect__all" type="button">Hammasini tanlaş</button></div>
</div>
</div>
<span class="fx-hint">Bir neçtasini tanlaş mumkin</span>
</div>Tokenlar: --fx-bg-brand-solid --fx-bg-brand-subtle --fx-bg-field --fx-bg-surface --fx-border-color-default --fx-border-color-error --fx-border-color-field --fx-border-color-focus --fx-border-color-strong --fx-border-color-surface --fx-border-width-default --fx-border-width-focus --fx-control-h-md --fx-control-h-sm --fx-ease-standard --fx-font-size-md --fx-font-size-sm --fx-font-size-xs --fx-font-weight-medium --fx-motion-fast --fx-popover-width --fx-radius-badge --fx-radius-control --fx-radius-overlay --fx-shadow-lg --fx-size-icon-md --fx-size-icon-sm --fx-space-1 --fx-space-2 --fx-space-3 --fx-text-brand --fx-text-disabled --fx-text-primary --fx-text-tertiary