A simple list which can be filtered by list value.
<div x-data="filterList()" x-id="['filter-list-input']" class="py-1" role="none">
<div class="p-2">
<label :for="$id('filter-list-input')" role="none" class="hidden">Filter list items</label>
<input x-ref="input" x-model="filter" @click="filter = ''" placeholder="Filter list..." type="text" autocomplete="off" class="w-full px-2 focus:ring-secondary-500 focus:border-secondary-700 border-tertiary-300 rounded-sm" :id="$id('filter-list-input')" />
</div>
</div>
<div x-data="filterList()" x-id="['filter-list-input']" class="py-1" role="none">
{# A filterable list expects an unordered list of items to filter in the "list" block. #}
<div class="p-2">
<label :for="$id('filter-list-input')" role="none" class="hidden">Filter list items</label>
<input
x-ref="input"
x-model="filter"
@click="filter = ''"
placeholder="{{ placeholder|default('Filter list') }}..."
type="text"
autocomplete="off"
class="w-full px-2 focus:ring-secondary-500 focus:border-secondary-700 border-tertiary-300 rounded-sm"
:id="$id('filter-list-input')"
/>
</div>
{# Slot: list #}
{% block list %}{% endblock list %}
</div>