Form
Listbox
The listbox dropdown component allows users to select options from a dropdown list.
With the support of the Floating-UI library, the listbox component can utilize the flip functionalities, allowing it to intelligently reposition itself on the screen based on available space and the user's interactions.
<x-listbox.dropdown x-data class="max-w-sm mx-auto">
<x-slot:button>
<span x-text="
$listbox.selected ?
$listbox.selected.name :
'Select option'
"></span>
</x-slot:button>
<x-slot:options>
@foreach(range(1, 10) as $value)
<x-listbox.option :data="[
'value' => $value,
'name' => 'Option ' . $value
]"/>
@endforeach
</x-slot:options>
</x-listbox.dropdown>
Installation
Make sure to include the required Alpine and TALL kit plugins to enable the popover functionality.
import {
floating,
listbox,
} from "@tall-kit/plugins"
Alpine.plugin(floating)
Alpine.plugin(listbox)
Usage
Select multiple options
Backend
Frontend
<div x-data="{stack: []}">
<x-listbox.dropdown x-model="stack" multiple variant="fill" color="primary" class="max-w-sm mx-auto">
<x-slot:button>
<span x-text="
$listbox.selected && $listbox.selected.length ?
$listbox.selected.length + ' frameworks selected' :
'No framework selected'
"></span>
</x-slot:button>
<x-slot:options>
<x-listbox.group label="Backend">
<x-listbox.option :data="[
'value' => 'laravel',
'name' => 'Laravel',
'selected' => true
]"/>
<x-listbox.option :data="[
'value' => 'livewire',
'name' => 'Livewire',
'selected' => true
]"/>
<x-listbox.option :data="[
'value' => 'ruby',
'name' => 'Ruby on Rails',
'disabled' => true
]"/>
</x-listbox.group>
<x-separator/>
<x-listbox.group label="Frontend">
<x-listbox.option :data="[
'value' => 'tailwindcss',
'name' => 'Tailwind CSS'
]"/>
<x-listbox.option :data="[
'value' => 'alpine',
'name' => 'Alpine.js'
]"/>
<x-listbox.option :data="[
'value' => 'vue',
'name' => 'Vue'
]"/>
<x-listbox.option :data="[
'value' => 'react',
'name' => 'React'
]"/>
</x-listbox.group>
</x-slot:options>
</x-listbox.dropdown>
<span x-text="
stack
.map(framework => framework.charAt(0))
.join(' ').toUpperCase()
"></span>
</div>
With livewire model
Backend
<div>
<x-listbox.dropdown x-data wire:model="selected" multiple class="max-w-sm mx-auto">
<x-slot:button>
<span x-text="
$listbox.selected && $listbox.selected.length ?
$listbox.selected.length + ' frameworks selected' :
'No framework selected'
"></span>
<x-loader wire:loading class="ml-3"/>
</x-slot:button>
<x-slot:options>
<x-listbox.group label="Backend">
<x-listbox.option :data="[
'value' => 'laravel',
'name' => 'Laravel',
]"/>
<x-listbox.option :data="[
'value' => 'livewire',
'name' => 'Livewire',
]"/>
<x-listbox.option :data="[
'value' => 'ruby',
'name' => 'Ruby on Rails',
]"/>
</x-listbox.group>
</x-slot:options>
</x-listbox.dropdown>
<span>
@json($selected)
</span>
</div>