Onay ve seçenek
Marka renginde onay kutusu (acun:checkbox) ve seçenek düğmesi (acun:radio). Etiket bileşenin içinde çizilir; id alan adı ve değerden türetildiği için etiket her zaman kutuya bağlıdır.
Onay kutusu
Etiketi label ile verin; etikete tıklamak da kutuyu işaretler. Başlangıçta işaretli olması için checked verin. İşaretli kutu varsayılan olarak 1 değerini gönderir; farklı bir değer için value özniteliğini kullanın.
<div class="flex flex-col gap-3">
<acun:checkbox name="eposta_bildirimi" label="E-posta bildirimi" checked />
<acun:checkbox name="sms_bildirimi" label="SMS bildirimi" />
</div>| Prop | Değerler |
|---|---|
label | Kutunun yanındaki yazı |
checked | true | false |
Seçenek düğmesi
Aynı gruptaki düğmelere aynı name, her birine farklı bir value verin; gruptan yalnızca biri seçilebilir. Düğmenin id'si name-value biçiminde üretilir.
<div class="flex flex-wrap gap-6">
<acun:radio name="musteri_turu" value="bireysel" label="Bireysel" checked />
<acun:radio name="musteri_turu" value="kurumsal" label="Kurumsal" />
</div>| Prop | Değerler |
|---|---|
name | Grup adı |
value | Seçildiğinde gönderilen değer |
checked | true | false |
Zengin etiket
label verilmezse slot etiket olarak kullanılır; bağlantı gibi biçimli içerik gerektiğinde işe yarar. İçeriği tek bir <span> içine alın ki kutuyla arasındaki boşluk bozulmasın.
<acun:checkbox name="aydinlatma_onayi">
<span><a href="#" class="font-medium text-brand-600 hover:underline dark:text-brand-400">Aydınlatma metnini</a> okudum ve onaylıyorum.</span>
</acun:checkbox>Pasif
disabled özniteliği doğrudan kutuya ya da düğmeye geçer; pasif öğe soluk çizilir, tıklanamaz ve üzerine gelince imleç yasak işaretine döner. Seçenek düğmesinde etiket de griye döner.
<div class="flex flex-wrap gap-10">
<div class="flex flex-col gap-3">
<acun:checkbox name="otomatik_yedek" label="Otomatik yedekleme" checked disabled />
<acun:checkbox name="toplu_sms" label="Toplu SMS (yetkiniz yok)" disabled />
</div>
<div class="flex flex-col gap-3">
<acun:radio name="teslim_sekli" value="kargo" label="Standart kargo" checked />
<acun:radio name="teslim_sekli" value="ayni_gun" label="Aynı gün teslimat (bu bölgede yok)" disabled />
</div>
</div>| Prop | Değerler |
|---|---|
disabled | Öznitelik |
Livewire ile
Tek onay kutusunu wire:model ile bir bool özelliğe, aynı özelliğe bağlı birden çok kutuyu bir diziye bağlayın; dizide işaretli kutuların value değerleri tutulur. Seçenek düğmelerinde grup adı wire:model'den gelir. Bu iki bileşen doğrulama hatası göstermez; mesajı grubun altına kendiniz ekleyin.
<acun:checkbox wire:model="aktif" label="Aktif müşteri" />
<fieldset class="flex flex-col gap-3">
<legend class="mb-2 text-sm font-medium text-gray-700 dark:text-zinc-300">Kargo günleri</legend>
<acun:checkbox wire:model="gunler" value="pazartesi" label="Pazartesi" />
<acun:checkbox wire:model="gunler" value="carsamba" label="Çarşamba" />
<acun:checkbox wire:model="gunler" value="cuma" label="Cuma" />
@error('gunler') <p class="text-sm text-red-600">{{ $message }}</p> @enderror
</fieldset>
<acun:radio wire:model="oncelik" value="normal" label="Normal" />
<acun:radio wire:model="oncelik" value="acil" label="Acil" />Prop'lar ve slot'lar
Bileşenin kabul ettiği değerler.
| Prop | Varsayılan | Açıklama |
|---|---|---|
checkbox: label | null | Yanındaki yazı; verilmezse slot kullanılır |
checkbox: name | null | Alan adı; verilmezse wire:model değeri |
checkbox: checked | false | Başlangıçta işaretli |
checkbox: value (öznitelik) | 1 | İşaretliyken gönderilen değer; id name-value olur |
radio: label | null | Yanındaki yazı; verilmezse slot kullanılır |
radio: name | null | Grup adı; verilmezse wire:model değeri |
radio: value | null | Seçildiğinde gönderilen değer; id name-value olur |
radio: checked | false | Başlangıçta seçili |