Search Bar / Results

Styled search input with an integrated results dropdown.

Examples

Basic Search

Type something to see simulated results.

Getting Started

Learn how to install and setup Plume.

Components

Explore the full collection of UI elements.

Colors & Theming

Customize the look and feel.

blade

<div class="w-full max-w-md">
    <x-plume::form 
        formData="{ 'query': '' }">
        <x-plume::search model="query" placeholder="Search documentation...">
            <x-slot:results>
                <x-plume::search.result title="Getting Started" icon="icon-[fluent--book-24-regular]">
                    Learn how to install and setup Plume.
                </x-plume::search.result>
                <x-plume::search.result title="Components" icon="icon-[fluent--box-24-regular]">
                    Explore the full collection of UI elements.
                </x-plume::search.result>
                <x-plume::search.result title="Colors & Theming"
                    icon="icon-[fluent--paint-brush-24-regular]">
                    Customize the look and feel.
                </x-plume::search.result>
            </x-slot:results>
        </x-plume::search>
    </x-plume::form>
</div>

Prop	Type	Default	Description
placeholder	string	'Search...'	Placeholder text for the search input.
model	string	null	AlpineJS model name for the search query.
onSelect	string	null	AlpineJS expression or function to call when a result is selected.

Usage

blade

<x-plume::search placeholder="Search items...">
    <x-slot:results>
        <x-plume::search.result title="Result 1" href="/link" icon="icon-...">
            Description text...
        </x-plume::search.result>
    </x-slot:results>
</x-plume::search>