Kiritiş · compound
Combobox
Yozib qidiriladigan tanlov: köp variant (şahar, mijoz, mahsulot). Yozilsa röyxat filtrlanadi; ↑ ↓ Enter bilan tanlanadi. Qöşimça: köp tanlov (chiplar maydon içida, avatarli odam tanlagiç), «Yaratiş» varianti, yuklanmoqda holati va taşqi (async) qidiruv. Xulq foxui.js'da.
- Toşkent
- Samarqand
- Farğona
- Buxoro
- Topilmadi
- Aziz Karimov[email protected]
- Bobur Toshmatov[email protected]
- Dilnoza Rahimova[email protected]
- Topilmadi
Yuklanmoqda…
- Topilmadi
Anatomiya
- root
.fx-comboboxşart - popup
.fx-combobox__popupşart - status
.fx-combobox__statusixtiyoriy - chips
.fx-combobox[data-multiple]ixtiyoriy
Holatlar
openloadingmultiple
Klaviatura va kiriş
| Tugma | Amal |
|---|---|
| ↓ | Röyxatni oçadi |
| ↑ ↓ | Variant |
| Enter | Tanlaydi |
| Esc | Yopadi |
| Backspace (koʻp tanlov, boʻsh maydon) | Oxirgi tanlovni olib taşlaydi |
APG Combobox: role="combobox", aria-expanded, aria-controls, aria-activedescendant.
Naqş: WAI-ARIA APG combobox · rol combobox
Kod
AI uçun: qaçon işlatiladi
Işlating
- Köp variantdan bittasini qidirib tanlaş.
- Odam tanlagiç: köp tanlov + avatar + email.
- Yangi qiymatni şu yerning özida yaratiş (data-create).
Işlatmang
- 5–15 variant →
select - 5 tadan kam variant uçun combobox qilmang — select yoki radio.
- Köp tanlovda tanlanganlarni maydondan taşqarida ayrim röyxatda takrorlamang — chiplar içida.
npx foxui add combobox
<label class="fx-field" for="cb"><span class="fx-label">Şahar</span></label>
<div class="fx-combobox" data-fx-combobox>
<input class="fx-input" id="cb" role="combobox" aria-expanded="false" aria-controls="cb-list" aria-autocomplete="list" autocomplete="off" placeholder="Yozing yoki tanlang">
<div class="fx-combobox__popup" hidden>
<ul class="fx-listbox" role="listbox" id="cb-list">
<li class="fx-option" role="option" id="cb1">Toşkent</li>
<li class="fx-option" role="option" id="cb2">Samarqand</li>
<li class="fx-option" role="option" id="cb3">Farğona</li>
<li class="fx-option" role="option" id="cb4">Buxoro</li>
<li class="fx-listbox__empty" hidden>Topilmadi</li>
</ul>
</div>
</div>
<label class="fx-field" for="pp"><span class="fx-label">Mas'ullar</span></label>
<div class="fx-combobox" data-fx-combobox data-multiple data-create data-create-label="Yangi qöşiş">
<div class="fx-tags">
<input class="fx-tags__input" id="pp" role="combobox" aria-expanded="false" aria-controls="pp-list" aria-autocomplete="list" autocomplete="off" placeholder="Ism yoki email">
<input type="hidden" name="masullar">
</div>
<div class="fx-combobox__popup" hidden>
<ul class="fx-listbox" role="listbox" id="pp-list" aria-label="Xodimlar">
<li class="fx-option fx-option--lg" role="option" id="pp1" aria-selected="true"><span class="fx-avatar" data-size="sm" data-color="yellow" aria-hidden="true">AK</span><span class="fx-option__body">Aziz Karimov<span class="fx-option__desc">[email protected]</span></span></li>
<li class="fx-option fx-option--lg" role="option" id="pp2"><span class="fx-avatar" data-size="sm" data-color="green" aria-hidden="true">BT</span><span class="fx-option__body">Bobur Toshmatov<span class="fx-option__desc">[email protected]</span></span></li>
<li class="fx-option fx-option--lg" role="option" id="pp3"><span class="fx-avatar" data-size="sm" data-color="pink" aria-hidden="true">DR</span><span class="fx-option__body">Dilnoza Rahimova<span class="fx-option__desc">[email protected]</span></span></li>
<li class="fx-listbox__empty" hidden>Topilmadi</li>
</ul>
</div>
</div>
<label class="fx-field" for="cb-as"><span class="fx-label">Mijoz (serverdan qidiriladi)</span></label>
<div class="fx-combobox" data-fx-combobox data-async data-loading>
<input class="fx-input" id="cb-as" role="combobox" aria-expanded="false" aria-controls="cb-as-list" aria-autocomplete="list" autocomplete="off" placeholder="Kamida 2 harf">
<div class="fx-combobox__popup" hidden>
<div class="fx-combobox__status" role="status"><span class="fx-spinner" aria-hidden="true"></span>Yuklanmoqda…</div>
<ul class="fx-listbox" role="listbox" id="cb-as-list"><li class="fx-listbox__empty" hidden>Topilmadi</li></ul>
</div>
</div>Tokenlar: --fx-bg-surface --fx-border-color-surface --fx-border-width-default --fx-control-h-sm --fx-font-size-sm --fx-radius-overlay --fx-shadow-lg --fx-size-avatar-sm --fx-space-1 --fx-space-12 --fx-space-2 --fx-space-3 --fx-space-4 --fx-text-tertiary
Şu toifadan
KalendarOy töri: kun tanlaş, oraliq (2 oy yonma-yon), oy va yil körinişi.Captcha ramkasi«Men robot emasman» (4.110, #27): uçinçi tomon captcha'si (Cloudflare Turnstile, reCAPTCHA, hCaptcha yoki öz serveringiz) uçun FoxUI ramkasi — forma içida begona körinmaydi, holatlar hamma provayderda bir xil: böş → «Tekşirilmoqda…» (halqa) → ✓ «Tasdiqlandi» / !CheckoutTölov / checkout formasi (naqş): raqamlangan bölimlar — aloqa (telefon +998), yetkazib beriş usuli va manzil, tölov usuli (bank kartasi — raqam va muddat niqobi bilan, naqd, bölib tölaş); öngda yopişqoq buyurtma xulosasi — mahsulotlar, promo-kod, jami va «… söm tölaş».Rang tanlagiçErkin rang tanlaş: töyinganlik/yorqinlik maydoni (siçqonça va klaviatura), ton çiziği, HEX va RGB maydonlari, tayyor ranglar qatori va pipetka (brauzer qöllasa).Yoziş paneli (composer)AI çat va messenjer uçun BITTA yoziş paneli: biriktiriş tugmasi, avto-ösuvçi maydon, ixtiyoriy emoji, matn bölmasa mikrofon — matn paydo bölsa yuboriş (ikon animatsiyali almaşadi), oqim ketayotganda «Töxtatiş».Promo-kodPromo-kod yoki kupon: kod kiritiladi → «Qöllaş» → tekşiruv (tugmada yuklaniş) → qöllangan chip (✓ kod, çegirma summasi, × olib taşlaş) yoki xato matni.