FLIN App

Country Selection

Type to search and select a country.

Country

Programming Language

Find a language from the suggestion list.

Language

City Search

Autocomplete without a label.

Food Selection

Quick selection from a produce list.

Favorite Fruit

In a Form

Autocomplete combined with other inputs in a form.

Company Name

Industry

Country

Framework Picker

Choose from popular web frameworks.

Frontend

Usage

country = ""// With label and suggestions<Autocomplete label="Country" bind={country} placeholder="Type a country..." list="United States,United Kingdom,France,Germany" />// Without label<Autocomplete bind={city} placeholder="Select a city..." list="New York,London,Paris,Tokyo,Berlin" />

Props

Prop	Type	Default	Description
`label`	text	""	Label text above input
`bind`	binding	-	Two-way binding for selected value
`placeholder`	text	"Type to search..."	Placeholder text
`list`	text	""	Comma-separated list of suggestions

Autocomplete

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

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

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

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

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

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

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

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