Seçim kutusu
Etiketli seçim kutusu. Seçenekler options dizisinden ya da slot'tan gelir; etiket, ipucu ve hata davranışı acun:input ile aynıdır.
Temel kullanım
Seçenekleri options ile değer => metin dizisi olarak verin. placeholder başa listede görünmeyen bir ilk seçenek ekler; kullanıcı bir seçim yaptıktan sonra bu boş değere geri dönülemez. Değer null ya da boş metin iken kutuda bu metin görünür.
<acun:select wire:model="durum" label="Durum" :options="['1' => 'Aktif', '0' => 'Pasif']" placeholder="Seçiniz" />| Prop | Değerler |
|---|---|
options | değer => metin dizisi |
placeholder | Seçilemeyen ilk seçenek |
Slot ile seçenekler
Gruplu seçenekler ya da seçenek başına öznitelik gerektiğinde <option> ve <optgroup> öğelerini slot'a yazın. options ile birlikte kullanılırsa slot'taki seçenekler önce gelir.
<acun:select name="odeme_yontemi" label="Ödeme yöntemi">
<optgroup label="Kartla ödeme">
<option value="kredi_karti">Kredi kartı</option>
<option value="banka_karti">Banka kartı</option>
</optgroup>
<optgroup label="Diğer">
<option value="havale">Havale / EFT</option>
</optgroup>
</acun:select>Yüzen etiket
variant="floating" etiketi kutunun üst kenarına yerleştirir. Seçim kutusunda her zaman bir değer göründüğü için etiket hep yukarıda durur; odaklanınca ana renge döner. Yüzen etiketli metin alanlarıyla aynı formda tutarlı görünüm sağlar.
<acun:select name="ilce" variant="floating" label="İlçe" :options="['kadikoy' => 'Kadıköy', 'besiktas' => 'Beşiktaş', 'uskudar' => 'Üsküdar']" />| Prop | Değerler |
|---|---|
variant | default | floating |
İpucu ve doğrulama hatası
hint altta yardım metni gösterir. Alanın adına ait hata $errors içinde varsa kenarlık kırmızıya döner, mesaj ipucunun yerine geçer ve kutu aria-invalid="true" alır. İpucu ya da hata mesajı aria-describedby ile kutuya bağlanır (id: kutunun id'si + -message); kendi aria-describedby değeriniz korunur. required etiketin yanına yıldız koyar.
<div class="space-y-4">
<acun:select wire:model="musteri_grubu" label="Müşteri grubu" :options="['perakende' => 'Perakende', 'toptan' => 'Toptan']" hint="Müşteriye uygulanacak fiyat listesi." />
<acun:select wire:model="kargo_firmasi_id" label="Kargo firması" required :options="['1' => 'Hızlı Kargo', '2' => 'Ekspres Kurye']" placeholder="Seçiniz" />
</div>| Prop | Değerler |
|---|---|
hint | Alttaki yardım metni |
Livewire ile
Bağlı değer değiştiğinde sunucuya hemen gitmesi için wire:model.live kullanın. Livewire güncellemesiyle sonradan eklenen kutularda (ör. bir @if bloğunda açılan alan) seçili değer bir sonraki adımda yeniden uygulanır; ekstra kod gerekmez.
<acun:select wire:model.live="ilce_id" label="İlçe" :options="$ilceler" placeholder="Seçiniz" />
@if ($ilce_id)
<acun:select wire:model="mahalle_id" label="Mahalle" :options="$mahalleler" placeholder="Seçiniz" />
@endifProp'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 |
options | [] | değer => metin; slot'taki seçeneklerden sonra listelenir |
placeholder | null | Listede görünmeyen ilk seçenek; değer null ya da boşken gösterilir |
variant | default | default · floating |
hint | null | Hata yokken alttaki yardım metni; aria-describedby ile alana bağlanır |
(öznitelikler) | — | wire:model, required, disabled, id … doğrudan <select> öğesine geçer; disabled kutu gri zemin ve yazıyla çizilir |