Boson
Packagist GitHub

Listbox

A custom select dropdown with support for search, multi-select, and async remote options.

Basic usage

United States
Canada
Mexico
Brazil 
<x-boson::listbox name="country" placeholder="Select a country">
    <x-boson::listbox.option value="us">United States</x-boson::listbox.option>
    <x-boson::listbox.option value="ca">Canada</x-boson::listbox.option>
    <x-boson::listbox.option value="mx">Mexico</x-boson::listbox.option>
    <x-boson::listbox.option value="br">Brazil</x-boson::listbox.option>
</x-boson::listbox>

Searchable

PHP
JavaScript
Python
Ruby
Go
Rust 
<x-boson::listbox name="language" placeholder="Select a language" searchable>
    <x-boson::listbox.option value="php">PHP</x-boson::listbox.option>
    <x-boson::listbox.option value="js">JavaScript</x-boson::listbox.option>
    <x-boson::listbox.option value="py">Python</x-boson::listbox.option>
    <x-boson::listbox.option value="rb">Ruby</x-boson::listbox.option>
    <x-boson::listbox.option value="go">Go</x-boson::listbox.option>
    <x-boson::listbox.option value="rs">Rust</x-boson::listbox.option>
</x-boson::listbox>

Multi-select

Laravel
Vue
React
Tailwind
Alpine 
<x-boson::listbox name="tags" placeholder="Select tags" multiple>
    <x-boson::listbox.option value="laravel">Laravel</x-boson::listbox.option>
    <x-boson::listbox.option value="vue">Vue</x-boson::listbox.option>
    <x-boson::listbox.option value="react">React</x-boson::listbox.option>
    <x-boson::listbox.option value="tailwind">Tailwind</x-boson::listbox.option>
    <x-boson::listbox.option value="alpine">Alpine</x-boson::listbox.option>
</x-boson::listbox>

Multi-select with search

PHP
Laravel
JavaScript
Vue
React
Tailwind CSS
Alpine.js
Livewire 
<x-boson::listbox name="stack" placeholder="Build your stack" multiple searchable>
    <x-boson::listbox.option value="php">PHP</x-boson::listbox.option>
    <x-boson::listbox.option value="laravel">Laravel</x-boson::listbox.option>
    <x-boson::listbox.option value="js">JavaScript</x-boson::listbox.option>
    <x-boson::listbox.option value="vue">Vue</x-boson::listbox.option>
    <x-boson::listbox.option value="react">React</x-boson::listbox.option>
    <x-boson::listbox.option value="tailwind">Tailwind CSS</x-boson::listbox.option>
    <x-boson::listbox.option value="alpine">Alpine.js</x-boson::listbox.option>
    <x-boson::listbox.option value="livewire">Livewire</x-boson::listbox.option>
</x-boson::listbox>

Async remote options

<x-boson::listbox name="user" placeholder="Search users..." async="/api/users" async:min="1" />

Custom empty message

Apple
Banana
Cherry 
<x-boson::listbox name="fruit" placeholder="Pick a fruit" searchable empty="No fruits match your search">
    <x-boson::listbox.option value="apple">Apple</x-boson::listbox.option>
    <x-boson::listbox.option value="banana">Banana</x-boson::listbox.option>
    <x-boson::listbox.option value="cherry">Cherry</x-boson::listbox.option>
</x-boson::listbox>

Props

Prop Type Default Description
name string null Form field name for the hidden input
placeholder string Select... Placeholder text shown when nothing is selected
multiple bool false Allow selecting multiple options
searchable bool false Enable client-side search filtering
empty string No results found Message shown when no options match the search
async string null URL for fetching remote options via AJAX
async:param string q Query parameter name sent to the async URL
async:min int 2 Minimum characters before triggering async search
async:debounce int 300 Debounce delay in milliseconds for async requests
selected:suffix string selected Suffix text for multi-select count display

Sub-components

Prop Type Default Description
listbox.option An individual option. Requires a value attribute.
listbox.search Search input, rendered automatically when searchable or async is set.