FLIN App

Quantity Selector

Product quantity for e-commerce carts.

Quantity

1 items

Age Input

Age field with min/max validation.

Age

25 years old

Seat Reservation

Reserve seats with step increment.

Seats

2 seats

Temperature

Thermostat control with degree values.

Temperature (F)

72F

In a Form

Number inputs in a shipping/order form context.

Product Name

Quantity

Weight (lbs)

Configuration

System configuration with various numeric fields.

Max Retries

Timeout (seconds)

Cache Size (MB)

Usage

quantity = 1// Basic number input<NumberInput label="Quantity" bind={quantity} min="1" max="99" />// With placeholder<NumberInput label="Age" bind={age} min="0" max="120" placeholder="Your age" />// With step<NumberInput label="Seats" bind={seats} min="1" max="20" step="1" />

Props

Prop	Type	Default	Description
`label`	text	""	Label text above input
`bind`	binding	-	Two-way data binding
`placeholder`	text	"0"	Placeholder text
`min`	text	""	Minimum allowed value
`max`	text	""	Maximum allowed value
`step`	text	"1"	Step increment

NumberInput

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

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

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

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

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

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

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