FLIN App

With Label

Labels provide context above the input field.

Full Name

Email Field

Email-style input with reactive badge display.

Without Label

Standalone inputs that rely on placeholder for context.

Form Layout

Multiple inputs stacked in a typical form arrangement.

First Name

Last Name

Email Address

Phone

Real-World Examples

Inputs styled for common application scenarios.

Company Name

Job Title

Website

Profile Fields

Typical user profile form inputs.

Display Name

Bio

Location

Usage

demoName = ""// With label and binding<Input label="Full Name" bind={demoName} placeholder="Enter your name" />// Without label<Input bind={demoSearch} placeholder="Search..." />// Display bound value<p>Hello, {demoName}!</p>

Props

Prop	Type	Default	Description
`label`	text	""	Label text above input
`bind`	binding	-	Two-way data binding
`placeholder`	text	""	Placeholder text

Input

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

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

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

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

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

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

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

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