Laravel Multiselect Component

Free · MIT

A searchable multi-value select dropdown that binds an array of selected values via wire:model.

A Multiselect built for the TALL stack — Blade, Livewire 3 & 4, Alpine.js and Tailwind CSS 4. Server-rendered by default, dark-mode ready, and WCAG-minded. Drop it in with a single Blade tag: <x-aura::multiselect>

Try it live in the docs Install free

Installation

composer require bluestarsystem/aura-ui

Usage

<x-aura::multiselect
    label="Technologies"
    :options="['laravel' => 'Laravel', 'livewire' => 'Livewire', 'alpine' => 'Alpine.js']"
    placeholder="Select technologies..."
    wire:model="selectedTech"
/>

See the full API, props and live examples in the Multiselect documentation.

Overview

The <x-aura::multiselect> component lets users pick multiple items from a dropdown list. Selected items appear as removable chips inside the control. It supports keyboard navigation, optional search filtering, a maximum selection limit, and a clear-all button. Options are passed as a PHP array and the selected values are bound via wire:model (expects an array).

Props

Prop	Type	Default	Description
`label`	`string\|null`	`null`	Label text displayed above the multiselect.
`options`	`array`	`[]`	Options array. Associative (`value => label`) or flat (value used as label).
`placeholder`	`string`	`'Select...'`	Placeholder shown when nothing is selected.
`searchable`	`bool`	`true`	Show a search input to filter options.
`max`	`int\|null`	`null`	Maximum number of selections allowed. `null` for unlimited.
`clearable`	`bool`	`true`	Show a clear-all button when at least one item is selected.
`disabled`	`bool`	`false`	Disable the entire control.
`error`	`string\|null`	`null`	Error message displayed below the control, applying error styling.
`hint`	`string\|null`	`null`	Help text displayed below the control. Hidden when an error is present.
`size`	`string`	`'md'`	Size variant. Options: `sm`, `md`, `lg`.