Sheaf UI

#Introduction

The Autocomplete component is a responsive, accessible search input component with dropdown suggestions. It provides real-time filtering, keyboard navigation, and seamless integration with Livewire for dynamic data binding.

#Installation

Use the sheaf artisan command to install the autocomplete component easily:

php artisan sheaf:install autocomplete

Requires Rover Plugin. This component is powered by the Rover primitive. Make sure it's installed and registered before using Component.

and then import the autocomplete.js file in your js entry point:

// app.js
import './components/autocomplete.js';

Once installed, you can use the <x-ui.autocomplete /> component in any Blade view.

#Usage

<x-ui.autocomplete 
    placeholder="Type to search..."
    leftIcon="map-pin"
>
    <x-ui.autocomplete.item>United States</x-ui.autocomplete.item>
    <x-ui.autocomplete.item>United Kingdom</x-ui.autocomplete.item>
    <x-ui.autocomplete.item>Canada</x-ui.autocomplete.item>
    <x-ui.autocomplete.item>Australia</x-ui.autocomplete.item>
    <x-ui.autocomplete.item>Germany</x-ui.autocomplete.item>
    <x-ui.autocomplete.item>France</x-ui.autocomplete.item>
</x-ui.autocomplete>

#Bind To Livewire

To use with Livewire you only need to use wire:model="property" to bind your input state:

<x-ui.autocomplete 
    wire:model="product"
    placeholder="Find products..." 
>
    <x-ui.autocomplete.item>iPhone 15 Pro</x-ui.autocomplete.item>
    <x-ui.autocomplete.item>MacBook Air M2</x-ui.autocomplete.item>
    <x-ui.autocomplete.item>AirPods Pro</x-ui.autocomplete.item>
    <x-ui.autocomplete.item>iPad Pro</x-ui.autocomplete.item>
    <x-ui.autocomplete.item>Apple Watch Series 9</x-ui.autocomplete.item>
</x-ui.autocomplete>

#Using it within Blade & Alpine

You can use it outside Livewire with just Alpine (and Blade):

<x-ui.autocomplete 
    x-model="product"
    placeholder="Find products..." 
>
        <x-ui.autocomplete.item>iPhone 15 Pro</x-ui.autocomplete.item>
        <x-ui.autocomplete.item>MacBook Air M2</x-ui.autocomplete.item>
        <x-ui.autocomplete.item>AirPods Pro</x-ui.autocomplete.item>
        <x-ui.autocomplete.item>iPad Pro</x-ui.autocomplete.item>
        <x-ui.autocomplete.item>Apple Watch Series 9</x-ui.autocomplete.item>
</x-ui.autocomplete>

#Add Label & Description

<x-ui.field class="max-w-64">
    <x-ui.label>Search Products</x-ui.label>
    <x-ui.description>Search through our product catalog</x-ui.description>
    <x-ui.autocomplete>
        <!-- items -->
    </x-ui.autocomplete>
</x-ui.field>

#with Icons

Enhance the autocomplete with leading and trailing icons for better visual communication.

<x-ui.autocomplete 
    placeholder="Find your favorite tech..."
    leftIcon="code-bracket"
    rightIcon="magnifying-glass"
    wire:model="selectedTech">
        <x-ui.autocomplete.item>Laravel</x-ui.autocomplete.item>
        <x-ui.autocomplete.item>Vue.js</x-ui.autocomplete.item>
        <x-ui.autocomplete.item>React</x-ui.autocomplete.item>
        <x-ui.autocomplete.item>Tailwind CSS</x-ui.autocomplete.item>
        <x-ui.autocomplete.item>Alpine.js</x-ui.autocomplete.item>
        <x-ui.autocomplete.item>Livewire</x-ui.autocomplete.item>
</x-ui.autocomplete>

#Clearable

Add a clear button to easily reset the input value.

<x-ui.autocomplete 
    placeholder="Type city name..."
    icon="map-pin"
    clearable="true"
    description="Search for cities worldwide"
    wire:model="selectedCity">
        <x-ui.autocomplete.item>New York</x-ui.autocomplete.item>
        <x-ui.autocomplete.item>Los Angeles</x-ui.autocomplete.item>
        <x-ui.autocomplete.item>Chicago</x-ui.autocomplete.item>
        <x-ui.autocomplete.item>Houston</x-ui.autocomplete.item>
        <x-ui.autocomplete.item>Phoenix</x-ui.autocomplete.item>
        <x-ui.autocomplete.item>Philadelphia</x-ui.autocomplete.item>
</x-ui.autocomplete>

#Validation States

Show different states for validation feedback.

<!-- Invalid state -->
<x-ui.autocomplete 
    placeholder="Search..."
    icon="exclamation-circle"
    invalid="true"
    description="Please select a valid option"
    >
        <x-ui.autocomplete.item>Option 1</x-ui.autocomplete.item>
        <x-ui.autocomplete.item>Option 2</x-ui.autocomplete.item>
</x-ui.autocomplete>

#Disabled and Readonly States

<!-- Disabled -->
<x-ui.autocomplete 
    placeholder="This is disabled..."
    disabled="true"
    wire:model="disabledValue">
        <x-ui.autocomplete.item>Option 1</x-ui.autocomplete.item>
        <x-ui.autocomplete.item>Option 2</x-ui.autocomplete.item>
</x-ui.autocomplete>

<!-- Readonly -->
<x-ui.autocomplete 
    placeholder="This is readonly..."
    readonly
    wire:model="readonlyValue">
        <x-ui.autocomplete.item>Option 1</x-ui.autocomplete.item>
        <x-ui.autocomplete.item>Option 2</x-ui.autocomplete.item>
</x-ui.autocomplete>

#Disabled Individual Items

<x-ui.autocomplete 
    placeholder="have a disabled item ..."
>
    <x-ui.autocomplete.item>United States</x-ui.autocomplete.item>
    <x-ui.autocomplete.item 
        disabled
    > 
        United Kingdom
    </x-ui.autocomplete.item>
    <x-ui.autocomplete.item>Canada</x-ui.autocomplete.item>
    <x-ui.autocomplete.item>Australia</x-ui.autocomplete.item>
    <x-ui.autocomplete.item>Germany</x-ui.autocomplete.item>
    <x-ui.autocomplete.item>France</x-ui.autocomplete.item>
</x-ui.autocomplete>

#Component Prop

#ui.autocomplete

#ui.autocomplete.item