FLIN App

Basic Group

Group radios by name for mutual exclusion.

FreeProEnterprise

Priority Selection

Choose a priority level for a task or issue.

Low priorityMedium priorityHigh priorityUrgent

Shipping Method

Select a delivery option at checkout.

Standard (5-7 days)Express (2-3 days)Overnight (next day)

Payment Method

Choose how to pay for an order.

Credit / Debit CardPayPalBank TransferCryptocurrency

Theme Preference

Application appearance settings.

Light modeDark modeSystem default

In a Form

Radios inside a registration form.

Full Name

Account Type

FreePro

Usage

plan = ""// Group radios by name<Radio name="plan" value="free" label="Free" bind={plan} /><Radio name="plan" value="pro" label="Pro" bind={plan} /><Radio name="plan" value="enterprise" label="Enterprise" bind={plan} />// Display selected value{if plan != ""}<Badge>{plan}</Badge>{/if}

Props

Prop	Type	Default	Description
`name`	text	"radio"	Group name for mutual exclusion
`value`	text	""	Value submitted when selected
`label`	text	""	Display label for the option
`bind`	binding	-	Two-way binding for selected value

Radio

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

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

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

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

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

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

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