Dikey form
Etiketlerin alanların üstünde durduğu standart form düzeni. Ayrı bir bileşen yoktur; alanlar Tailwind boşluk ve ızgara sınıflarıyla dizilir.
Tek sütun
Kısa formlarda alanları space-y-4 ile alt alta dizin. Her alan etiketini, ipucunu ve hata mesajını kendisi taşır; ek sarmalayıcı gerekmez.
<form class="space-y-4">
<acun:input name="iletisim_ad" label="Ad soyad" />
<acun:input name="iletisim_eposta" type="email" label="E-posta" />
<acun:select name="iletisim_konu" label="Konu" :options="['siparis' => 'Sipariş', 'fatura' => 'Fatura', 'diger' => 'Diğer']" placeholder="Seçiniz" />
<acun:textarea name="iletisim_mesaj" label="Mesaj" rows="3" />
<acun:button type="submit" class="w-full">Gönder</acun:button>
</form>| Prop | Değerler |
|---|---|
space-y-4 | Alanlar arası dikey boşluk |
İki sütun
Uzun formlarda grid md:grid-cols-2 ile geniş ekranda iki sütun kullanın; mobilde alanlar tek sütuna iner. Adres gibi uzun alanları ve düğme satırını md:col-span-2 ile tam genişliğe yayın.
<acun:card title="Müşteri kaydı">
<form class="grid gap-4 md:grid-cols-2">
<acun:input name="ad" label="Ad" />
<acun:input name="soyad" label="Soyad" />
<acun:input-group name="telefon" label="Telefon" prefix="+90" />
<acun:select name="grup" label="Müşteri grubu" :options="['1' => 'Bireysel', '2' => 'Kurumsal']" placeholder="Seçiniz" />
<div class="md:col-span-2"><acun:textarea name="adres" label="Adres" rows="2" /></div>
<div class="flex gap-2 md:col-span-2">
<acun:button type="submit">Kaydet</acun:button>
<acun:button variant="white">Vazgeç</acun:button>
</div>
</form>
</acun:card>| Prop | Değerler |
|---|---|
grid gap-4 md:grid-cols-2 | Geniş ekranda iki sütun |
md:col-span-2 | Alanı tam genişliğe yayar |
Zorunlu alanlar ve ipuçları
acun:input, acun:select, acun:textarea ve acun:input-group'a required eklendiğinde etiketin yanında kırmızı bir yıldız çıkar. Biçim beklentilerini hint ile alanın altında belirtin.
<form class="grid gap-4 md:grid-cols-2">
<acun:input name="z_ad" label="Ad soyad" required />
<acun:input-group name="z_tel" label="Telefon" prefix="+90" required hint="10 haneli, başında 0 olmadan." />
<acun:select name="z_sehir" label="Şehir" :options="['istanbul' => 'İstanbul', 'izmir' => 'İzmir']" placeholder="Seçiniz" required />
<acun:textarea name="z_not" label="Not" rows="2" hint="İsteğe bağlı." />
</form>| Prop | Değerler |
|---|---|
required | Etikete * ekler |
hint | Alanın altındaki yardım metni |
Livewire ile
wire:model verilen alanlar adlarını bu özellikten alır, name yazmanız gerekmez ve doğrulama hataları da aynı adla eşleşir. acun:form düz bir <form> üretir; dirty-check eklerseniz kaydedilmemiş değişiklik koruması açılır (Form koruması sayfasına bakın).
<acun:form wire:submit="kaydet" dirty-check class="grid gap-4 md:grid-cols-2">
<acun:input wire:model="ad" label="Ad" required />
<acun:input wire:model="soyad" label="Soyad" required />
<acun:input-group wire:model="telefon" label="Telefon" prefix="+90" />
<acun:select wire:model="grupId" label="Müşteri grubu" :options="$gruplar" placeholder="Seçiniz" />
<div class="md:col-span-2">
<acun:button type="submit">Kaydet</acun:button>
</div>
</acun:form>| Prop | Değerler |
|---|---|
wire:submit | Gönderimde çağrılan metot |
dirty-check | Kaydedilmemiş değişiklik koruması |