Tags Input & Empty State

#Tags Input Component

The <x-ui.tags-input> component allows users to input multiple values as tags. 100% Alpine.js with Livewire binding support.

#Basic Usage

<x-ui.tags-input placeholder="Add tags..." />

#With Livewire Binding

{{-- In your Livewire component --}}
public array $tags = [];
 
{{-- In your blade view --}}
<x-ui.tags-input
    wire:model.live="tags"
    placeholder="Type and press Enter..."
/>

#Email Validation

<x-ui.tags-input
    wire:model.live="emails"
    placeholder="email@example.com"
    :validateEmail="true"
/>

#Max Tags Limit

<x-ui.tags-input
    wire:model.live="skills"
    :maxTags="5"
    :allowDuplicates="false"
    placeholder="Max 5 skills..."
/>

#Sizes

<x-ui.tags-input size="sm" placeholder="Small" />
<x-ui.tags-input size="md" placeholder="Medium" />
<x-ui.tags-input size="lg" placeholder="Large" />

#Disabled State

<x-ui.tags-input :disabled="true" placeholder="Disabled" />

#Props Reference

#Keyboard Shortcuts

• Enter or Comma (,): Add tag
• Backspace (when input empty): Remove last tag
• X button: Remove specific tag

#Features

• Add tags with Enter or Comma
• Remove tags with X button or Backspace
• Email validation (optional)
• Max tags limit (optional)
• Duplicate prevention (optional)
• Full Livewire binding support
• Error messages for validation
• Three size variants

#Empty State Component

The <x-ui.empty-state> component provides user-friendly messaging when there's no data to display. Essential for good UX.

#Basic Usage

<x-ui.empty-state
    title="No results found"
    description="Try adjusting your search criteria."
    icon="search-x"
/>

#With Action Button

<x-ui.empty-state
    title="No orders yet"
    description="Start selling by creating your first order."
    icon="shopping-cart"
    actionLabel="Create Order"
    actionUrl="/orders/create"
/>

#With Custom Action (Slot)

<x-ui.empty-state
    title="No products found"
    description="Add your first product to get started."
    icon="package-search"
>
    <button wire:click="createProduct" class="btn btn-primary">
        <x-lucide-plus class="size-4" />
        Add Product
    </button>
</x-ui.empty-state>

#Different Icons

{{-- No search results --}}
<x-ui.empty-state
    title="No results"
    icon="search-x"
/>
 
{{-- No data --}}
<x-ui.empty-state
    title="No data"
    icon="database"
/>
 
{{-- No files --}}
<x-ui.empty-state
    title="No files"
    icon="file-x"
/>
 
{{-- No messages --}}
<x-ui.empty-state
    title="No messages"
    icon="mail-x"
/>
 
{{-- Empty inbox --}}
<x-ui.empty-state
    title="Empty inbox"
    icon="inbox"
/>

#Sizes

<x-ui.empty-state size="sm" title="Small" />
<x-ui.empty-state size="md" title="Medium" />
<x-ui.empty-state size="lg" title="Large" />

#In Data Tables

@if($items->isEmpty())
    <x-ui.empty-state
        title="No items found"
        description="Try clearing filters or adding new items."
        icon="inbox"
    >
        <button wire:click="clearFilters" class="btn">
            Clear Filters
        </button>
    </x-ui.empty-state>
@else
    {{-- Display data table --}}
@endif

#Props Reference

#Common Use Cases

• Empty search results: Guide users to refine search
• No data available: Explain why there's no data
• Empty lists/tables: Prompt users to add items
• No messages: Show inbox is clean
• No files uploaded: Encourage file upload
• Filter returns nothing: Suggest clearing filters