Kiritiş · molecule
Maydon (input, textarea)
Matn maydoni (input, textarea), yorliq, izoh. Majburiy belgisi (data-required), faqat öqiş, xato (data-invalid) va muvaffaqiyat (data-valid) holati. Input guruhi — oldi/orqa qism (birlik, ikon). Fieldset — guruh sarlavhasi bilan. Kengaytma: lg ölçam, maydon eni (data-width), gorizontal forma (data-layout="inline"), parolni körsatiş va Caps Lock ogohlantirişi, parol kuçliligi, tozalaş tugmasi, belgilar hisoblagiçi, textarea avto-ösişi, kod maydoni (xulq: data-fx-field). Kengaytma: data-variant=filled|borderless|underlined, .fx-field[data-float] (floating label), .fx-input-group__status (loading|valid|invalid), guruh içida .fx-btn.
Variantlar
| Atribut | Qiymatlar | Standart |
|---|---|---|
data-size | smmdlg | md |
data-width | xs 10ch — indeks, kodsm 20chmd 32ch | toʻliq |
data-layout | inline yorliq çapda, maydon öngda | ustma-ust |
data-level | 1 Zaif2 Örtaça3 Yaxşi4 Kuçli | — |
data-rows | 38 | 5 |
data-variant | filledborderlessunderlined | — |
data-float | true | — |
Anatomiya
- field
.fx-fieldixtiyoriy - label
.fx-labelixtiyoriy - input
.fx-inputşart - textarea
.fx-textareaixtiyoriy - hint
.fx-hintixtiyoriy - group
.fx-input-groupixtiyoriy - group-control
.fx-input-group__controlixtiyoriy - addon
.fx-input-group__addonixtiyoriy - fieldset
.fx-fieldsetixtiyoriy - legend
.fx-legendixtiyoriy - group-button
.fx-input-group__btnixtiyoriy - foot
.fx-field__footixtiyoriy - counter
.fx-counterixtiyoriy - strength
.fx-strengthixtiyoriy - strength-bar
.fx-strength__barixtiyoriy - strength-label
.fx-strength__labelixtiyoriy - status
.fx-input-group__statusixtiyoriy
Holatlar
Klaviatura va kiriş
| Tugma | Amal |
|---|---|
| Enter / Space (tugma) | Parolni körsatiş/yaşiriş; tozalaş |
| Esc | Maydondagi qiymatni tozalaydi (tozalaş tugmasi bor bölsa) |
Har maydonning körinadigan label'i bor; xato matni aria-describedby bilan boğlanadi. Parol tugmasi: aria-pressed + aria-label; hisoblagiç aria-hidden, ekran öquvçiga faqat 90% va limitdan oşganda xabar; Esc maydonni tozalaydi.
Kod
AI uçun: qaçon işlatiladi
- Qisqa matn (input) yoki köp qatorli matn (textarea) kiritiş.
- Röyxatdan tanlaş →
select - Label örniga faqat placeholder işlatmang.
- Parolni körsatiş tugmasiga faqat ikon bermang — aria-label va aria-pressed şart.
- Belgilar hisoblagiçini limitsiz maydonda bezak uçun qöymang; limit bor bölsa maxlength bering.
npx foxui add input
<label class="fx-field"> <span class="fx-label" data-required>Email</span> <input class="fx-input" type="email" placeholder="[email protected]"> <span class="fx-hint">Tasdiqlaş xati şu manzilga keladi.</span> </label> <label class="fx-field" data-invalid> <span class="fx-label">Telefon</span> <span class="fx-input-group"><span class="fx-input-group__addon">+998</span><input class="fx-input-group__control" inputmode="tel" value="90 12"></span> <span class="fx-hint">9 ta raqam kiriting.</span> </label> <label class="fx-field"> <span class="fx-label">Summa</span> <span class="fx-input-group"><input class="fx-input-group__control" inputmode="decimal" value="250 000"><span class="fx-input-group__addon">söm</span></span> </label> <label class="fx-field"> <span class="fx-label">Izoh</span> <textarea class="fx-textarea" placeholder="Qisqacha yozing"></textarea> </label> <div class="fx-field" data-fx-field> <label class="fx-label" for="par1">Parol</label> <span class="fx-input-group"> <input class="fx-input-group__control" id="par1" type="password" autocomplete="new-password" aria-describedby="par1-h"> <button class="fx-input-group__btn" type="button" data-reveal aria-pressed="false" aria-label="Parolni körsatiş"><svg viewBox="0 0 20 20" aria-hidden="true"><path d="M2 10s3-5.5 8-5.5S18 10 18 10s-3 5.5-8 5.5S2 10 2 10z" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/><circle cx="10" cy="10" r="2.5" fill="none" stroke="currentColor" stroke-width="1.5"/></svg></button> </span> <div class="fx-strength" data-strength><i class="fx-strength__bar"></i><i class="fx-strength__bar"></i><i class="fx-strength__bar"></i><i class="fx-strength__bar"></i><span class="fx-strength__label"></span></div> <span class="fx-hint" id="par1-h">Kamida 8 belgi: harf, raqam va belgi aralaş.</span> <span class="fx-hint" data-caps hidden>Caps Lock yoqilgan</span> </div> <div class="fx-field" data-fx-field> <label class="fx-label" for="qid1">Qidiruv</label> <span class="fx-input-group"> <input class="fx-input-group__control" id="qid1" type="text" value="Aziz Karimov" placeholder="Mijoz ismi"> <button class="fx-input-group__btn" type="button" data-clear aria-label="Tozalaş"><svg viewBox="0 0 20 20" aria-hidden="true"><path d="M5 5l10 10M15 5L5 15" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg></button> </span> </div> <div class="fx-field" data-fx-field> <label class="fx-label" for="izo1">Mijoz izohi</label> <textarea class="fx-textarea" id="izo1" data-autosize maxlength="280" placeholder="Nimani yozib qoldirmoqchisiz?"></textarea> <div class="fx-field__foot"><span class="fx-hint">Faqat jamoa köradi.</span><span class="fx-counter" data-count></span></div> </div> <div class="fx-field" data-layout="inline"> <label class="fx-label" for="pin1">Poçta indeksi</label> <input class="fx-input" id="pin1" data-width="xs" inputmode="numeric" placeholder="100000"> </div> <div class="fx-field" data-float><label class="fx-label" for="fl-b2">Ism</label><input class="fx-input" id="fl-b2" placeholder=" " data-variant="filled"></div>
Tokenlar: --fx-bg-error-solid --fx-bg-field --fx-bg-muted --fx-bg-pressed --fx-bg-subtle --fx-border-color-error --fx-border-color-field --fx-border-color-focus --fx-border-color-strong --fx-border-width-default --fx-border-width-focus --fx-control-h-lg --fx-control-h-md --fx-control-h-sm --fx-duration-pulse --fx-duration-spin --fx-ease-standard --fx-fg-info --fx-fg-success --fx-fg-warning --fx-font-adjust-mono --fx-font-family-mono --fx-font-size-lg --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-base --fx-motion-fast --fx-motion-instant --fx-motion-press --fx-motion-shift-sm --fx-motion-slow --fx-radius-circle --fx-radius-control --fx-radius-field-multiline --fx-size-icon-md --fx-size-icon-sm --fx-size-min-target --fx-space-1 --fx-space-12 --fx-space-2 --fx-space-3 --fx-space-4 --fx-space-6 --fx-space-8 --fx-text-brand --fx-text-disabled --fx-text-error --fx-text-primary --fx-text-secondary --fx-text-tertiary