Combobox

Input-triggered dropdown with type-ahead search, keyboard navigation, and async support.

Basic usage

<x-boson::combobox name="fruit" placeholder="Select a fruit...">
    <x-boson::combobox.option value="apple">Apple</x-boson::combobox.option>
    <x-boson::combobox.option value="banana">Banana</x-boson::combobox.option>
    <x-boson::combobox.option value="cherry">Cherry</x-boson::combobox.option>
    <x-boson::combobox.option value="grape">Grape</x-boson::combobox.option>
    <x-boson::combobox.option value="orange">Orange</x-boson::combobox.option>
</x-boson::combobox>

Async (remote search)

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

Custom empty message

<x-boson::combobox
    name="team"
    placeholder="Search teams..."
    empty="No teams match your search"
>
    <x-boson::combobox.option value="engineering">Engineering</x-boson::combobox.option>
    <x-boson::combobox.option value="design">Design</x-boson::combobox.option>
    <x-boson::combobox.option value="marketing">Marketing</x-boson::combobox.option>
</x-boson::combobox>

Props

Prop	Type	Default	Description
`name`	`string`	`null`	Form input name for the selected value
`placeholder`	`string`	`null`	Placeholder text for the search input
`empty`	`string`	`No results found`	Message shown when no options match the search
`async`	`string`	`null`	URL endpoint for remote option loading
`async:param`	`string`	`q`	Query parameter name sent to the async endpoint
`async:min`	`number`	`2`	Minimum characters before triggering async search
`async:debounce`	`number`	`300`	Debounce delay in milliseconds for async requests

Option props

Prop	Type	Default	Description
`value`	`string`	`null`	Value stored when this option is selected