php artisan aura:add multiselect

composer require bluestarsystem/aura-ui
php artisan aura:install

• Overview
• Basic Usage
• Props
• Variants / Examples
  • With Maximum Selection
  • Non-Searchable
  • With Error State
  • With Hint Text
  • Livewire Integration
  • Flat Options Array
• Keyboard Navigation
• Accessibility

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).

Basic Usage#

<x-aura::multiselect
    label="Technologies"
    :options="['laravel' => 'Laravel', 'livewire' => 'Livewire', 'alpine' => 'Alpine.js', 'tailwind' => 'Tailwind CSS', 'inertia' => 'Inertia.js']"
    placeholder="Select technologies..."
/>

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

Props#

Variants / Examples#

With Maximum Selection#

<x-aura::multiselect
    label="Choose up to 2 frameworks"
    :options="['react' => 'React', 'vue' => 'Vue.js', 'svelte' => 'Svelte', 'angular' => 'Angular']"
    :max="2"
    placeholder="Pick two..."
/>

<x-aura::multiselect
    label="Choose up to 2 frameworks"
    :options="['react' => 'React', 'vue' => 'Vue.js', 'svelte' => 'Svelte', 'angular' => 'Angular']"
    :max="2"
    placeholder="Pick two..."
    wire:model="selectedFrameworks"
/>

Non-Searchable#

<x-aura::multiselect
    label="Priority"
    :options="['low' => 'Low', 'medium' => 'Medium', 'high' => 'High', 'critical' => 'Critical']"
    :searchable="false"
    placeholder="Select priority levels..."
/>

<x-aura::multiselect
    label="Priority"
    :options="['low' => 'Low', 'medium' => 'Medium', 'high' => 'High', 'critical' => 'Critical']"
    :searchable="false"
    wire:model="priorities"
/>

With Error State#

<x-aura::multiselect
    label="Categories"
    :options="['news' => 'News', 'tutorial' => 'Tutorial', 'opinion' => 'Opinion']"
    error="Please select at least one category."
/>

<x-aura::multiselect
    label="Categories"
    :options="$categoryOptions"
    error="Please select at least one category."
    wire:model="categories"
/>

With Hint Text#

<x-aura::multiselect
    label="Notifications"
    :options="['email' => 'Email', 'sms' => 'SMS', 'push' => 'Push', 'slack' => 'Slack']"
    hint="Select all channels you want to receive notifications on."
/>

<x-aura::multiselect
    label="Notification Channels"
    :options="['email' => 'Email', 'sms' => 'SMS', 'push' => 'Push', 'slack' => 'Slack']"
    hint="Select all channels you want to receive notifications on."
    wire:model="channels"
/>

Livewire Integration#

<x-aura::multiselect
    label="Assigned Tags"
    :options="$availableTags"
    :max="5"
    placeholder="Choose tags..."
    hint="Up to 5 tags allowed."
    wire:model.live="selectedTags"
/>

class PostEditor extends Component
{
    public array $selectedTags = [];
    public array $availableTags = [];

    public function mount(): void
    {
        $this->availableTags = Tag::pluck('name', 'id')->toArray();
    }
}

Flat Options Array#

When options are passed as a flat (non-associative) array, the value and label are both set to the string itself:

<x-aura::multiselect
    label="Skills"
    :options="['PHP', 'JavaScript', 'Python', 'Go', 'Rust']"
    wire:model="skills"
/>

Keyboard Navigation#

Accessibility#

• When a label prop is provided, a <label> element is rendered above the control.
• The dropdown uses role="listbox" and each option has role="option" with aria-selected.
• Each chip's remove button has aria-label="Remove".
• The clear-all button has aria-label="Clear all".
• Error messages are rendered in a <p> tag styled with the aura-input-error-text class.
• The disabled state is applied via opacity-50 pointer-events-none and the search input receives the HTML disabled attribute.
• All additional HTML attributes (including aria-*, id) are forwarded to the outer wrapper via Blade's attribute bag.