Custom styles

[[Global vs local component namespace]]

While Livewire Autocomplete comes with some default styles, to make getting up and running easier, it is also flexible and allows you to add your own styling to match your app.

  • All components have an unstyled prop that can be passed in to remove all default styling.

  • x-autocomplete-item has a couple of extra styles that need to be added active, inactive, disabled to give contrast to your dropdown items.

  • All components accept a class prop to add any custom styling.

  • x-autocomplete-input and x-autocomplete-list both also have a containerClass prop to allow you to style the container elements directly.

Using custom components for styling

Instead of having to repeat custom styles every time you implement the autcomplete component, we recommend creating custom blade components that wrap up the components from this package.

To do this, we recommend disabling the global namespace in the autocomplete config by setting use_global_namespace to false. See [[#Namespaced components]].

By disabling the global namespace, it allows you to create your own component with the same names. Now in your resources/view/components directory, create a new directory called autocomplete.

Inside that directory create the following files:

  • index.blade.php
  • autocomplete-empty.blade.php
  • autocomplete-input-prefix.blade.php
  • autocomplete-input-suffix.blade.php
  • autocomplete-input.blade.php
  • autocomplete-item.blade.php
  • autocomplete-label.blade.php
  • autocomplete-list.blade.php
  • autocomplete-loading.blade.php
  • autocomplete-new-item.blade.php
  • autocomplete-prompt.blade.php

Let's look at the autocomplete-input.blade.php as an example of how to implement them.

If we open autocomplete-input.blade.php, inside it we can now reference the Livewire Autocomplete namespaced input component:

<x-lwa::autocomplete-input :attributes="$attributes" />

Next we need to add the unstyled attribute, to remove the default styling.

<x-lwa::autocomplete-input :attributes="$attributes" unstyled />

Finally we can add any custom classes by passing them into the attributes bag.

<x-lwa::autocomplete-input :attributes="$attributes->class('my-custom-class other-custom-class')" unstyled />

Now when we go to use our component, we can just reference <x-autocomplete-input /> as per usual but our custom styles will be applied.

We can follow this same process for all of the remaining components created earlier--a few of which have additional styles.

Or if you'd still prefer to use some of the inbuilt components and not override them, you can always just reference the namespaced autocomplete components directly in your Livewire components.

Auto-generate custom components using console command

Instead of manually creating all of the above components, you can automatically create them by running the following console command:

php artisan lwautocomplete:custom-components