Combobox

<div class="sc-narrow">
    <armada:combobox label="Sorumlu" placeholder="Kişi seçin" clearable :options="[
        ['value' => 1, 'label' => 'Elif Kaya', 'description' => 'Tasarım'],
        ['value' => 2, 'label' => 'Mert Demir', 'description' => 'Backend'],
        ['value' => 3, 'label' => 'Zeynep Ak', 'description' => 'Mobil'],
        ['value' => 4, 'label' => 'Can Yılmaz', 'description' => 'DevOps'],
    ]" :value="2" />
</div>

<div class="sc-narrow">
    <armada:combobox label="Etiketler" multiple clearable :value="['laravel', 'livewire']" :options="['laravel' => 'Laravel', 'livewire' => 'Livewire', 'alpine' => 'Alpine.js', 'vue' => 'Vue', 'flutter' => 'Flutter', 'dotnet' => '.NET']" />
</div>

<div class="sc-narrow">
    <armada:combobox label="Saat dilimi" :options="[
        ['value' => 'Europe/Istanbul', 'label' => 'İstanbul (UTC+3)', 'group' => 'Avrupa'],
        ['value' => 'Europe/Berlin', 'label' => 'Berlin (UTC+1)', 'group' => 'Avrupa'],
        ['value' => 'Asia/Tokyo', 'label' => 'Tokyo (UTC+9)', 'group' => 'Asya'],
        ['value' => 'Asia/Dubai', 'label' => 'Dubai (UTC+4)', 'group' => 'Asya'],
        ['value' => 'America/New_York', 'label' => 'New York (UTC−5)', 'group' => 'Amerika'],
    ]" value="Europe/Istanbul" />
</div>

<div class="sc-narrow">
    <armada:combobox label="Kategoriler" multiple creatable placeholder="Yazın veya seçin" :options="['Haber', 'Teknoloji', 'Spor']" />
</div>

<div class="sc-narrow" x-data="{ city: 'izmir' }">
    <armada:combobox label="Şehir" x-model="city" :options="['istanbul' => 'İstanbul', 'ankara' => 'Ankara', 'izmir' => 'İzmir']" />
    <p class="arm-text arm-text--sm arm-text--muted" style="margin-top:8px">Seçilen: <strong x-text="city"></strong></p>
</div>