Dropdown Component

A versatile dropdown component that supports single-select, multi-select, radio mode, and custom slot-based usage. Built with Alpine.js for smooth interactions.

Props

• label - string - Label text above the dropdown
• name - string - Input name attribute
• id - string|null - Custom ID (auto-generated if not provided)
• options - array - Options array in ['value' => 'label'] format
• selected - array|string - Selected value(s)
• placeholder - string - Placeholder text (default: 'Placeholder')
• hint - string - Helper text
• error - bool - Error state
• errorMessage - string - Error message
• required - bool - Required field
• disabled - bool - Disabled state
• multiple - bool - Enable multi-select mode (default: false)
• radio - bool - Use radio buttons for single-select (default: false)
• size - string - 'sm' | 'default' | 'lg' (default: 'default')

Slots

• trigger - Custom trigger button/element
• content - Custom dropdown content

Modes

• Standard - Single-select dropdown with click-to-select
• Multi-select - Multiple selection with checkboxes
• Radio - Single-select with radio buttons
• Custom Slots - Fully customizable trigger and content

Features

• • Single and multi-select modes
• • Radio button mode for single-select
• • Custom trigger and content slots
• • Size options (sm, default, lg)
• • Error and validation states
• • Disabled state support
• • Selected values display
• • Dark mode support
• • Responsive design
• • Click outside to close

Common Use Cases

<x-ui.dropdown 
    label="Category" 
    name="category" 
    :options="['tech' => 'Technology', 'design' => 'Design']" 
/>

<x-ui.dropdown 
    label="Tags" 
    name="tags" 
    :multiple="true"
    :options="['php' => 'PHP', 'js' => 'JavaScript']" 
/>

<x-ui.dropdown>
    <x-slot:trigger>
        <button>Menu</button>
    </x-slot:trigger>
    <x-slot:content>
        <div class="py-1">
            <a href="#">Item 1</a>
        </div>
    </x-slot:content>
</x-ui.dropdown>