A multi-select component that displays selected items as removable pills, with optional search and icon support.
Click to open the dropdown and select one or more options. Each selected item appears as a removable pill.
<x-ui::pillbox placeholder="Select frameworks...">
<x-ui::pillbox-option value="laravel">Laravel</x-ui::pillbox-option>
<x-ui::pillbox-option value="livewire">Livewire</x-ui::pillbox-option>
<x-ui::pillbox-option value="inertia">Inertia.js</x-ui::pillbox-option>
<x-ui::pillbox-option value="filament">Filament</x-ui::pillbox-option>
<x-ui::pillbox-option value="volt">Volt</x-ui::pillbox-option>
</x-ui::pillbox>Add the searchable prop to enable live filtering of options as you type.
<x-ui::pillbox placeholder="Select countries..." searchable>
<x-ui::pillbox-option value="us">United States</x-ui::pillbox-option>
<x-ui::pillbox-option value="gb">United Kingdom</x-ui::pillbox-option>
<x-ui::pillbox-option value="ca">Canada</x-ui::pillbox-option>
<x-ui::pillbox-option value="au">Australia</x-ui::pillbox-option>
<x-ui::pillbox-option value="de">Germany</x-ui::pillbox-option>
<x-ui::pillbox-option value="fr">France</x-ui::pillbox-option>
<x-ui::pillbox-option value="jp">Japan</x-ui::pillbox-option>
<x-ui::pillbox-option value="br">Brazil</x-ui::pillbox-option>
</x-ui::pillbox>Add an icon to each option using the icon prop to provide visual context.
<x-ui::pillbox placeholder="Select permissions...">
<x-ui::pillbox-option value="read" icon="eye">Read</x-ui::pillbox-option>
<x-ui::pillbox-option value="write" icon="pencil">Write</x-ui::pillbox-option>
<x-ui::pillbox-option value="delete" icon="trash">Delete</x-ui::pillbox-option>
<x-ui::pillbox-option value="admin" icon="shield-check">Admin</x-ui::pillbox-option>
<x-ui::pillbox-option value="export" icon="arrow-down-tray">Export</x-ui::pillbox-option>
</x-ui::pillbox>Pass an array to the value prop to pre-populate the selection on render.
<x-ui::pillbox
placeholder="Select tags..."
:value="['php', 'tailwind']"
>
<x-ui::pillbox-option value="php">PHP</x-ui::pillbox-option>
<x-ui::pillbox-option value="javascript">JavaScript</x-ui::pillbox-option>
<x-ui::pillbox-option value="tailwind">Tailwind CSS</x-ui::pillbox-option>
<x-ui::pillbox-option value="alpine">Alpine.js</x-ui::pillbox-option>
<x-ui::pillbox-option value="mysql">MySQL</x-ui::pillbox-option>
</x-ui::pillbox>Use size="sm" for compact layouts alongside smaller form elements.
{{-- Default --}}
<x-ui::pillbox placeholder="Select options...">
<x-ui::pillbox-option value="design">Design</x-ui::pillbox-option>
<x-ui::pillbox-option value="engineering">Engineering</x-ui::pillbox-option>
<x-ui::pillbox-option value="marketing">Marketing</x-ui::pillbox-option>
</x-ui::pillbox>
{{-- Small --}}
<x-ui::pillbox size="sm" placeholder="Select options...">
<x-ui::pillbox-option value="design">Design</x-ui::pillbox-option>
<x-ui::pillbox-option value="engineering">Engineering</x-ui::pillbox-option>
<x-ui::pillbox-option value="marketing">Marketing</x-ui::pillbox-option>
</x-ui::pillbox>Use disabled to prevent interaction, and invalid to indicate a validation error.
{{-- Disabled with pre-selected values --}}
<x-ui::pillbox disabled :value="['php', 'laravel']" placeholder="Select options...">
<x-ui::pillbox-option value="php">PHP</x-ui::pillbox-option>
<x-ui::pillbox-option value="laravel">Laravel</x-ui::pillbox-option>
<x-ui::pillbox-option value="vue">Vue</x-ui::pillbox-option>
</x-ui::pillbox>
{{-- Invalid --}}
<x-ui::pillbox invalid placeholder="At least one option required">
<x-ui::pillbox-option value="php">PHP</x-ui::pillbox-option>
<x-ui::pillbox-option value="laravel">Laravel</x-ui::pillbox-option>
<x-ui::pillbox-option value="vue">Vue</x-ui::pillbox-option>
</x-ui::pillbox>