ExSDK input control for SAP UI5/Fiori applications. Supports multiple visual variants. Two-way data binding supported. Configurable placeholder text. Supports required field validation.
ux7.control.ExInputsap.ui.core.Control<ExInput /><VBox class="sapUiSmallMargin" alignItems="Stretch">
<!-- ════════════════════════════════════════════════════════════════════ -->
<!-- 01 · FOUNDATION — refined classics -->
<!-- ════════════════════════════════════════════════════════════════════ -->
<Toolbar design="Transparent">
<Title text="01 · Foundation — outlined · filled · ghost · pill · floating" level="H3" />
</Toolbar>
<VBox class="sapUiSmallMarginBottom" alignItems="Stretch">
<ux7:ExInput variant="outlined" label="E-posta adresi" type="email" placeholder="ad@sirket.com" hint="Şirket e-postanızı kullanın" />
<ux7:ExInput variant="filled" label="Kullanıcı adı" iconLeft="user" placeholder="kullanici_adi" />
<ux7:ExInput variant="ghost" label="Arama" type="search" placeholder="Müşteri, sipariş, ürün…" />
<ux7:ExInput variant="pill" label="Telefon" type="tel" placeholder="+90 5XX XXX XX XX" />
<ux7:ExInput variant="floating" label="Şirket web sitesi" iconLeft="search" />
<ux7:ExInput variant="floating" label="Şirket adı" value="ACME GmbH" success="true" />
</VBox>
<!-- ════════════════════════════════════════════════════════════════════ -->
<!-- 02 · UNDERLINE — animated bar -->
<!-- ════════════════════════════════════════════════════════════════════ -->
<Toolbar design="Transparent">
<Title text="02 · Underline — animated bar (multi-color sweep)" level="H3" />
</Toolbar>
<VBox class="sapUiSmallMarginBottom" alignItems="Stretch">
<ux7:ExInput variant="underline" size="l" label="Proje adı" placeholder="Q3 göç projesi" />
<ux7:ExInput variant="underline" size="l" label="Referans kodu" placeholder="EX-2026-…" />
</VBox>
<!-- ════════════════════════════════════════════════════════════════════ -->
<!-- 03 · SOFT TONAL — multi-color -->
<!-- ════════════════════════════════════════════════════════════════════ -->
<Toolbar design="Transparent">
<Title text="03 · Soft tonal — multi-color (5 tones)" level="H3" />
</Toolbar>
<VBox class="sapUiSmallMarginBottom" alignItems="Stretch">
<ux7:ExInput variant="soft" label="Müşteri filtresi" iconLeft="search" placeholder="Müşteri no veya ad" />
<ux7:ExInput variant="soft-purple" label="AI prompt" iconLeft="search" placeholder="Bu çeyrekteki riskleri özetle…" />
<ux7:ExInput variant="soft-teal" label="Lokasyon" iconLeft="search" placeholder="Şehir veya depo kodu" />
<ux7:ExInput variant="soft-orange" label="Bildirim filtre" iconLeft="warn" placeholder="Uyarı seviyesi" />
<ux7:ExInput variant="soft-magenta" label="Favori etiketi" placeholder="Bookmark ismi" />
</VBox>
<!-- ════════════════════════════════════════════════════════════════════ -->
<!-- 04 · ELEVATED -->
<!-- ════════════════════════════════════════════════════════════════════ -->
<Toolbar design="Transparent">
<Title text="04 · Elevated — depth on focus" level="H3" />
</Toolbar>
<VBox class="sapUiSmallMarginBottom" alignItems="Stretch">
<ux7:ExInput variant="elev" size="l" label="Adres satırı" iconLeft="search" placeholder="Cadde, no, daire" />
<ux7:ExInput variant="elev" size="l" label="İletişim kişisi" iconLeft="user" placeholder="Ad soyad" />
</VBox>
<!-- ════════════════════════════════════════════════════════════════════ -->
<!-- 05 · NEUMORPHIC -->
<!-- ════════════════════════════════════════════════════════════════════ -->
<Toolbar design="Transparent">
<Title text="05 · Neumorphic — inset feel" level="H3" />
</Toolbar>
<VBox class="sapUiSmallMarginBottom" alignItems="Stretch">
<ux7:ExInput variant="neu" size="l" label="Departman" placeholder="Finans / Lojistik / İK" />
<ux7:ExInput variant="neu" size="l" label="Kısa kod" placeholder="3 haneli kısaltma" />
</VBox>
<!-- ════════════════════════════════════════════════════════════════════ -->
<!-- 06 · GLASS — light & dark backgrounds -->
<!-- ════════════════════════════════════════════════════════════════════ -->
<Toolbar design="Transparent">
<Title text="06 · Glass — frosted overlay" level="H3" />
</Toolbar>
<Panel class="ex-input-bg-photo sapUiSmallMarginBottom" backgroundDesign="Transparent">
<VBox alignItems="Stretch">
<ux7:ExInput variant="glass" size="l" label="Şehir bul" iconLeft="search" placeholder="İstanbul, Berlin…" />
<ux7:ExInput variant="glass" size="l" label="Tarih" iconLeft="search" placeholder="Yarın" />
</VBox>
</Panel>
<Panel class="ex-input-bg-dark sapUiSmallMarginBottom" backgroundDesign="Transparent">
<VBox alignItems="Stretch">
<ux7:ExInput variant="glass-dark" size="l" label="Komut / arama" iconLeft="search" placeholder="Aksiyon, ekran, dosya…" />
<ux7:ExInput variant="glass-dark" size="l" label="API anahtarı" iconLeft="lock" type="password" placeholder="sk_live_…" />
</VBox>
</Panel>
<!-- ════════════════════════════════════════════════════════════════════ -->
<!-- 08 · SEARCH HERO -->
<!-- ════════════════════════════════════════════════════════════════════ -->
<Toolbar design="Transparent">
<Title text="08 · Search hero — landing search with chip + FAB" level="H3" />
</Toolbar>
<VBox class="sapUiSmallMarginBottom" alignItems="Stretch">
<ux7:ExInput variant="search-hero" heroPrefixChip="Tüm modüller" placeholder="Müşteri, sipariş, raporlar veya komutlarda ara…" search="onHeroSearch" />
</VBox>
<!-- ════════════════════════════════════════════════════════════════════ -->
<!-- 09 · STEPPER — +/- -->
<!-- ════════════════════════════════════════════════════════════════════ -->
<Toolbar design="Transparent">
<Title text="09 · Stepper — embedded +/-" level="H3" />
</Toolbar>
<HBox wrap="Wrap" class="sapUiSmallMarginBottom">
<ux7:ExInput variant="stepper" label="Adet" value="3" min="0" max="999" step="1" class="sapUiSmallMarginEnd sapUiSmallMarginBottom" />
<ux7:ExInput variant="stepper" label="Süre (saat)" value="2.5" min="0" max="24" step="0.5" size="l" class="sapUiSmallMarginEnd sapUiSmallMarginBottom" />
<ux7:ExInput variant="stepper" label="İndirim (%)" value="10" min="0" max="100" step="5" class="sapUiSmallMarginEnd sapUiSmallMarginBottom" />
</HBox>
<!-- ════════════════════════════════════════════════════════════════════ -->
<!-- 10 · CURRENCY / UNIT — prefix + suffix -->
<!-- ════════════════════════════════════════════════════════════════════ -->
<Toolbar design="Transparent">
<Title text="10 · Currency & unit tokens (prefix · suffix)" level="H3" />
</Toolbar>
<VBox class="sapUiSmallMarginBottom" alignItems="Stretch">
<ux7:ExInput variant="unit" label="Tutar" prefix="€" placeholder="0,00" />
<ux7:ExInput variant="unit" label="KDV oranı" suffix="%" placeholder="18" />
<ux7:ExInput variant="unit" label="Ağırlık" suffix="kg" placeholder="0" />
<ux7:ExInput variant="unit" label="Birim fiyat" prefix="₺" suffix="/adet" placeholder="0,00" />
<ux7:ExInput variant="unit" label="Mesafe" suffix="km" placeholder="0" />
<ux7:ExInput variant="unit" label="Domain" prefix="https://" suffix=".com" placeholder="ornek-sirket" />
</VBox>
<!-- ════════════════════════════════════════════════════════════════════ -->
<!-- 11 · PASSWORD — toggle + strength -->
<!-- ════════════════════════════════════════════════════════════════════ -->
<Toolbar design="Transparent">
<Title text="11 · Password — visibility toggle + strength meter" level="H3" />
</Toolbar>
<VBox class="sapUiSmallMarginBottom" alignItems="Stretch">
<ux7:ExInput variant="pw" label="Şifre" required="true" placeholder="En az 8 karakter" hint="Şifre gücü" />
<ux7:ExInput variant="pw" label="Şifre tekrarı" required="true" placeholder="Aynı şifreyi tekrar girin" hint="Eşleşme" />
</VBox>
<!-- ════════════════════════════════════════════════════════════════════ -->
<!-- 12 · OTP — segmented code -->
<!-- ════════════════════════════════════════════════════════════════════ -->
<Toolbar design="Transparent">
<Title text="12 · OTP — 6 haneli kod (auto-advance · paste)" level="H3" />
</Toolbar>
<VBox class="sapUiSmallMarginBottom" alignItems="Stretch">
<ux7:ExInput variant="otp" otpLength="6" label="Telefonunuza gönderilen kodu girin" hint="Kod gelmedi mi? Yeniden gönder · 00:42" otpComplete="onOtpComplete" />
</VBox>
<!-- ════════════════════════════════════════════════════════════════════ -->
<!-- 13 · TAGS / CHIPS -->
<!-- ════════════════════════════════════════════════════════════════════ -->
<Toolbar design="Transparent">
<Title text="13 · Tags — chip input (Enter / virgül ile ekle)" level="H3" />
</Toolbar>
<VBox class="sapUiSmallMarginBottom" alignItems="Stretch">
<ux7:ExInput variant="tags" label="Etiketler" placeholder="Etiket ekle…" tagAdd="onTagAdd" tagRemove="onTagRemove" />
<ux7:ExInput variant="tags" label="Davet edilecek kişiler" type="email" placeholder="E-posta adresi ekle…" />
</VBox>
<!-- ════════════════════════════════════════════════════════════════════ -->
<!-- 14 · INLINE EDIT -->
<!-- ════════════════════════════════════════════════════════════════════ -->
<Toolbar design="Transparent">
<Title text="14 · Inline edit — text becomes input on click" level="H3" />
</Toolbar>
<VBox class="sapUiSmallMarginBottom" alignItems="Stretch">
<ux7:ExInput variant="inline" value="Q3 Lojistik Migrasyon Planı" hint="Tıklayıp düzenleyin" />
</VBox>
<!-- ════════════════════════════════════════════════════════════════════ -->
<!-- 15 · TEXTAREA — autosize -->
<!-- ════════════════════════════════════════════════════════════════════ -->
<Toolbar design="Transparent">
<Title text="15 · Textarea — autosize + counter" level="H3" />
</Toolbar>
<VBox class="sapUiSmallMarginBottom" alignItems="Stretch">
<ux7:ExInput variant="area" label="Not / açıklama" placeholder="Bu kayıt hakkında not düşün…" hint="Markdown desteklenir" showCount="true" maxLength="500" />
</VBox>
<!-- ════════════════════════════════════════════════════════════════════ -->
<!-- 16 · STATES -->
<!-- ════════════════════════════════════════════════════════════════════ -->
<Toolbar design="Transparent">
<Title text="16 · State — error · success · disabled · default" level="H3" />
</Toolbar>
<VBox class="sapUiSmallMarginBottom" alignItems="Stretch">
<ux7:ExInput variant="outlined" label="Vergi numarası" required="true" value="123" error="10 haneli bir vergi numarası girin" />
<ux7:ExInput variant="outlined" label="IBAN" value="TR33 0006 1005 1978 6457 8413 26" success="true" />
<ux7:ExInput variant="outlined" label="Müşteri ID" value="CUST-104982" enabled="false" hint="Bu alan salt-okunur" />
<ux7:ExInput variant="outlined" label="Aktif alan" placeholder="Buraya tıklayın" hint="Normal (default) state" />
</VBox>
<!-- ════════════════════════════════════════════════════════════════════ -->
<!-- 17 · SIZES -->
<!-- ════════════════════════════════════════════════════════════════════ -->
<Toolbar design="Transparent">
<Title text="17 · Size — s · m · l · xl · xxl" level="H3" />
</Toolbar>
<VBox class="sapUiSmallMarginBottom" alignItems="Stretch">
<ux7:ExInput variant="outlined" size="s" label="Small · 34px" placeholder="Hızlı filtre" />
<ux7:ExInput variant="outlined" size="m" label="Medium · 44px" placeholder="Form default" />
<ux7:ExInput variant="outlined" size="l" label="Large · 52px" placeholder="Önemli alan" />
<ux7:ExInput variant="outlined" size="xl" label="XL · 60px" placeholder="Hero alan" />
<ux7:ExInput variant="outlined" size="xxl" label="XXL · 68px" placeholder="Mega alan" />
</VBox>
<!-- ════════════════════════════════════════════════════════════════════ -->
<!-- 18 · COMPOSED — gerçek form örneği -->
<!-- ════════════════════════════════════════════════════════════════════ -->
<Toolbar design="Transparent">
<Title text="18 · Composed — müşteri kayıt formu (varyant karışık)" level="H3" />
</Toolbar>
<VBox class="sapUiSmallMarginBottom" alignItems="Stretch">
<ux7:ExInput variant="outlined" label="Şirket adı" required="true" placeholder="ACME GmbH" />
<ux7:ExInput variant="outlined" label="Vergi no" required="true" placeholder="1234567890" />
<ux7:ExInput variant="outlined" label="E-posta" type="email" iconLeft="mail" placeholder="info@acme.com" />
<ux7:ExInput variant="outlined" label="Telefon" type="tel" iconLeft="phone" placeholder="+90 …" />
<ux7:ExInput variant="unit" label="Yıllık ciro" prefix="€" suffix="M" placeholder="0" />
<ux7:ExInput variant="stepper" label="Çalışan sayısı" value="120" min="1" max="100000" step="10" />
<ux7:ExInput variant="tags" label="Modüller" placeholder="Modül adı ekleyin…" />
<ux7:ExInput variant="area" label="Notlar" placeholder="Bu müşteri için iç notlar…" />
</VBox>
<!-- ════════════════════════════════════════════════════════════════════ -->
<!-- 19 · EVENTS -->
<!-- ════════════════════════════════════════════════════════════════════ -->
<Toolbar design="Transparent">
<Title text="19 · Events — liveChange / change / search" level="H3" />
</Toolbar>
<VBox class="sapUiSmallMarginBottom">
<ux7:ExInput variant="outlined" label="Event log" type="search" placeholder="Yaz, blur yap, enter bas" liveChange="onLiveChange" change="onChange" search="onSearch" />
<Label id="evtLog" text="liveChange: —" class="sapUiTinyMarginTop" />
</VBox>
<!-- ════════════════════════════════════════════════════════════════════ -->
<!-- 20 · SUGGESTIONS -->
<!-- ════════════════════════════════════════════════════════════════════ -->
<Toolbar design="Transparent">
<Title text="20 · Suggestions — auto (contains / startsWith) · manual" level="H3" />
</Toolbar>
<VBox class="sapUiSmallMarginBottom" alignItems="Stretch">
<ux7:ExInput id="inpSuggestAuto" variant="outlined" label="Şehir (auto · contains)" placeholder="Şehir ara…" iconLeft="search" showSuggestions="true" suggestionMode="auto" filterMode="contains" suggestionSelect="onSuggestionSelect" />
<ux7:ExInput id="inpSuggestStarts" variant="outlined" label="Şehir (auto · startsWith)" placeholder="Şehir ara…" iconLeft="search" showSuggestions="true" suggestionMode="auto" filterMode="startsWith" suggestionSelect="onSuggestionSelect" />
<ux7:ExInput id="inpSuggestManual" variant="outlined" label="Manuel suggest (OData sim)" placeholder="Yaz, controller filtreler" iconLeft="search" showSuggestions="true" suggestionMode="manual" suggest="onManualSuggest" suggestionSelect="onSuggestionSelect" />
</VBox>
<!-- ════════════════════════════════════════════════════════════════════ -->
<!-- 21 · PUBLIC API -->
<!-- ════════════════════════════════════════════════════════════════════ -->
<Toolbar design="Transparent">
<Title text="21 · Public API — setValue / setError / setSuccess / focus / clear" level="H3" />
</Toolbar>
<ux7:ExInput id="inpApi" variant="outlined" label="API Test" placeholder="Programmatic kontrol" liveChange="onLiveChange" />
<FlexBox wrap="Wrap" class="sapUiSmallMarginTop sapUiSmallMarginBottom">
<Button type="Default" text="setValue" press="onSetValue" class="sapUiTinyMarginEnd sapUiTinyMarginBottom" />
<Button type="Default" text="setError" press="onSetError" class="sapUiTinyMarginEnd sapUiTinyMarginBottom" />
<Button type="Accept" text="setSuccess" press="onSetSuccess" class="sapUiTinyMarginEnd sapUiTinyMarginBottom" />
<Button type="Default" text="focus" press="onFocus" class="sapUiTinyMarginEnd sapUiTinyMarginBottom" />
<Button type="Reject" text="clear" press="onClear" class="sapUiTinyMarginEnd sapUiTinyMarginBottom" />
</FlexBox>
</VBox>