FLIN App

Basic Search

Simple search input with live query display.

Product Search

Labeled search for product catalogs.

Products

User Search

Find users by name or email address.

Find Users

In a Toolbar

Search combined with action buttons.

Different Contexts

Search inputs adapted for various use cases.

Files

Messages

Settings

Dashboard Filter

Search as a filter for dashboard data.

Usage

query = ""// Basic search<SearchInput bind={query} placeholder="Search..." />// With label<SearchInput label="Products" bind={productSearch} placeholder="Search products..." />// Display query{if query != ""}<Badge>"{query}"</Badge>{/if}

Props

Prop	Type	Default	Description
`label`	text	""	Label text above input
`bind`	binding	-	Two-way binding for search query
`placeholder`	text	"Search..."	Placeholder text

SearchInput

.flin-icon { display: inline-block; vertical-align: middle; flex-shrink: 0; } Basic Search

.flin-icon { display: inline-block; vertical-align: middle; flex-shrink: 0; } Product Search

.flin-icon { display: inline-block; vertical-align: middle; flex-shrink: 0; } User Search

.flin-icon { display: inline-block; vertical-align: middle; flex-shrink: 0; } In a Toolbar

.flin-icon { display: inline-block; vertical-align: middle; flex-shrink: 0; } Different Contexts

.flin-icon { display: inline-block; vertical-align: middle; flex-shrink: 0; } Dashboard Filter

.flin-icon { display: inline-block; vertical-align: middle; flex-shrink: 0; } Usage

.flin-icon { display: inline-block; vertical-align: middle; flex-shrink: 0; } Props