FLIN App

With Label Prop

Pass a string label directly via the label prop.

I agree to the termsNot agreed

With Children

Wrap label text as children for richer content.

Subscribe to newsletter

Checkbox Group

Multiple checkboxes for multi-select scenarios.

Accept terms of serviceReceive email updatesEnable dark mode

Preferences Panel

Settings-style checkbox group with status indicators.

Marketing emailsOFF

Usage analyticsOFF

Dark themeOFF

Sign Up Consent

Checkboxes used in registration forms.

Email

I agree to the Terms of Service and Privacy PolicySend me product updates and tips

Task Checklist

Use checkboxes as a simple to-do list.

Review pull requestUpdate documentationDeploy to stagingRun integration testsNotify the team

Usage

agreed = false// With label prop<Checkbox bind={agreed} label="I agree to the terms" />// With children<Checkbox bind={newsletter}>Subscribe to newsletter</Checkbox>// Conditional display{if agreed}<Badge type="success">Agreed</Badge>{/if}

Props

Prop	Type	Default	Description
`bind`	binding	-	Two-way boolean binding
`label`	text	""	Label text next to checkbox
`children`	content	-	Alternative to label prop

Checkbox

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

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

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

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

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

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

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

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