Kiritiş · molecule
Tanlov (select)
Röyxatdan bitta qiymat: native <select> maydon şaklida. OTA QOIDA (FX-SELECT-01): har fx-select oçilganda tizim uslubidagi röyxatni körsatadi — sirt, yoy, soya, hover'da muted, tanlangani brend tusida ✓ bilan, strelka oçilganda aylanadi (appearance: base-select; qöllamaydigan brauzerda native). Brauzerning standart (kök fonli) röyxati heç qayerda qolmaydi; fx-input bilan select yozilmaydi — qöriqçi uşlaydi. .fx-select-wrap içiga oling. Böş birinçi variant (value="") — xira matn. Kengaytma: optgroup, ikon/avatar va tavsifli boy röyxat (data-rich), telefonda pastki varaq (data-fx-adaptive). Matn içidagi tanlov (data-variant="inline", 20.10 — heroui.pro Inline Select'dan): «Narx <tanlov> böyiça saralangan» — qutisiz, brend rangida, nuqtali tagçiziq, röyxat — öşa tizim ::picker'i.
Mijozlar böyiça, saralangan.
Variantlar
| Atribut | Qiymatlar | Standart |
|---|---|---|
data-size | smmd | md |
data-rich | true | — |
data-fx-adaptive | true telefonda pastki varaq | — |
data-variant | inline | field |
Anatomiya
- wrap
.fx-select-wrapixtiyoriy - root
.fx-selectşart
Holatlar
Klaviatura va kiriş
| Tugma | Amal |
|---|---|
| ↑ ↓, Enter | Tanlaydi (brauzer) |
Native select — klaviatura va ekran öquvçi brauzerning özida. Yorliq <label> bilan boğlansin.
Naqş: WAI-ARIA APG listbox · rol combobox
Kod
AI uçun: qaçon işlatiladi
npx foxui add select
<label class="fx-field">
<span class="fx-label">Viloyat</span>
<span class="fx-select-wrap"><select class="fx-select">
<option value="">Tanlang</option>
<option>Toşkent</option>
<option>Samarqand</option>
<option>Farğona</option>
</select></span>
</label>
<div class="fx-select-wrap"><select class="fx-select" aria-label="Şahar"><optgroup label="Viloyat markazlari"><option>Samarqand</option></optgroup><optgroup label="Poytaxt"><option>Toşkent</option></optgroup></select></div>
<!-- Moslashuvchi (4.26): boy roʻyxat telefonda pastki varaq -->
<label class="fx-label" for="sel-adapt">Filial</label>
<select class="fx-select" id="sel-adapt" data-rich data-fx-adaptive><option>Toşkent</option><option>Samarqand</option><option>Buxoro</option></select>
<p style="margin-block-start:var(--fx-space-6)">Mijozlar <span class="fx-select-wrap"><select class="fx-select" data-variant="inline" aria-label="Saralaş"><option>oxirgi faollik</option><option>nomi</option><option>qarz miqdori</option></select></span> böyiça, <span class="fx-select-wrap"><select class="fx-select" data-variant="inline" aria-label="Davr"><option>şu oyda</option><option>şu yilda</option><option>hamma vaqt</option></select></span> saralangan.</p>Tokenlar: --fx-bg-brand-subtle --fx-bg-field --fx-bg-muted --fx-bg-surface --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-font-weight-regular --fx-font-weight-semibold --fx-knob-field-fill --fx-knob-pill --fx-motion-fast --fx-radius-badge --fx-radius-control --fx-radius-nav --fx-radius-overlay --fx-shadow-lg --fx-size-icon-sm --fx-size-touch-target --fx-space-1 --fx-space-12 --fx-space-2 --fx-space-3 --fx-space-4 --fx-text-brand --fx-text-disabled --fx-text-primary --fx-text-tertiary