FLIN App

Basic Usage

A single toggle with reactive state display.

Dark modeOFF

Settings Panel

Multiple toggles for application preferences.

Dark modeOFF

NotificationsON

Auto-saveOFF

Privacy Controls

Security and privacy toggles for user accounts.

Two-factor authenticationDisabled

Public profileVisible

Notification Preferences

Fine-grained notification control.

Email notifications

Push notifications

SMS alerts

Weekly digest

Feature Flags

Enable or disable experimental features.

Beta features

AI assistant

Advanced analytics

In a Form

Switch toggles combined with form inputs.

Display Name

Make profile public

Email me about new followers

Usage

darkMode = false// Basic switch<Switch bind={darkMode} label="Dark mode" />// With status badge<Row> <Switch bind={darkMode} label="Dark mode" /> {if darkMode}<Badge type="gold">ON</Badge>{else}<Badge>OFF</Badge>{/if}</Row>

Props

Prop	Type	Default	Description
`bind`	binding	-	Two-way boolean binding
`label`	text	""	Label text next to switch

Switch

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

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

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

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

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

.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