Tanlaş · molecule
Checkbox, radio, switch
Checkbox, radio, switch — native input + körinadigan quti. Qisman tanlangan (indeterminate), öçiq holat. Tanlov kartasi (.fx-choice) — katta bosiş maydoni, sarlavha va izoh bilan. Kengaytma: ölçam (sm/lg), yorliq tomoni, sarlavha+tavsif, switch içida ikon yoki söz, switch yuklanmoqda, tanlov kartasi (rasm/ikon, narx, belgi öng çetda, nofaol), «hammasini belgilaş» guruhi (xulq data-fx-checkall), şartli oçiliş va raqamli şkala (0–10). Kengaytma: data-appearance=button (radio/checkbox tugma körinişida), forced-colors.
Ruxsatlar
Variantlar
| Atribut | Qiymatlar | Standart |
|---|---|---|
data-type | checkboxradioswitchtask vazifa doirasi (Todoist kabi): doira, ustuvorlik rangida — data-priority 1|2|3|4 | checkbox |
data-size | smlg | md |
data-label | start yorliq çapda, quti öngda | end |
data-indicator | end belgi kartaning öng çetida | start |
data-layout | rowgrid | ustma-ust |
data-appearance | button | — |
data-priority | 1 --fx-priority-1 (qizil)2 --fx-priority-2 (töq sariq)3 --fx-priority-3 (kök)4 rangsiz | — |
Anatomiya
- root
.fx-checkşart - box
.fx-check__boxşart - choice
.fx-choiceixtiyoriy - choice-body
.fx-choice__bodyixtiyoriy - choice-title
.fx-choice__titleixtiyoriy - choice-text
.fx-choice__textixtiyoriy - body
.fx-check__bodyixtiyoriy - title
.fx-check__titleixtiyoriy - desc
.fx-check__descixtiyoriy - choice-media
.fx-choice__mediaixtiyoriy - choice-aside
.fx-choice__asideixtiyoriy - group
.fx-checkgroupixtiyoriy - group-items
.fx-checkgroup__itemsixtiyoriy - group-count
.fx-checkgroup__countixtiyoriy - reveal
.fx-check__revealixtiyoriy - scale
.fx-scaleixtiyoriy - scale-row
.fx-scale__rowixtiyoriy - scale-item
.fx-scale__itemixtiyoriy - scale-ends
.fx-scale__endsixtiyoriy
Holatlar
focuscheckedindeterminatedisablediconslabelsbusychoice-disabled
Klaviatura va kiriş
| Tugma | Amal |
|---|---|
| Space | Belgilaydi / olib taşlaydi |
Native input saqlanadi (klaviatura, ekran öquvçi); switch'ga role="switch". Hammasi-guruh: role="group" + sarlavha, boşliq aria-controls bilan bandlarni körsatadi, qisman holat native indeterminate (mixed). Switch yuklaniş: input aria-busy="true". Şkala: fieldset + legend, radio guruhi (←→).
Naqş: WAI-ARIA APG checkbox · rol checkbox
Kod
AI uçun: qaçon işlatiladi
Işlating
- Ha/yöq tanlov (checkbox), bir neçtadan bitta (radio), darhol ta'sir qiladigan yoqiş (switch).
Işlatmang
- Köp variantdan bitta, joy kam →
select - Checkbox'ni doira qilmang — radio bilan adaştiriladi.
- Switch'ni forma yuboriş tugmasi bilan birga işlatmang — switch darhol ta'sir qiladi.
- Tavsifni faqat tooltip'ga yaşirmang — .fx-check__desc körinib tursin.
- «Hammasi» guruhida boşliqni qölda belgilamang — xulq bandlardan yiğadi.
npx foxui add check
<label class="fx-check"><input type="checkbox" checked><span class="fx-check__box"></span>Eslab qoliş</label>
<label class="fx-check" data-type="radio"><input type="radio" name="tarif" checked><span class="fx-check__box"></span>Oylik</label>
<label class="fx-check" data-type="switch"><input type="checkbox" role="switch" checked><span class="fx-check__box"></span>Xabarnoma</label>
<fieldset class="fx-fieldset">
<legend class="fx-legend">Tarif</legend>
<label class="fx-choice"><span class="fx-check" data-type="radio"><input type="radio" name="tarif" checked><span class="fx-check__box"></span></span><span class="fx-choice__body"><span class="fx-choice__title">Oylik</span><span class="fx-choice__text">Istalgan payt bekor qilasiz.</span></span></label>
<label class="fx-choice"><span class="fx-check" data-type="radio"><input type="radio" name="tarif"><span class="fx-check__box"></span></span><span class="fx-choice__body"><span class="fx-choice__title">Yillik</span><span class="fx-choice__text">2 oy bepul.</span></span></label>
</fieldset>
<div class="fx-checkgroup" role="group" aria-labelledby="ruxsat-l" data-fx-checkall>
<span class="fx-legend" id="ruxsat-l">Ruxsatlar</span>
<label class="fx-check"><input type="checkbox" data-all><span class="fx-check__box"></span>Hammasi</label>
<div class="fx-checkgroup__items" data-indent>
<label class="fx-check"><input type="checkbox" checked><span class="fx-check__box"></span>Mijozlarni köriş</label>
<label class="fx-check"><input type="checkbox"><span class="fx-check__box"></span>Mijozlarni tahrirlaş</label>
<label class="fx-check"><input type="checkbox"><span class="fx-check__box"></span>Hisobotlar</label>
</div>
<span class="fx-checkgroup__count" data-all-count aria-live="polite"></span>
</div>
<label class="fx-check" data-type="switch" data-label="start" data-size="lg"><input type="checkbox" role="switch" checked aria-describedby="sw-d"><span class="fx-check__box"></span><span class="fx-check__body"><span class="fx-check__title">Email xabarnoma</span><span class="fx-check__desc" id="sw-d">Yangi arizalar haqida kuniga bir marta.</span></span></label>
<label class="fx-check" data-type="switch" data-icons><input type="checkbox" role="switch"><span class="fx-check__box"></span>Qoronği rejim</label>
<label class="fx-check" data-type="switch" data-labels><input type="checkbox" role="switch" checked><span class="fx-check__box" data-on="Ha" data-off="Yöq"></span>Hisob faol</label>
<label class="fx-check" data-type="switch"><input type="checkbox" role="switch" aria-busy="true"><span class="fx-check__box"></span>Saqlanmoqda…</label>
<fieldset class="fx-fieldset">
<legend class="fx-legend">Tölov usuli</legend>
<label class="fx-choice" data-indicator="end"><span class="fx-check" data-type="radio"><input type="radio" name="tolov" checked><span class="fx-check__box"></span></span><span class="fx-choice__media" aria-hidden="true"><svg viewBox="0 0 20 20"><rect x="2.5" y="5" width="15" height="10" rx="2" fill="none" stroke="currentColor" stroke-width="1.5"/></svg></span><span class="fx-choice__body"><span class="fx-choice__title">Karta</span><span class="fx-choice__text">Uzcard yoki Humo</span></span><span class="fx-choice__aside">0 söm</span></label>
<label class="fx-choice" data-indicator="end"><span class="fx-check" data-type="radio"><input type="radio" name="tolov" disabled><span class="fx-check__box"></span></span><span class="fx-choice__body"><span class="fx-choice__title">Bank ötkazmasi</span><span class="fx-choice__text">Hozirça mavjud emas</span></span></label>
</fieldset>
<div>
<label class="fx-check" data-type="radio"><input type="radio" name="aloqa" checked><span class="fx-check__box"></span>Telegram</label>
<label class="fx-check" data-type="radio"><input type="radio" name="aloqa"><span class="fx-check__box"></span>Boşqa</label>
<div class="fx-check__reveal"><div><label class="fx-field"><span class="fx-label">Qanday?</span><input class="fx-input" placeholder="Masalan, telefon"></label></div></div>
</div>
<fieldset class="fx-scale">
<legend class="fx-legend">Xizmatni döstingizga tavsiya qilasizmi?</legend>
<div class="fx-scale__row">
<label class="fx-scale__item"><input type="radio" name="nps" value="1"><span>1</span></label>
<label class="fx-scale__item"><input type="radio" name="nps" value="2"><span>2</span></label>
<label class="fx-scale__item"><input type="radio" name="nps" value="3" checked><span>3</span></label>
<label class="fx-scale__item"><input type="radio" name="nps" value="4"><span>4</span></label>
<label class="fx-scale__item"><input type="radio" name="nps" value="5"><span>5</span></label>
</div>
<div class="fx-scale__ends"><span>Umuman yöq</span><span>Albatta</span></div>
</fieldset>
<label class="fx-check" data-type="radio" data-appearance="button"><input type="radio" name="b2-t" checked><span class="fx-check__box"></span>Kunlik</label>
<div style="display:grid;gap:4px"><label class="fx-check" data-type="task" data-priority="1"><input type="checkbox"><span class="fx-check__box"></span>Narx jadvalini yakunlaş</label><label class="fx-check" data-type="task" data-priority="2"><input type="checkbox"><span class="fx-check__box"></span>Mijozga javob</label><label class="fx-check" data-type="task" data-priority="3"><input type="checkbox" checked><span class="fx-check__box"></span>Logo fayllarini yuboriş</label><label class="fx-check" data-type="task" data-priority="4"><input type="checkbox"><span class="fx-check__box"></span>Jild nomlarini tartiblaş</label><label class="fx-check" data-type="task"><input type="checkbox"><span class="fx-check__box"></span>Ustuvorliksiz vazifa</label></div>Tokenlar: --fx-bg-brand-solid --fx-bg-brand-subtle --fx-bg-field --fx-bg-muted --fx-bg-pressed --fx-bg-subtle --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-duration-spin --fx-ease-enter --fx-ease-spring --fx-ease-standard --fx-font-size-md --fx-font-size-sm --fx-font-size-xs --fx-font-weight-semibold --fx-motion-base --fx-motion-fast --fx-motion-instant --fx-motion-press --fx-motion-slow --fx-priority-1 --fx-priority-2 --fx-priority-3 --fx-priority-4 --fx-radius-checkbox-ratio --fx-radius-circle --fx-radius-control --fx-radius-surface --fx-shadow-sm --fx-size-checkbox --fx-size-control-md --fx-size-icon-md --fx-size-min-target --fx-size-switch-track --fx-space-1 --fx-space-12 --fx-space-2 --fx-space-3 --fx-space-4 --fx-space-6 --fx-text-brand --fx-text-disabled --fx-text-on-brand --fx-text-primary --fx-text-secondary --fx-text-tertiary
Ş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.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).Rang tanlagiçRang namunalaridan tanlaş: native radio (bitta) yoki checkbox (bir neçta), JS'siz.