- How do I install williamug/searchable-select in a Laravel Livewire 3/4 project?
- Run `composer require williamug/searchable-select` and publish the component assets with `php artisan vendor:publish --tag=searchable-select`. Ensure your Tailwind config includes the vendor views by adding `@layer components ./vendor/williamug/searchable-select/resources/views` to your `tailwind.config.js`.
- Does this package support Laravel 11/12/13 and Livewire 3/4?
- Yes, the package is fully compatible with Laravel 11–13 and explicitly tested against Livewire 3 and 4. Check the [GitHub releases](https://github.com/Williamug/searchable-select/releases) for version-specific notes if needed.
- Can I use this for multi-select forms with validation in Livewire?
- Absolutely. The component integrates seamlessly with Livewire’s validation system. Use `@error` directives in your Blade templates, and the selected values (arrays or JSON strings) will sync automatically with your Livewire properties. Multi-select supports removable tags and validation rules like `required|array`.
- How does real-time search perform with large datasets (e.g., 5,000+ options)?
- Client-side filtering is optimized for performance, but for datasets exceeding 10,000 items, consider lazy-loading options via API calls in `updatedProperty`. The package includes debouncing and virtual scrolling tips in the [Performance Optimization](https://github.com/Williamug/searchable-select#performance-optimization) section of the README.
- What if my Laravel project doesn’t use Tailwind CSS? Can I style it differently?
- The component relies on Tailwind classes for styling, but you can override them by extending the provided CSS variables or manually replacing classes. For non-Tailwind projects, expect additional effort to replicate the UI. The [Customization Guide](https://github.com/Williamug/searchable-select#customization-guide) covers this.
- How do I implement grouped options (e.g., categories like 'Fruits' and 'Vegetables')?
- Pass a nested array or Collection to the `options` prop with a `group` key. For example: `['group' => 'Fruits', 'options' => [...]], ['group' => 'Vegetables', 'options' => [...]]. The component automatically renders grouped headers. See the [Grouped Options](https://github.com/Williamug/searchable-select#grouped-options) example in the README.
- Is this component accessible (keyboard navigation, ARIA labels, screen readers)?
- Yes, the component includes full ARIA support, keyboard navigation (e.g., arrow keys, Enter, Escape), and screen reader compatibility. Tested with common assistive technologies, but you may need to adjust labels or props like `aria-label` for custom use cases.
- Can I use this for cascading dropdowns (e.g., country → state → city)?
- Yes, the package supports dependent dropdowns. Use the `wire:model` binding to trigger updates in your Livewire component, and dynamically fetch options for the next dropdown based on the previous selection. Example: `updated('country') { $this->states = State::where('country_id', $this->country)->get(); }`
- How do I handle selected values in the database (e.g., storing multi-select arrays)?
- For multi-select, store the selected values as a JSON-encoded string or array in your database. Use Laravel’s `json` column type or cast the property in your Livewire component with `$casts = ['tags' => 'array']`. The component automatically serializes/deserializes values for you.
- Are there alternatives to this package for Laravel Livewire searchable selects?
- Yes, alternatives include `livewire-select` (more feature-rich but heavier) or `laravel-vue-select` (if using Vue/Inertia). However, `williamug/searchable-select` stands out for its lightweight Alpine.js integration, Tailwind styling, and focus on Livewire’s reactivity model without external dependencies.