Kiritiş · compound
Teg kiritiş
Maydon içida chiplar: yozib Enter yoki vergul bosilsa teg qöşiladi, böş joyda Backspace oxirgisini olib taşlaydi, joylangan matn vergul va qator böyiça bölinadi. Takror teg qöşilmaydi; ixtiyoriy çegara (data-max). Qiymatlar yaşirin maydonda vergul bilan.
Enter yoki vergul — qöşadi; Backspace — oxirgisini olib taşlaydi.
Variantlar
| Atribut | Qiymatlar | Standart |
|---|---|---|
data-size | smmd | md |
Anatomiya
- root
.fx-tagsşart - input
.fx-tags__inputşart
Holatlar
Klaviatura va kiriş
| Tugma | Amal |
|---|---|
| Enter, , | Tegni qöşadi |
| Backspace (boʻsh maydonda) | Oxirgi tegni olib taşlaydi |
| Tab → ×, Enter | Tanlangan tegni olib taşlaydi |
Qöşiş va olib taşlaş ekran öquvçiga aria-live orqali aytiladi; har chipda «Olib taşlaş: nom» tugmasi (Tab, Enter).
Kod
AI uçun: qaçon işlatiladi
npx foxui add tags
<label class="fx-field" for="tg1"><span class="fx-label">Mijoz teglari</span></label> <div class="fx-tags" data-fx-tags data-max="8"> <span class="fx-chip" data-type="tag" data-value="VIP">VIP <button type="button" class="fx-chip__remove" aria-label="Olib taşlaş: VIP">×</button></span> <span class="fx-chip" data-type="tag" data-value="Ulgurji">Ulgurji <button type="button" class="fx-chip__remove" aria-label="Olib taşlaş: Ulgurji">×</button></span> <input class="fx-tags__input" id="tg1" type="text" autocomplete="off" placeholder="Teg yozing, Enter bosing" aria-describedby="tg1-h"> <input type="hidden" name="teglar" value="VIP,Ulgurji"> </div> <p class="fx-hint" id="tg1-h">Enter yoki vergul — qöşadi; Backspace — oxirgisini olib taşlaydi.</p>
Tokenlar: --fx-bg-field --fx-bg-muted --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-md --fx-control-h-sm --fx-ease-standard --fx-font-size-md --fx-knob-field-fill --fx-knob-pill --fx-motion-fast --fx-radius-control --fx-space-1 --fx-space-12 --fx-space-3 --fx-space-4 --fx-text-primary --fx-text-tertiary