Çok satırlı alan
Çok satırlı metin alanı. Not, adres ve açıklama gibi uzun girişler içindir; etiket, ipucu, yüzen etiket ve hata davranışı acun:input ile aynıdır.
Temel kullanım
Yükseklik rows ile satır sayısı olarak verilir; varsayılan 4. Alan adı ve id wire:model'den türetilir; placeholder gibi öznitelikler doğrudan <textarea>'ya geçer.
<acun:textarea wire:model="not" label="Not" rows="3" placeholder="Depo ekibine iletilecek not" />| Prop | Değerler |
|---|---|
rows | Satır sayısı; varsayılan 4 |
Başlangıç metni
Livewire kullanmayan formlarda alanın ilk değerini slot'a yazın. wire:model ile bağlı alanlarda değer Livewire özelliğinden gelir.
<acun:textarea name="adres" label="Adres" rows="3">Cumhuriyet Mah. 12. Sokak No: 4, Kadıköy</acun:textarea>Yüzen etiket
variant="floating" etiketi alanın ilk satırına yerleştirir; alana odaklanınca ya da alan doluyken üst kenara küçülerek çıkar. Bu türde alan dikey olarak yeniden boyutlandırılabilir.
<acun:textarea wire:model="aciklama" variant="floating" label="Açıklama" rows="3" />| Prop | Değerler |
|---|---|
variant | default | floating |
İpucu ve doğrulama hatası
hint altta yardım metni gösterir; alanın adına ait hata varsa kenarlık kırmızıya döner, mesaj ipucunun yerine geçer ve alan aria-invalid="true" alır. İpucu ya da hata mesajı aria-describedby ile alana bağlanır (id: alanın id'si + -message); kendi aria-describedby değeriniz korunur. required etiketin yanına yıldız koyar.
<div class="space-y-4">
<acun:textarea wire:model="not" label="Not" rows="3" hint="Kurye bu notu teslimat sırasında görür." />
<acun:textarea wire:model="red_nedeni" label="Red nedeni" rows="3" required>Eksik</acun:textarea>
</div>| Prop | Değerler |
|---|---|
hint | Alttaki yardım metni |
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 |
rows | 4 | Satır sayısı |
variant | default | default · floating |
hint | null | Hata yokken alttaki yardım metni; aria-describedby ile alana bağlanır |
(öznitelikler) | — | placeholder, required, disabled, readonly, id … doğrudan <textarea> öğesine geçer; disabled gri zemin ve yazı, readonly gri zemin (yüzen etikette disabled soluk) |