Metin alanı
Etiketli metin alanı. Alan adı ve id wire:model değerinden türetilir, doğrulama hatası $errors içinden kendiliğinden gösterilir; yüzen etiket ve şifre göster/gizle seçenekleri vardır.
Temel kullanım
label alanın üstüne etiket çizer. Alanın name ve id değeri wire:model'den türetilir (wire:model.live gibi değiştiricilerle de); böylece id her güncellemede aynı kalır ve Livewire güncellemelerinde odak kaybolmaz. Livewire kullanmıyorsanız name verin. placeholder, value gibi diğer öznitelikler doğrudan <input>'a geçer.
<div class="space-y-4">
<acun:input wire:model="urun_adi" label="Ürün adı" placeholder="Örn. Kablosuz kulaklık" />
<acun:input name="ozel_kod" label="Özel kod" value="SKU-01" />
</div>| Prop | Değerler |
|---|---|
label | Alanın üstündeki etiket |
name | Alan adı; verilmezse wire:model değeri |
Etiket ve ipucu
hint alanın altına kısa bir yardım metni ekler; hata olduğunda yerini hata mesajına bırakır. İpucu aria-describedby ile alana bağlanır, böylece ekran okuyucular alana gelindiğinde onu da okur. required özniteliği etiketin yanına kırmızı bir yıldız koyar ve tarayıcının zorunlu alan denetimini açar.
<div class="space-y-4">
<acun:input wire:model="telefon" type="tel" label="Telefon" required hint="Başında 0 olmadan 10 hane." />
<acun:input wire:model="ozel_kod" label="Özel kod" hint="Raporlarda kısa ad olarak görünür." />
</div>| Prop | Değerler |
|---|---|
hint | Alttaki yardım metni |
required | Öznitelik; etikete * ekler |
Türler
type doğrudan alana geçer; varsayılan text. type="search" alanın soluna büyüteç ikonu ekler. Etiketi olmayan arama kutularında alanın amacını aria-label ile belirtin.
<div class="space-y-4">
<acun:input name="eposta" type="email" label="E-posta" placeholder="[email protected]" />
<acun:input name="stok_adedi" type="number" label="Stok adedi" min="0" value="12" />
<acun:input name="teslim_tarihi" type="date" label="Teslim tarihi" />
<acun:search wire:model.live.debounce.400ms="arama" placeholder="Ürün adı veya özel kod" aria-label="Ürünlerde ara" />
</div>| Prop | Değerler |
|---|---|
type | text | email | number | date | tel | search | password … |
Yüzen etiket
variant="floating" etiketi alanın içine yerleştirir; alana odaklanınca ya da alan doluyken etiket üst kenara küçülerek çıkar. Etiket yer tutucu görevi gördüğü için bu türde placeholder kullanılmaz. Giriş ekranları gibi az alanlı formlar için uygundur.
<div class="space-y-4">
<acun:input wire:model="email" type="email" variant="floating" label="E-posta" />
<acun:input name="ad_soyad" variant="floating" label="Ad soyad" value="Ayşe Yılmaz" />
</div>| Prop | Değerler |
|---|---|
variant | default | floating |
Şifre alanı
type="password" ile birlikte viewable verildiğinde alanın sağına "Şifreyi göster" adlı bir göz düğmesi eklenir; kullanıcı yazdığı şifreyi görünür yapıp yeniden gizleyebilir. Düğmeye klavyeyle (Tab) de ulaşılır ve basılı olup olmadığını aria-pressed ile bildirir. Yüzen etiketle de çalışır.
<div class="space-y-4">
<acun:input wire:model="password" type="password" label="Şifre" viewable />
<acun:input wire:model="password_confirmation" type="password" variant="floating" label="Şifre (tekrar)" viewable />
</div>| Prop | Değerler |
|---|---|
viewable | true | false |
Pasif ve salt okunur
disabled alanı gri zemin ve gri yazıyla çizer, üzerine gelince imleç yasak işaretine döner; değer forma gönderilmez. readonly alanın değiştirilemediğini yalnızca gri zeminle belirtir, değer yine gönderilir ve kopyalanabilir. Yüzen etiketli alanlarda pasif durum, etiket çentiği bozulmasın diye soluklaştırılarak gösterilir.
<div class="space-y-4">
<acun:input name="musteri_no" label="Müşteri no" value="MÜŞ-10482" readonly />
<acun:input name="kayit_tarihi" label="Kayıt tarihi" value="12.03.2026" disabled />
<acun:input name="firma" variant="floating" label="Firma" value="Acme Yazılım" disabled />
</div>| Prop | Değerler |
|---|---|
disabled | Öznitelik; gri zemin ve yazı (yüzen etikette soluk) |
readonly | Öznitelik; gri zemin (yüzen etiket hariç) |
Doğrulama hatası
Alanın adına ait bir hata $errors içinde varsa kenarlık kırmızıya döner ve mesaj alanın altında gösterilir; bu sırada hint gizlenir. Alan aria-invalid="true" alır ve mesaja aria-describedby ile bağlanır; mesajın id'si alanın id'sine -message eklenerek üretilir (burada tc_kimlik_no-message). Kendi aria-describedby değerinizi verirseniz korunur, mesajın id'si onun yanına eklenir. Livewire'da $this->validate() sonrası kendiliğinden çalışır, ek kod gerekmez.
<acun:input wire:model="tc_kimlik_no" label="T.C. kimlik no" value="1234567" hint="11 haneli numara." />| Prop | Değerler |
|---|---|
aria-describedby | Öznitelik; verilen değere mesajın id'si eklenir |
Prop'lar ve slot'lar
Bileşenin kabul ettiği değerler.
| Prop | Varsayılan | Açıklama |
|---|---|---|
label | null | Etiket; required özniteliği varsa yanına * eklenir |
name | null | Alan adı; verilmezse wire:model değeri. id ve hata anahtarı da buradan gelir |
hint | null | Hata yokken alttaki yardım metni; aria-describedby ile alana bağlanır |
variant | default | default · floating |
viewable | false | Şifre alanında klavyeyle de kullanılan göster/gizle düğmesi (aria-pressed) |
(öznitelikler) | — | type, placeholder, value, required, disabled, readonly, id … doğrudan <input> öğesine geçer; aria-describedby mesajın id'siyle birleştirilir |