FLIN App

Skills

Technical skill badges in a tag container.

Skills

JavaScriptFLINRust

Category Tags

Colored badges for product categorization.

Without Label

Standalone tags container for compact layouts.

reactvuesvelteflin

Status Tags

Use semantic badge types for status indicators.

Issue Labels

BugNeeds ReviewApprovedDocumentation

In a Form

Tags input combined with other form fields.

Article Title

Interests

User interest tags for profile customization.

Your Interests

MusicTechnologyTravelPhotographyCooking

Usage

// Basic tags with label<TagsInput label="Skills"> <Badge>JavaScript</Badge> <Badge>FLIN</Badge> <Badge>Rust</Badge></TagsInput>// Colored tags<TagsInput label="Categories"> <Badge type="gold">Featured</Badge> <Badge type="info">New Arrival</Badge></TagsInput>

Props

Prop	Type	Default	Description
`label`	text	""	Label text above the tags area
`children`	content	-	Badge components displayed as tags

TagsInput

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

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

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

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

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

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

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

Skills

Category Tags

Without Label

Status Tags

In a Form

Interests

Usage

Props