Yatay form

73 · Formlar

Etiketlerin solda, alanların sağda durduğu düzen. Ayar ve detay ekranlarında etiketleri tek sütunda taramayı kolaylaştırır; küçük ekranda etiketler yine alanların üstüne iner.

Form düzeni

Temel kullanım

Her satırı grid sm:grid-cols-[10rem_1fr] ile iki sütuna bölün ve alanları label vermeden kullanın. Etiketi kendiniz yazdığınız için for değerini alanın kimliğiyle eşleştirin; acun:input kimliğini verilmezse name'den alır.

CANLI ÖRNEK

<acun:card title="Ürün bilgileri">
    <form class="space-y-4">
        <div class="grid items-center gap-2 sm:grid-cols-[10rem_1fr]">
            <label for="urun_ad" class="text-sm font-medium text-gray-700 dark:text-zinc-300">Ürün adı</label>
            <acun:input name="urun_ad" value="Kablosuz kulaklık" />
        </div>
        <div class="grid items-center gap-2 sm:grid-cols-[10rem_1fr]">
            <label for="urun_kod" class="text-sm font-medium text-gray-700 dark:text-zinc-300">Stok kodu</label>
            <acun:input name="urun_kod" value="KLK-02" />
        </div>
        <div class="grid items-center gap-2 sm:grid-cols-[10rem_1fr]">
            <label for="urun_kategori" class="text-sm font-medium text-gray-700 dark:text-zinc-300">Kategori</label>
            <acun:select name="urun_kategori" :options="['1' => 'Elektronik', '2' => 'Aksesuar']" />
        </div>
        <div class="grid gap-2 sm:grid-cols-[10rem_1fr]">
            <span></span>
            <div class="flex gap-2"><acun:button type="submit">Kaydet</acun:button><acun:button variant="white">Vazgeç</acun:button></div>
        </div>
    </form>
</acun:card>

Prop	Değerler
`sm:grid-cols-[10rem_1fr]`	Etiket sütununun genişliği
`for / name`	Etiketi alana bağlar

Çok satırlı alanlar ve seçenekler

Metin kutusu ya da anahtar listesi gibi yüksek alanlarda satırı items-start ile üstten hizalayın ve etikete sm:pt-2.5 verin; etiket alanın ilk satırıyla aynı hizada durur.

CANLI ÖRNEK

<acun:card title="Sipariş ayarları">
    <div class="space-y-4">
        <div class="grid items-start gap-2 sm:grid-cols-[10rem_1fr]">
            <label for="ayar_not" class="text-sm font-medium text-gray-700 sm:pt-2.5 dark:text-zinc-300">Fatura notu</label>
            <acun:textarea name="ayar_not" rows="3" />
        </div>
        <div class="grid items-start gap-2 sm:grid-cols-[10rem_1fr]">
            <span class="text-sm font-medium text-gray-700 dark:text-zinc-300">Bildirimler</span>
            <div class="flex flex-col gap-3">
                <acun:switch name="ayar_sms" label="SMS gönder" checked />
                <acun:switch name="ayar_eposta" label="E-posta gönder" />
            </div>
        </div>
    </div>
</acun:card>

Prop	Değerler
`items-start`	Satırı üstten hizalar
`sm:pt-2.5`	Etiketi alanın ilk satırına indirir

Zorunlu alan, ipucu ve hata

acun:input yıldızı yalnızca kendi label'ı varken gösterir; yatay düzende yıldızı etikete siz ekleyin. İpucu ve hata mesajı alanın altında, sağ sütunda çıkar.

CANLI ÖRNEK

<div class="space-y-4">
    <div class="grid items-start gap-2 sm:grid-cols-[10rem_1fr]">
        <label for="kod" class="text-sm font-medium text-gray-700 sm:pt-2.5 dark:text-zinc-300">Stok kodu <span class="text-red-500">*</span></label>
        <acun:input name="kod" value="KLK-01" required />
    </div>
    <div class="grid items-start gap-2 sm:grid-cols-[10rem_1fr]">
        <label for="kapasite" class="text-sm font-medium text-gray-700 sm:pt-2.5 dark:text-zinc-300">Günlük kapasite</label>
        <acun:input name="kapasite" type="number" value="40" hint="Bir günde kargolanabilecek en fazla sipariş." />
    </div>
</div>

Prop	Değerler
`required`	Alana geçer; yıldızı etikete elle ekleyin
`hint`	Alanın altında, sağ sütunda