Armada

Checkbox

Tekli, grup, belirsiz durum ve kart görünümü.

Form VCheckbox 4 örnek

Tekli

Etiket ve açıklama.

Kodu göster
blade
<div class="sc-col">
    <armada:checkbox name="terms" label="Kullanım koşullarını kabul ediyorum" />
    <armada:checkbox name="news" label="Bülten" description="Ayda bir e-posta, istediğin an çıkabilirsin." checked />
    <armada:checkbox label="Devre dışı" disabled />
</div>

Grup

Hepsini seç (belirsiz durum) ile.

İzinler

Bu rol için izinleri seçin.

Kodu göster
blade
<div x-data="{ all: ['read'], opts: ['read', 'write', 'delete'] }">
    <armada:checkbox.group label="İzinler" description="Bu rol için izinleri seçin.">
        <label class="arm-check">
            <input type="checkbox" class="arm-checkbox" x-bind:checked="all.length === opts.length" x-effect="$el.indeterminate = all.length > 0 && all.length < opts.length"
                x-on:change="all = $el.checked ? [...opts] : []">
            <span class="arm-check__text"><span class="arm-check__label">Tümünü seç</span></span>
        </label>
        <div class="arm-choice-group" style="padding-inline-start:28px">
            <armada:checkbox x-model="all" value="read" label="Okuma" />
            <armada:checkbox x-model="all" value="write" label="Yazma" />
            <armada:checkbox x-model="all" value="delete" label="Silme" />
        </div>
    </armada:checkbox.group>
</div>

Yatay grup

Günler
Kodu göster
blade
<armada:checkbox.group label="Günler" horizontal>
    @foreach (['Pzt', 'Sal', 'Çar', 'Per', 'Cum'] as $d)
        <armada:checkbox name="days[]" :value="$d" :label="$d" :checked="in_array($d, ['Pzt', 'Çar'])" />
    @endforeach
</armada:checkbox.group>

Kart görünümü

Eklentiler
Kodu göster
blade
<armada:checkbox.group label="Eklentiler" variant="cards">
    <armada:checkbox card name="addons[]" value="backup" icon="database-backup" label="Günlük yedek" description="+₺49 / ay" checked />
    <armada:checkbox card name="addons[]" value="ssl" icon="shield-check" label="Gelişmiş SSL" description="+₺29 / ay" />
    <armada:checkbox card name="addons[]" value="cdn" icon="globe" label="CDN" description="+₺99 / ay" />
</armada:checkbox.group>

Özellikler

<armada:checkbox>

Prop Varsayılan
label null
description null
name null
value null
checked false
indeterminate false
card false
icon null

<armada:checkbox.group>

Değerler: default | cards

Prop Varsayılan Not
label null
description null
name null
variant 'default'
horizontal false
Sonuç yok