Laravel Pillbox Component
ProA multi-select input that displays selected items as removable pills with searchable dropdown. Pro component.
A Pillbox 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::pillbox>
Installation
composer require bluestarsystem/aura-uiThe Pillbox is part of Aura Pro, installed via your private Composer (Satis) access after purchase. See pricing →
Usage
<x-aura::pillbox
label="Tags"
:options="['Laravel', 'Livewire', 'Alpine.js', 'Tailwind']"
wire:model="selectedTags"
/>See the full API, props and live examples in the Pillbox documentation.
Overview
The <x-aura::pillbox> component provides a multi-select input where selected values appear as removable pill badges. It includes a searchable dropdown for selecting from available options, a configurable maximum selection limit, and full Livewire integration via wire:model. The component supports label, hint, and error states for seamless form integration.
Use pillbox for:
- Tag and category selectors
- Multi-select filters
- Skill or interest pickers
- Any multi-value input with visual feedback
Props
| Prop | Type | Default | Description |
|---|---|---|---|
label |
string|null |
null |
Label text displayed above the input |
options |
array |
[] |
Available options. Accepts simple arrays or arrays of objects (see below) |
optionLabel |
string |
'label' |
Key for the display text when using object options |
optionValue |
string |
'value' |
Key for the value when using object options |
searchable |
bool |
true |
Show a search input to filter options |
max |
int|null |
null |
Maximum number of items that can be selected. null for unlimited |
disabled |
bool |
false |
Disable the input |
placeholder |
string |
'Select...' |
Placeholder text for the search input |
error |
string|null |
null |
Error message displayed below the input |
hint |
string|null |
null |
Hint text displayed below the input (hidden when error is present) |
Option Formats
Simple array (value and label are the same):
['Laravel', 'Vue', 'React', 'Svelte']
Associative array:
['laravel' => 'Laravel', 'vue' => 'Vue.js', 'react' => 'React']
Array of objects:
[
['label' => 'Laravel', 'value' => 'laravel'],
['label' => 'Vue.js', 'value' => 'vue'],
]
See more examples and every variant in the Pillbox documentation.