Tanlaş · molecule
Rang tanlagiç
Rang namunalaridan tanlaş: native radio (bitta) yoki checkbox (bir neçta), JS'siz. Rang — --fx-swatch (token); tanlangani ✓ va halqa bilan.
Variantlar
| Atribut | Qiymatlar | Standart |
|---|---|---|
data-size | smmdlg | md |
data-shape | squarecircle | square |
Anatomiya
- group
.fx-swatchesşart - swatch
.fx-swatchşart
Holatlar
checkedfocusdisabled
Klaviatura va kiriş
| Tugma | Amal |
|---|---|
| ← → ↑ ↓ | Rangni almaştiradi (radio) |
| Space | Belgilaydi (checkbox) |
Native radio/checkbox: öqlar va Space brauzerda; fieldset aria-label. Tanlov ✓ belgisi bilan ham körinadi.
Naqş: WAI-ARIA APG radio · rol radio
Kod
AI uçun: qaçon işlatiladi
Işlating
- Teg, kategoriya yoki mavzu rangini tanlaş.
Işlatmang
- Erkin rang (HEX, palitra) →
input - Matnli variantlar →
togglegroup - Har inputga rang nomi bilan aria-label bering — rang yolğiz belgi emas.
- Namunaga HEX yozmang — faqat token.
npx foxui add swatch
<fieldset class="fx-swatches" aria-label="Teg rangi"> <label class="fx-swatch" style="--fx-swatch:var(--fx-bg-category-blue)"><input type="radio" name="rang" value="koʻk" aria-label="Kök" checked></label> <label class="fx-swatch" style="--fx-swatch:var(--fx-bg-category-green)"><input type="radio" name="rang" value="yashil" aria-label="Yaşil"></label> <label class="fx-swatch" style="--fx-swatch:var(--fx-bg-category-yellow)"><input type="radio" name="rang" value="sariq" aria-label="Sariq"></label> <label class="fx-swatch" style="--fx-swatch:var(--fx-bg-category-coral)"><input type="radio" name="rang" value="marjon" aria-label="Marjon"></label> <label class="fx-swatch" style="--fx-swatch:var(--fx-bg-category-purple)"><input type="radio" name="rang" value="binafsha" aria-label="Binafşa"></label> <label class="fx-swatch" data-shape="circle" style="--fx-swatch:var(--fx-bg-category-pink)"><input type="radio" name="rang" value="pushti" aria-label="Puşti" disabled></label> </fieldset>
Tokenlar: --fx-bg-category- --fx-bg-muted --fx-border-color-focus --fx-border-width-focus --fx-ease-spring --fx-ease-standard --fx-motion-fast --fx-motion-instant --fx-motion-press --fx-radius-avatar-ratio --fx-radius-circle --fx-size-control-lg --fx-size-control-md --fx-size-control-sm --fx-space-2 --fx-text-on-category --fx-text-primary
Şu toifadan
Kaskad tanlovIçma-iç tanlov (viloyat → tuman → mahalla): tugma bosilsa ustunlar ketma-ket yonma-yon oçiladi, oxirgi bandni tanlaş butun yölni (“Samarqand / Urgut”) yozadi.Checkbox, radio, switchCheckbox, radio, switch — native input + körinadigan quti.ChipFiltr çipi (bosiladi, tanlangani teskari rangda, içida son — alohida belgi) yoki teg (× bilan olib taşlanadi).Til almaştirgiçSayt tilini tanlaş: pill tugma — globus, joriy til va strelka; bosilganda tillar menyusi (fx-menu) oçiladi.Variantlar röyxatiCombobox va buyruqlar oynasining içki röyxati: guruh sarlavhasi, variant (ikonka yoki avatar, nom, izoh, öngda maslahat), faol variant, köp tanlovda ✓ (aria-multiselectable), «Yaratiş» varianti, böş holat.Bildirişnoma sozlamalariBildirişnoma sozlamalari matritsasi (naqş): qatorlar — hodisalar (Savdo, Vazifalar, Xavfsizlik guruhlari), ustunlar — kanallar (Email, Telegram, Ilova).