A multi-select component that displays selected items as removable "pills" that expand the input area as needed.
<flux:pillbox wire:model="selectedTags" multiple placeholder="Choose tags..."> <flux:pillbox.option value="design">Design</flux:pillbox.option> <flux:pillbox.option value="development">Development</flux:pillbox.option> <flux:pillbox.option value="marketing">Marketing</flux:pillbox.option> <flux:pillbox.option value="sales">Sales</flux:pillbox.option> <flux:pillbox.option value="support">Support</flux:pillbox.option> <flux:pillbox.option value="engineering">Engineering</flux:pillbox.option> <flux:pillbox.option value="product">Product</flux:pillbox.option> <flux:pillbox.option value="operations">Operations</flux:pillbox.option></flux:pillbox>Add a search input to filter through large lists of options.
<flux:pillbox multiple searchable placeholder="Choose skills..."> <flux:pillbox.option value="javascript">JavaScript</flux:pillbox.option> <flux:pillbox.option value="typescript">TypeScript</flux:pillbox.option> <flux:pillbox.option value="php">PHP</flux:pillbox.option> <flux:pillbox.option value="python">Python</flux:pillbox.option> <flux:pillbox.option value="ruby">Ruby</flux:pillbox.option> <flux:pillbox.option value="go">Go</flux:pillbox.option> <flux:pillbox.option value="rust">Rust</flux:pillbox.option> <flux:pillbox.option value="java">Java</flux:pillbox.option> <flux:pillbox.option value="csharp">C#</flux:pillbox.option> <flux:pillbox.option value="swift">Swift</flux:pillbox.option></flux:pillbox><flux:pillbox multiple searchable search:placeholder="Filter skills..."> ...</flux:pillbox>Add icons to options for better visual recognition.
<flux:pillbox multiple placeholder="Choose platforms..."> <flux:pillbox.option value="github"> <div class="flex items-center gap-2"> <flux:icon.code-bracket variant="mini" class="text-zinc-400" /> GitHub </div> </flux:pillbox.option> <flux:pillbox.option value="gitlab"> <div class="flex items-center gap-2"> <flux:icon.server variant="mini" class="text-zinc-400" /> GitLab </div> </flux:pillbox.option> <flux:pillbox.option value="bitbucket"> <div class="flex items-center gap-2"> <flux:icon.cloud variant="mini" class="text-zinc-400" /> Bitbucket </div> </flux:pillbox.option></flux:pillbox>|
Prop
|
Description
|
|---|---|
| wire:model |
Binds the pillbox to a Livewire property. The model should be an array to store multiple selected values. See the wire:model documentation for more information.
|
| placeholder |
Text displayed when no pills are selected.
|
| label |
Label text displayed above the pillbox. When provided, wraps the pillbox in a flux:field component with an adjacent flux:label component. See the field component.
|
| description |
Help text displayed below the pillbox. When provided alongside label, appears between the label and pillbox within the flux:field wrapper.
|
| searchable |
Adds a search input inside the dropdown to filter options.
|
| search:placeholder |
Custom placeholder text for the search input when searchable is true.
|
| filter |
If false, disables client-side filtering for dynamic server-side options.
|
| disabled |
Prevents user interaction with the pillbox.
|
| invalid |
Applies error styling to the pillbox border.
|
|
Slot
|
Description
|
|---|---|
| default |
The pillbox options. Should contain flux:pillbox.option components.
|
| trigger |
Custom trigger element for the dropdown. Replaces the default pill container.
|
| search |
Custom search input for the dropdown. Used when you need to wire up custom search behavior.
|
| empty |
Content shown when no options match the search query.
|
|
Attribute
|
Description
|
|---|---|
| data-flux-pillbox |
Applied to the root element for styling and JavaScript behavior.
|
|
Prop
|
Description
|
|---|---|
| value |
The value associated with this option. This is what gets stored in the model array when selected.
|
| disabled |
Prevents this option from being selected.
|
| filterable |
If false, this option won't be hidden by the search filter. Useful for "no results" messages.
|
|
Slot
|
Description
|
|---|---|
| default |
The option content. Can include text, icons, images, or any custom HTML.
|
|
Prop
|
Description
|
|---|---|
| placeholder |
Placeholder text for the search input. Defaults to "Search...".
|
| icon |
Icon to display in the search input. Defaults to magnifying glass.
|
| clearable |
If true, shows a clear button when the search input has text. Default: true.
|
|
Prop
|
Description
|
|---|---|
| placeholder |
Text displayed when no pills are selected.
|
| invalid |
Applies error styling to the trigger element.
|
| clearable |
Shows a clear all button in the trigger.
|