Toolbar
Beta

Tag Selector

The FktTagSelector component provides an interactive dropdown for selecting from a list of tag options. Built with Angular signals and the overlay system, it offers a clean interface for choosing status, categories, or other tag-represented values.

Import

import {FktTagSelectorComponent} from "frakton-ng/tag-selector";

Preview

Interactive tag selector with predefined status options. Click to open dropdown and select an option.

Success

Order status

Tag selector for managing order status with multiple workflow states.

Order #1234 Status:

Processing

Current status: Processing

Order #1234 Status:

Current status: {{ currentStatusLabel() }}

Priority

Tag selector for task or issue priority levels with visual hierarchy.

Task Priority

Medium

Tasks that should be completed within normal timeframes

Task Priority

{{ priorityDescription() }}

Project status

Displays the status of a project using colored tags for each phase. Use this example for dashboards, kanbans or project summary views.

Development

User status

Represents the status of a user with classic availability tags (Online, Away, Busy, Offline). Useful in chat apps, team dashboards, or user presence indicators.

Online

Team assignment

Showcases different team assignments using distinctive tag colors. Handy for project management tools, HR apps, or team allocation displays.

Frontend Team

Category

Demonstrates tags for product or content categories. Use this pattern for e-commerce, content tagging, search filters, or any interface that organizes information by category.

Electronics