Skip to main content
The Pillbox component requires a Flux Pro license. Learn more about Flux Pro.
The Pillbox component (also known as a tag input or token field) allows users to enter multiple values as individual removable pills or tags. It’s perfect for multi-select scenarios like tagging, categorization, and recipient selection.

​
Overview

Pillbox provides an intuitive interface for managing multiple values, where each value appears as a dismissible “pill” that users can easily add or remove.

​
Use Cases

Tagging System

Add and manage tags for posts, products, or content

Email Recipients

Select multiple email recipients with autocomplete

Filters

Build multi-criteria filter selections

Categorization

Assign multiple categories or labels

​
Key Features

  • Add/Remove Pills - Click to add, click X to remove
  • Autocomplete - Suggest values as user types
  • Keyboard Navigation - Backspace to remove, Enter to add
  • Validation - Prevent duplicates and invalid entries
  • Max Items - Limit number of selections
  • Custom Rendering - Customize pill appearance
  • Livewire Binding - Seamless wire:model integration
  • Paste Support - Parse pasted comma-separated values

​
Common Patterns

​
Email Recipients

<flux:pillbox 
    wire:model="recipients"
    placeholder="Add email addresses..."
    delimiter=","
    validate="email"
/>

​
Tags with Autocomplete

<flux:pillbox 
    wire:model="tags"
    :suggestions="$availableTags"
    placeholder="Add tags..."
    max="5"
/>

​
Color-Coded Pills

<flux:pillbox wire:model="categories">
    @foreach($categories as $category)
        <flux:pillbox.pill :color="$category->color">
            {{ $category->name }}
        </flux:pillbox.pill>
    @endforeach
</flux:pillbox>

​
Props

PropTypeDescription
wire:modelstringLivewire property binding (array)
placeholderstringInput placeholder text
suggestionsarrayAutocomplete suggestions
delimiterstringCharacter to split pasted values
maxintMaximum number of items
validatestringValidation rule (email, url, etc.)
allow-duplicatesboolAllow duplicate values
disabledboolDisable the input

​
Validation

Pillbox integrates with Livewire validation: 
protected $rules = [
    'tags' => 'required|array|min:1|max:10',
    'tags.*' => 'string|max:50',
];

​
Accessibility

  • ARIA labels for pills and remove buttons
  • Keyboard navigation (Tab, Backspace, Enter)
  • Screen reader announcements for additions/removals
  • Focus management
  • Proper list semantics
Combine Pillbox with Autocomplete for a powerful multi-select experience with search.

Build docs developers (and LLMs) love

Get started for freeTalk to us