FLIN App

Basic Usage

Simple dropdown with label and reactive badge.

Favorite Color

No selection

Without Label

Standalone selects that rely on placeholder text.

User Roles

Assign permissions with a role dropdown.

User Role

Country Selector

Location selection with many options.

Country

In a Form

Select combined with text inputs in a form.

Full Name

Email

Department

Settings

Multiple selects for application preferences.

Language

Timezone

Currency

Usage

color = ""// With label and placeholder<Select bind={color} label="Favorite Color" placeholder="Choose a color" options="Red,Green,Blue,Yellow,Purple" />// Without label<Select bind={size} placeholder="Pick a size" options="Small,Medium,Large,X-Large" />// Display selected value{if color != ""}<Badge>{color}</Badge>{/if}

Props

Prop	Type	Default	Description
`bind`	binding	-	Two-way binding for selected value
`label`	text	""	Label text above select
`placeholder`	text	"Select..."	Placeholder option text
`options`	text	""	Comma-separated list of options

Select

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

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

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

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

.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; } Settings

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

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