blatui

Components

Autocomplete

A text input that filters and suggests options as you type.

php artisan blatui:add autocomplete 
@php($frameworks = [
    ['value' => 'next', 'label' => 'Next.js'],
    ['value' => 'svelte', 'label' => 'SvelteKit'],
    ['value' => 'nuxt', 'label' => 'Nuxt'],
    ['value' => 'remix', 'label' => 'Remix'],
    ['value' => 'astro', 'label' => 'Astro'],
    ['value' => 'laravel', 'label' => 'Laravel'],
])

<x-ui.autocomplete :options="$frameworks" placeholder="Search framework..." />

Disabled

@php($frameworks = [
    ['value' => 'next', 'label' => 'Next.js'],
    ['value' => 'svelte', 'label' => 'SvelteKit'],
    ['value' => 'nuxt', 'label' => 'Nuxt'],
])

<x-ui.autocomplete :options="$frameworks" disabled placeholder="Search framework..." />

Multiple

<x-ui.autocomplete
    multiple
    width="w-[280px]"
    placeholder="Search frameworks..."
    :value="['next']"
    :options="[
        ['value' => 'next', 'label' => 'Next.js'],
        ['value' => 'svelte', 'label' => 'SvelteKit'],
        ['value' => 'nuxt', 'label' => 'Nuxt'],
        ['value' => 'remix', 'label' => 'Remix'],
        ['value' => 'astro', 'label' => 'Astro'],
    ]"
/>

Sizes

@php($frameworks = [
    ['value' => 'next', 'label' => 'Next.js'],
    ['value' => 'svelte', 'label' => 'SvelteKit'],
    ['value' => 'nuxt', 'label' => 'Nuxt'],
    ['value' => 'remix', 'label' => 'Remix'],
    ['value' => 'astro', 'label' => 'Astro'],
])

<div class="flex flex-col gap-3">
    <x-ui.autocomplete :options="$frameworks" size="sm" placeholder="Small" />
    <x-ui.autocomplete :options="$frameworks" size="default" placeholder="Default" />
    <x-ui.autocomplete :options="$frameworks" size="lg" placeholder="Large" />
</div>

With Icon

@php($frameworks = [
    ['value' => 'next', 'label' => 'Next.js'],
    ['value' => 'svelte', 'label' => 'SvelteKit'],
    ['value' => 'nuxt', 'label' => 'Nuxt'],
    ['value' => 'remix', 'label' => 'Remix'],
    ['value' => 'astro', 'label' => 'Astro'],
    ['value' => 'laravel', 'label' => 'Laravel'],
])

<x-ui.autocomplete :options="$frameworks" icon="search" placeholder="Search framework..." />

With Label

@php($frameworks = [
    ['value' => 'next', 'label' => 'Next.js'],
    ['value' => 'svelte', 'label' => 'SvelteKit'],
    ['value' => 'nuxt', 'label' => 'Nuxt'],
    ['value' => 'remix', 'label' => 'Remix'],
    ['value' => 'astro', 'label' => 'Astro'],
])

<div class="grid w-[260px] gap-2">
    <x-ui.label for="framework">Framework</x-ui.label>
    <x-ui.autocomplete name="framework" :options="$frameworks" placeholder="Search framework..." />
</div>